Define skeletons for the guests table (not working yet)

app/ui/guests/skeleton-row.tsx

@@ -0,0 +1,12 @@
+import Skeleton from '@/app/ui/skeleton';
+
+export default 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>
+            <td className="px-6 py-4">{<Skeleton className="w-[45ch] h-[1rem]" />}</td>
+            <td className="px-6 py-4">{<Skeleton className="w-[20ch] h-[1rem]" />}</td>
+            <td className="px-6 py-4">{<Skeleton className="w-[10ch] h-[1rem]" />}</td>
+        </tr>
+    );
+}

app/ui/guests/table.tsx

@@ -1,6 +1,6 @@
-
 import { Guest } from '@/app/lib/definitions';
-import { useState, Suspense, useEffect } from 'react';
+import SkeletonRow from './skeleton-row';
+import { Suspense } from 'react';
 import clsx from 'clsx';
 
 export default async function guestsTable() {
@@ -45,7 +45,7 @@ export default async function guestsTable() {
           </tr>
         </thead>
         <tbody>
-          <Suspense fallback="<tr><td colspan=4> Loading content</td></tr>">
+          <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">
@@ -68,7 +68,6 @@ export default async function guestsTable() {
                         'bg-red-400': guest.status === 'Declined',
                       }
                     )}>
-                      {/* <span className="flex w-2.5 h-2.5 rounded-full me-1.5 flex-shrink-0 bg-blue-600"> */}
                     </span>
                     {guest.status}
                   </span>

app/ui/skeleton.tsx

@@ -0,0 +1,3 @@
+export default function Skeleton({ className }: { className: string }) {
+    return <div className={`bg-slate-200 motion-safe:animate-pulse rounded ${className}`} />;
+}