oddbit · DennisAlund · Aug 22, 2024 · Aug 21, 2024
diff --git a/hosting/src/app/(protected)/content/article/page.tsx b/hosting/src/app/(protected)/content/article/page.tsx
@@ -13,7 +13,7 @@ import {Suspense, useEffect, useState} from "react";
 export default function DocumentTypeDocumentsPage() {
   const {data: documentType} = useTanamDocumentType("article");
   const {create, error: crudError} = useCrudTanamDocument();
-  const {data: documents, error: docsError} = useTanamDocuments("article");
+  const {data: documents, error: docsError, isLoading} = useTanamDocuments("article");
   const [notification, setNotification] = useState<UserNotification | null>(null);
   const router = useRouter();
 
@@ -53,7 +53,11 @@ export default function DocumentTypeDocumentsPage() {
       )}
 
       <Suspense fallback={<Loader />}>
-        {documentType ? <DocumentTypeGenericList documents={documents} documentType={documentType} /> : <Loader />}
+        {documentType ? (
+          <DocumentTypeGenericList isLoading={isLoading} documents={documents} documentType={documentType} />
+        ) : (
+          <Loader />
+        )}
       </Suspense>
     </>
   );

diff --git a/hosting/src/components/DocumentType/DocumentTypeGenericList.tsx b/hosting/src/components/DocumentType/DocumentTypeGenericList.tsx
@@ -6,28 +6,28 @@ import Link from "next/link";
 interface TableOverviewGenericProps {
   documentType: TanamDocumentTypeClient;
   documents: TanamDocumentClient[];
+  isLoading?: boolean;
 }
 
-export function DocumentTypeGenericList({documents, documentType}: TableOverviewGenericProps) {
+export function DocumentTypeGenericList({documents, documentType, isLoading}: TableOverviewGenericProps) {
   return (
-    <>
-      <Table
-        headers={["Title", "Created", "Status"]}
-        rows={documents.map((document, key) => [
-          <Link key={`${key}-${document.id}-id`} href={`/content/${document.documentType}/${document.id}`}>
-            <p className="font-medium text-black dark:text-white">{document.data[documentType.titleField] as string}</p>
-          </Link>,
-          <p key={`${key}-${document.id}-date`} className="text-black dark:text-white">
-            {document.createdAt?.toDate().toUTCString()}
-          </p>,
+    <Table
+      isLoading={isLoading}
+      headers={["Title", "Created", "Status"]}
+      rows={documents.map((document, key) => [
+        <Link key={`${key}-${document.id}-id`} href={`/content/${document.documentType}/${document.id}`}>
+          <p className="font-medium text-black dark:text-white">{document.data[documentType.titleField] as string}</p>
+        </Link>,
+        <p key={`${key}-${document.id}-date`} className="text-black dark:text-white">
+          {document.createdAt?.toDate().toUTCString()}
+        </p>,
 
-          <TableRowLabel
-            key={`${key}-${document.id}-status`}
-            title={document.status}
-            status={document.status === "published" ? "success" : "info"}
-          />,
-        ])}
-      />
-    </>
+        <TableRowLabel
+          key={`${key}-${document.id}-status`}
+          title={document.status}
+          status={document.status === "published" ? "success" : "info"}
+        />,
+      ])}
+    />
   );
 }
diff --git a/hosting/src/components/Table/Table.tsx b/hosting/src/components/Table/Table.tsx
@@ -1,8 +1,9 @@
-import React from "react";
+import React, {FC} from "react";
 
 interface TableProps {
   headers: string[];
   rows: React.ReactNode[][];
+  isLoading?: boolean;
 }
 
 /**
@@ -22,13 +23,14 @@ interface TableProps {
  *        onDownload={() => console.log("Download", document)}
  *      />,
  *    ])}
+ *    isLoading={true}
  *  />
  * ```
  *
  * @param {TableProps} param0 Table parameters
  * @return {JSX.Element} Table component
  */
-export function Table({headers, rows}: TableProps): JSX.Element {
+export function Table({headers, rows, isLoading = false}: TableProps): JSX.Element {
   return (
     <div className="rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
       <div className="max-w-full overflow-x-auto">
@@ -43,18 +45,38 @@ export function Table({headers, rows}: TableProps): JSX.Element {
             </tr>
           </thead>
           <tbody>
-            {rows.map((row, rowIndex) => (
-              <tr key={rowIndex} className="border-b border-[#eee] dark:border-strokedark">
-                {row.map((col, colIndex) => (
-                  <td key={`r${rowIndex}c${colIndex}`} className="px-4 py-5 dark:border-strokedark">
-                    {col}
-                  </td>
-                ))}
-              </tr>
-            ))}
+            {isLoading
+              ? Array.from({length: 20}).map((_, rowIndex) => <TableRowShimmer key={rowIndex} headers={headers} />)
+              : rows.map((row, rowIndex) => <TableRow key={rowIndex} row={row} />)}
           </tbody>
         </table>
       </div>
     </div>
   );
 }
+
+const TableRowShimmer: FC<{
+  headers: string[];
+  rowIndex?: number;
+}> = ({headers, rowIndex}) => (
+  <tr className="border-b border-[#eee] dark:border-strokedark">
+    {headers.map((_, colIndex) => (
+      <td key={`r${rowIndex}c${colIndex}`} className="px-4 py-5 dark:border-strokedark">
+        <div className="h-5 bg-zinc-200 rounded-md animate-pulse dark:bg-gray-700"></div>
+      </td>
+    ))}
+  </tr>
+);
+
+const TableRow: FC<{
+  row: React.ReactNode[];
+  rowIndex?: number;
+}> = ({row, rowIndex}) => (
+  <tr className="border-b border-[#eee] dark:border-strokedark">
+    {row.map((col, colIndex) => (
+      <td key={`r${rowIndex}c${colIndex}`} className="px-4 py-5 dark:border-strokedark">
+        {col}
+      </td>
+    ))}
+  </tr>
+);
diff --git a/hosting/src/hooks/useTanamDocuments.tsx b/hosting/src/hooks/useTanamDocuments.tsx
@@ -9,6 +9,7 @@ import {useEffect, useState} from "react";
 interface UseTanamDocumentsResult {
   data: TanamDocumentClient[];
   error: UserNotification | null;
+  isLoading: boolean;
 }
 
 /**
@@ -20,10 +21,12 @@ interface UseTanamDocumentsResult {
 export function useTanamDocuments(documentTypeId?: string): UseTanamDocumentsResult {
   const [data, setData] = useState<TanamDocumentClient[]>([]);
   const [error, setError] = useState<UserNotification | null>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
 
   useEffect(() => {
     if (!documentTypeId) {
       setError(new UserNotification("error", "Missing parameter", "Content type parameter is missing"));
+      setIsLoading(false);
       return;
     }
 
@@ -35,48 +38,55 @@ export function useTanamDocuments(documentTypeId?: string): UseTanamDocumentsRes
       (snapshot) => {
         const documents = snapshot.docs.map((doc) => TanamDocumentClient.fromFirestore(doc));
         setData(documents);
+        setIsLoading(false);
       },
       (err) => {
         setError(new UserNotification("error", "Error fetching data", err.message));
+        setIsLoading(false);
       },
     );
 
     // Cleanup subscription on unmount
     return () => unsubscribe();
   }, [documentTypeId]);
 
-  return {data, error};
+  return {data, error, isLoading};
 }
 
 interface UseTanamDocumentResult {
   data: TanamDocumentClient | null;
   changeStatus: (status: TanamPublishStatus) => Promise<void>;
   error: UserNotification | null;
+  isLoading: boolean;
 }
 
 /**
  * Hook to get a subscription for a single document
  *
  * @param {string?} documentId Document id
- * @return {UseTanamDocumentsResult} Hook for document subscription
+ * @return {UseTanamDocumentResult} Hook for document subscription
  */
 export function useTanamDocument(documentId?: string): UseTanamDocumentResult {
   const [data, setData] = useState<TanamDocumentClient | null>(null);
   const [error, setError] = useState<UserNotification | null>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
 
   useEffect(() => {
     if (!documentId) {
       setError(new UserNotification("error", "Missing parameter", "Document id parameter is missing"));
+      setIsLoading(false);
       return;
     }
     const docRef = doc(firestore, "tanam-documents", documentId);
     const unsubscribe = onSnapshot(
       docRef,
       (snapshot) => {
         setData(TanamDocumentClient.fromFirestore(snapshot));
+        setIsLoading(false);
       },
       (err) => {
         setError(new UserNotification("error", "Error fetching data", err.message));
+        setIsLoading(false);
       },
     );
 
@@ -109,7 +119,7 @@ export function useTanamDocument(documentId?: string): UseTanamDocumentResult {
     }
   }
 
-  return {data, changeStatus, error};
+  return {data, changeStatus, error, isLoading};
 }
 
 export function useCrudTanamDocument() {