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

Display a table skeleton while the list of guests is loading #29

Merged
bustikiller merged 5 commits from skeleton into main 2024-08-18 20:02:46 +00:00
Conversation 0 Commits 5 Files Changed 4 +14 -22
1 changed files with 14 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit b7eb2838a0 - Show all commits

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

@ -1,21 +1,14 @@
'use client'
import { Guest } from '@/app/lib/definitions'; import { Guest } from '@/app/lib/definitions';
import { useState, Suspense, useEffect } from 'react'; import { useState, Suspense, useEffect } from 'react';
import clsx from 'clsx'; import clsx from 'clsx';
export default function guestsTable() { export default async function guestsTable() {
const [guests, setGuests] = useState<Guest[]>([]); let guests: Guest[] = await fetch("http://localhost:3001/guests.json")
useEffect(() => {
if (guests.length > 0) {
return;
}
fetch("http://localhost:3001/guests.json")
.then((response) => response.json()) .then((response) => response.json())
.then((data) => { .then((data) => {
setGuests(data.data.map((record: any) => { return data.data.map((record: any) => {
return ({ return ({
id: record.id, id: record.id,
name: record.attributes.name, name: record.attributes.name,
@ -23,7 +16,6 @@ export default function guestsTable() {
group_name: record.attributes.group_name, group_name: record.attributes.group_name,
status: record.attributes.status status: record.attributes.status
}); });
}))
}); });
}); });
@ -53,7 +45,7 @@ export default function guestsTable() {
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<Suspense> <Suspense fallback="<tr><td colspan=4> Loading content</td></tr>">
{guests.map((guest) => ( {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"> <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"> <th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">