bustikiller/wedding-planner-frontend
1
0
Fork 0
Code Issues 1 Pull Requests 8 Actions Packages Projects Releases Wiki Activity

Define skeletons for the guests table (not working yet)

Browse Source
This commit is contained in:
Manuel Bustillo 2024-08-18 18:09:09 +02:00
parent b7eb2838a0
commit 611b487db4
3 changed files with 18 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/ui/guests/skeleton-row.tsx Normal file
View File

@ -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>
);
}

7
app/ui/guests/table.tsx
View File

@ -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>

3
app/ui/skeleton.tsx Normal file
View File

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