Display a skeleton while guests information is loading

app/dashboard/guests/page.tsx

@@ -1,8 +1,8 @@
 import { lusitana } from '@/app/ui/fonts';
 import AffinityGroupsTree from '@/app/ui/guests/affinity-groups-tree';
 import GuestsTable from '@/app/ui/guests/table';
-import { Tree } from 'primereact/tree';
+import React, { Suspense } from 'react';
-import React, { useState, useEffect } from 'react';
+import SkeletonTable from '@/app/ui/guests/skeleton-row';
 
 
 
@@ -13,7 +13,9 @@ export default function Page() {
 
       <h1 className={`${lusitana.className} text-2xl py-4`}>Guests</h1>
       <div className="flex w-full items-center justify-between">
+        <Suspense fallback={<SkeletonTable />}>
           <GuestsTable />
+        </Suspense>
       </div>
     </div>
   );

app/ui/guests/skeleton-row.tsx

@@ -1,6 +1,6 @@
 import Skeleton from '@/app/ui/skeleton';
 
-export default function SkeletonRow() {
+export function SkeletonRow() {
     return (
         <tr className="bg-white border-b odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800">
             <td className="px-6 py-4">{<Skeleton className="w-[45ch] h-[1rem]" />}</td>
@@ -10,3 +10,25 @@ export default function SkeletonRow() {
         </tr>
     );
 }
+
+export default function SkeletonTable() {
+    return (
+        <div className="w-full relative overflow-x-auto shadow-md sm:rounded-lg">
+            <table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
+                <caption className="p-5 text-lg font-semibold text-left rtl:text-right text-gray-900 bg-white dark:text-white dark:bg-gray-800">
+                    Guests
+                    <p className="mt-1 text-sm font-normal text-gray-500 dark:text-gray-400">
+                        Loading the list of guests...
+                    </p>
+                </caption>
+                <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
+                </thead>
+                <tbody>
+                    {[...Array(20)].map((e, i) => <SkeletonRow />)}
+                </tbody>
+            </table>
+        </div>
+
+    );
+}
+

app/ui/guests/table.tsx

@@ -3,6 +3,10 @@ import SkeletonRow from './skeleton-row';
 import { Suspense } from 'react';
 import clsx from 'clsx';
 
+export function TableHeader() {
+  
+}
+
 export default async function guestsTable() {
 
   let guests: Guest[] = await fetch("http://localhost:3001/guests.json")
@@ -45,7 +49,6 @@ export default async function guestsTable() {
           </tr>
         </thead>
         <tbody>
-          <Suspense fallback={[...Array(20)].map((e, i) => <SkeletonRow />)}>
           {guests.map((guest) => (
             <tr key={guest.id} className="bg-white border-b odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800">
               <th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
@@ -74,7 +77,6 @@ export default async function guestsTable() {
               </td>
             </tr>
           ))}
-          </Suspense>
         </tbody>
       </table>
     </div>