feat: add loading state to external field modal

measuredco · Nov 3, 2023 · 5b4fc92 · 5b4fc92
1 parent d92de7f
commit 5b4fc92
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 24 deletions.
diff --git a/packages/core/components/ExternalInput/index.tsx b/packages/core/components/ExternalInput/index.tsx
@@ -5,8 +5,10 @@ import { ExternalField } from "../../types/Config";
 import { Link, Unlock } from "react-feather";
 import { Modal } from "../Modal";
 import { Heading } from "../Heading";
+import { ClipLoader } from "react-spinners";
 
 const getClassName = getClassNameFactory("ExternalInput", styles);
+const getClassNameModal = getClassNameFactory("ExternalInputModal", styles);
 
 export const ExternalInput = ({
   field,
@@ -22,6 +24,7 @@ export const ExternalInput = ({
   const [data, setData] = useState<Record<string, any>[]>([]);
   const [isOpen, setOpen] = useState(false);
   const [selectedData, setSelectedData] = useState(value);
+  const [isLoading, setIsLoading] = useState(true);
   const keys = useMemo(() => {
     const validKeys: Set<string> = new Set();
 
@@ -42,14 +45,15 @@ export const ExternalInput = ({
 
       if (listData) {
         setData(listData);
+        setIsLoading(false);
       }
     })();
   }, [field]);
 
   return (
     <div
       className={getClassName({
-        hasData: !!selectedData,
+        dataSelected: !!selectedData,
         modalVisible: isOpen,
       })}
     >
@@ -85,15 +89,21 @@ export const ExternalInput = ({
         )}
       </div>
       <Modal onClose={() => setOpen(false)} isOpen={isOpen}>
-        <div className={getClassName("masthead")}>
-          <Heading rank={2} size="xxl">
-            Select content
-          </Heading>
-        </div>
+        <div
+          className={getClassNameModal({
+            isLoading,
+            loaded: !isLoading,
+            hasData: !!data,
+          })}
+        >
+          <div className={getClassNameModal("masthead")}>
+            <Heading rank={2} size="xxl">
+              Select content
+            </Heading>
+          </div>
 
-        {data.length ? (
-          <div className={getClassName("modalTableWrapper")}>
-            <table className={getClassName("table")}>
+          <div className={getClassNameModal("tableWrapper")}>
+            <table className={getClassNameModal("table")}>
               <thead>
                 <tr>
                   {keys.map((key) => (
@@ -126,9 +136,13 @@ export const ExternalInput = ({
               </tbody>
             </table>
           </div>
-        ) : (
-          <div style={{ padding: 24 }}>No content</div>
-        )}
+
+          <div className={getClassNameModal("noContentBanner")}>No content</div>
+
+          <div className={getClassNameModal("loadingBanner")}>
+            <ClipLoader size="24" />
+          </div>
+        </div>
       </Modal>
     </div>
   );

diff --git a/packages/core/components/ExternalInput/styles.module.css b/packages/core/components/ExternalInput/styles.module.css
@@ -32,7 +32,7 @@
   z-index: 1;
 }
 
-.ExternalInput--hasData .ExternalInput-button {
+.ExternalInput--dataSelected .ExternalInput-button {
   color: var(--puck-color-grey-2);
   display: block;
   border-top-right-radius: 0px;
@@ -53,61 +53,95 @@
   margin-left: -1px;
 }
 
-.ExternalInput-masthead {
+.ExternalInputModal {
+  position: relative;
+}
+
+.ExternalInputModal-masthead {
   background-color: white;
   padding: 32px 24px;
 }
 
-.ExternalInput-modalTableWrapper {
+.ExternalInputModal-tableWrapper {
   overflow-x: scroll;
   overflow-y: scroll;
   flex-grow: 1;
 }
 
-.ExternalInput-table {
+.ExternalInputModal-table {
   border-spacing: 0px;
   color: var(--puck-color-neutral-4);
   position: relative;
 }
 
-.ExternalInput-table thead {
+.ExternalInputModal-table thead {
   position: sticky;
   top: 0;
 }
 
-.ExternalInput-table th {
+.ExternalInputModal-table th {
   border-bottom: 1px solid var(--puck-color-grey-8);
   border-top: 1px solid var(--puck-color-grey-8);
   font-weight: 700;
   padding: 16px 24px;
   opacity: 0.9;
 }
 
-.ExternalInput-table td {
+.ExternalInputModal-table td {
   padding: 16px 24px;
 }
 
-.ExternalInput-table tr:nth-of-type(n) {
+.ExternalInputModal-table tr:nth-of-type(n) {
   background-color: white;
 }
 
-.ExternalInput-table tr:nth-of-type(2n) {
+.ExternalInputModal-table tr:nth-of-type(2n) {
   background-color: var(--puck-color-grey-10);
 }
 
-.ExternalInput-table tr td:first-of-type {
+.ExternalInputModal-table tr td:first-of-type {
   font-weight: 500;
 }
 
-.ExternalInput-table tbody tr:hover {
+.ExternalInputModal-table tbody tr:hover {
   background: var(--puck-color-grey-11);
   color: var(--puck-color-azure-4);
   cursor: pointer;
   position: relative;
   margin-left: -5px;
 }
 
-.ExternalInput-table tbody tr:hover td:first-of-type {
+.ExternalInputModal-table tbody tr:hover td:first-of-type {
   border-left: 4px solid var(--puck-color-azure-4);
   padding-left: 20px;
 }
+
+.ExternalInputModal-tableWrapper {
+  display: none;
+}
+
+.ExternalInputModal--hasData .ExternalInputModal-tableWrapper {
+  display: block;
+}
+
+.ExternalInputModal-loadingBanner {
+  display: none;
+  background-color: white;
+  padding: 64px;
+  align-items: center;
+  justify-content: center;
+}
+
+.ExternalInputModal--isLoading .ExternalInputModal-loadingBanner {
+  display: flex;
+}
+
+.ExternalInputModal-noContentBanner {
+  display: none;
+}
+
+.ExternalInputModal--loaded:not(.ExternalInputModal--hasData)
+  .ExternalInputModal-noContentBanner {
+  display: block;
+  padding: 24px;
+}