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

Merge pull request 'Display a table skeleton while the list of guests is loading' (#29) from skeleton into main
Some checks failed
Build docker image / build-static-assets (push) Failing after 1m15s
Details
Playwright Tests / test (push) Successful in 3m11s
Details

Browse Source 
Reviewed-on: #29
This commit is contained in:
bustikiller 2024-08-18 20:02:45 +00:00
commit 138813b674
4 changed files with 90 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/dashboard/guests/page.tsx
View File

@ -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, { useState, useEffect } from 'react';
import React, { Suspense } from 'react';
import SkeletonTable from '@/app/ui/guests/skeleton-row';
@ -10,10 +10,12 @@ export default function Page() {
return (
<div className="w-full">
<AffinityGroupsTree />
<h1 className={`${lusitana.className} text-2xl py-4`}>Guests</h1>
<div className="flex w-full items-center justify-between">
<GuestsTable />
<Suspense fallback={<SkeletonTable />}>
<GuestsTable />
</Suspense>
</div>
</div>
);

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

@ -0,0 +1,34 @@
import Skeleton from '@/app/ui/skeleton';
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>
<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>
);
}
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>
);
}

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

@ -1,31 +1,31 @@
'use client'
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 function guestsTable() {
export function TableHeader() {
}
const [guests, setGuests] = useState<Guest[]>([]);
export default async function guestsTable() {
useEffect(() => {
if (guests.length > 0) {
return;
}
fetch("http://localhost:3001/guests.json")
.then((response) => response.json())
.then((data) => {
setGuests(data.data.map((record: any) => {
return ({
id: record.id,
name: record.attributes.name,
email: record.attributes.email,
group_name: record.attributes.group_name,
status: record.attributes.status
});
}))
let guests: Guest[] = await fetch("http://localhost:3001/guests.json")
.then((response) => response.json())
.then((data) => {
return data.data.map((record: any) => {
return ({
id: record.id,
name: record.attributes.name,
email: record.attributes.email,
group_name: record.attributes.group_name,
status: record.attributes.status
});
});
});
}, (error) => {
return [];
});
return (
<div className="w-full relative overflow-x-auto shadow-md sm:rounded-lg">
@ -53,37 +53,34 @@ export default function guestsTable() {
</tr>
</thead>
<tbody>
<Suspense>
{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">
{guest.name}
</th>
<td className="px-6 py-4">
{guest.email}
</td>
<td className="px-6 py-4">
{guest.group_name}
</td>
<td className="px-6 py-4">
<span className="flex items-center text-sm dark:text-white me-3">
<span className={clsx(
'flex w-2.5 h-2.5 rounded-full me-1.5 flex-shrink-0',
{
'bg-gray-400': guest.status === 'Considered',
'bg-blue-400': guest.status === 'Invited',
'bg-green-600': guest.status === 'Confirmed',
'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}
{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">
{guest.name}
</th>
<td className="px-6 py-4">
{guest.email}
</td>
<td className="px-6 py-4">
{guest.group_name}
</td>
<td className="px-6 py-4">
<span className="flex items-center text-sm dark:text-white me-3">
<span className={clsx(
'flex w-2.5 h-2.5 rounded-full me-1.5 flex-shrink-0',
{
'bg-gray-400': guest.status === 'Considered',
'bg-blue-400': guest.status === 'Invited',
'bg-green-600': guest.status === 'Confirmed',
'bg-red-400': guest.status === 'Declined',
}
)}>
</span>
</td>
</tr>
))}
</Suspense>
{guest.status}
</span>
</td>
</tr>
))}
</tbody>
</table>
</div>

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}`} />;
}