Update dependency react-dom to v19.0.0-rc-fb9a90fa48-20240614

Reviewed-on: #29

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, { useState, useEffect } from 'react';
+import React, { Suspense } 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

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

app/ui/guests/table.tsx

@@ -1,21 +1,20 @@
 '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[]>([]);
-
-  useEffect(() => {
-    if (guests.length > 0) {
-      return;
 }
-    fetch("http://localhost:3001/guests.json")
+
+export default async function guestsTable() {
+
+  let guests: Guest[] = await fetch("http://localhost:3001/guests.json")
     .then((response) => response.json())
     .then((data) => {
-        setGuests(data.data.map((record: any) => {
+      return data.data.map((record: any) => {
         return ({
           id: record.id,
           name: record.attributes.name,
@@ -23,8 +22,9 @@ export default function guestsTable() {
           group_name: record.attributes.group_name,
           status: record.attributes.status
         });
-        }))
       });
+    }, (error) => {
+      return [];
     });
 
   return (
@@ -53,7 +53,6 @@ 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">
@@ -76,14 +75,12 @@ export default 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>
               </td>
             </tr>
           ))}
-          </Suspense>
         </tbody>
       </table>
     </div>

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

package.json

@@ -18,7 +18,7 @@
     "primeicons": "^7.0.0",
     "primereact": "^10.8.2",
     "react": "19.0.0-rc-f38c22b244-20240704",
-    "react-dom": "19.0.0-rc-f38c22b244-20240704",
+    "react-dom": "19.0.0-rc-fb9a90fa48-20240614",
     "tailwindcss": "3.4.10",
     "typescript": "5.5.4",
     "use-debounce": "^10.0.1",

pnpm-lock.yaml

@@ -28,10 +28,10 @@ importers:
         version: 2.1.1
       next:
         specifier: 15.0.0-rc.0
-        version: 15.0.0-rc.0(@playwright/test@1.46.1)(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704)
+        version: 15.0.0-rc.0(@playwright/test@1.46.1)(react-dom@19.0.0-rc-fb9a90fa48-20240614(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704)
       next-auth:
         specifier: 5.0.0-beta.20
-        version: 5.0.0-beta.20(next@15.0.0-rc.0(@playwright/test@1.46.1)(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704)
+        version: 5.0.0-beta.20(next@15.0.0-rc.0(@playwright/test@1.46.1)(react-dom@19.0.0-rc-fb9a90fa48-20240614(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704)
       postcss:
         specifier: 8.4.41
         version: 8.4.41
@@ -40,13 +40,13 @@ importers:
         version: 7.0.0
       primereact:
         specifier: ^10.8.2
-        version: 10.8.2(@types/react@18.3.3)(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704)
+        version: 10.8.2(@types/react@18.3.3)(react-dom@19.0.0-rc-fb9a90fa48-20240614(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704)
       react:
         specifier: 19.0.0-rc-f38c22b244-20240704
         version: 19.0.0-rc-f38c22b244-20240704
       react-dom:
-        specifier: 19.0.0-rc-f38c22b244-20240704
-        version: 19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704)
+        specifier: 19.0.0-rc-fb9a90fa48-20240614
+        version: 19.0.0-rc-fb9a90fa48-20240614(react@19.0.0-rc-f38c22b244-20240704)
       tailwindcss:
         specifier: 3.4.10
         version: 3.4.10
@@ -994,10 +994,10 @@ packages:
   queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
-  react-dom@19.0.0-rc-f38c22b244-20240704:
-    resolution: {integrity: sha512-g89q2pf3irdpKFUMgCQgtxgqo3TSV1k1J6Sc8God4FwfxuNmAOOthkijENe5XZe6VeV1tor9DPzpjdTD9EyvNw==}
+  react-dom@19.0.0-rc-fb9a90fa48-20240614:
+    resolution: {integrity: sha512-PoEsPe32F7KPLYOBvZfjylEI1B67N44PwY3lyvpmBkhlluLnLz0jH8q2Wg9YidAi6z0k3iUnNRm5x10wurzt9Q==}
     peerDependencies:
-      react: 19.0.0-rc-f38c22b244-20240704
+      react: 19.0.0-rc-fb9a90fa48-20240614
 
   react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
@@ -1045,8 +1045,8 @@ packages:
   safe-buffer@5.2.1:
     resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
 
-  scheduler@0.25.0-rc-f38c22b244-20240704:
-    resolution: {integrity: sha512-uAELK9fHhvg7kDQhk29+uO8FUMWUpkg9WpzkNXFP+BJy5HEtqnajde3CxuSgh202WH9TqoaiWT1mdA3DvUu6cQ==}
+  scheduler@0.25.0-rc-fb9a90fa48-20240614:
+    resolution: {integrity: sha512-HHqQ/SqbeiDfXXVKgNxTpbQTD4n7IUb4hZATvHjp03jr3TF7igehCyHdOjeYTrzIseLO93cTTfSb5f4qWcirMQ==}
 
   semver@6.3.1:
     resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
@@ -1839,13 +1839,13 @@ snapshots:
 
   nanoid@3.3.7: {}
 
-  next-auth@5.0.0-beta.20(next@15.0.0-rc.0(@playwright/test@1.46.1)(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704):
+  next-auth@5.0.0-beta.20(next@15.0.0-rc.0(@playwright/test@1.46.1)(react-dom@19.0.0-rc-fb9a90fa48-20240614(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704):
     dependencies:
       '@auth/core': 0.34.2
-      next: 15.0.0-rc.0(@playwright/test@1.46.1)(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704)
+      next: 15.0.0-rc.0(@playwright/test@1.46.1)(react-dom@19.0.0-rc-fb9a90fa48-20240614(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704)
       react: 19.0.0-rc-f38c22b244-20240704
 
-  next@15.0.0-rc.0(@playwright/test@1.46.1)(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704):
+  next@15.0.0-rc.0(@playwright/test@1.46.1)(react-dom@19.0.0-rc-fb9a90fa48-20240614(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704):
     dependencies:
       '@next/env': 15.0.0-rc.0
       '@swc/helpers': 0.5.11
@@ -1854,7 +1854,7 @@ snapshots:
       graceful-fs: 4.2.11
       postcss: 8.4.31
       react: 19.0.0-rc-f38c22b244-20240704
-      react-dom: 19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704)
+      react-dom: 19.0.0-rc-fb9a90fa48-20240614(react@19.0.0-rc-f38c22b244-20240704)
       styled-jsx: 5.1.3(react@19.0.0-rc-f38c22b244-20240704)
     optionalDependencies:
       '@next/swc-darwin-arm64': 15.0.0-rc.0
@@ -2018,12 +2018,12 @@ snapshots:
 
   primeicons@7.0.0: {}
 
-  primereact@10.8.2(@types/react@18.3.3)(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704):
+  primereact@10.8.2(@types/react@18.3.3)(react-dom@19.0.0-rc-fb9a90fa48-20240614(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704):
     dependencies:
       '@types/react-transition-group': 4.4.11
       react: 19.0.0-rc-f38c22b244-20240704
-      react-dom: 19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704)
-      react-transition-group: 4.4.5(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704)
+      react-dom: 19.0.0-rc-fb9a90fa48-20240614(react@19.0.0-rc-f38c22b244-20240704)
+      react-transition-group: 4.4.5(react-dom@19.0.0-rc-fb9a90fa48-20240614(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704)
     optionalDependencies:
       '@types/react': 18.3.3
 
@@ -2035,21 +2035,21 @@ snapshots:
 
   queue-microtask@1.2.3: {}
 
-  react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704):
+  react-dom@19.0.0-rc-fb9a90fa48-20240614(react@19.0.0-rc-f38c22b244-20240704):
     dependencies:
       react: 19.0.0-rc-f38c22b244-20240704
-      scheduler: 0.25.0-rc-f38c22b244-20240704
+      scheduler: 0.25.0-rc-fb9a90fa48-20240614
 
   react-is@16.13.1: {}
 
-  react-transition-group@4.4.5(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704):
+  react-transition-group@4.4.5(react-dom@19.0.0-rc-fb9a90fa48-20240614(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704):
     dependencies:
       '@babel/runtime': 7.25.0
       dom-helpers: 5.2.1
       loose-envify: 1.4.0
       prop-types: 15.8.1
       react: 19.0.0-rc-f38c22b244-20240704
-      react-dom: 19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704)
+      react-dom: 19.0.0-rc-fb9a90fa48-20240614(react@19.0.0-rc-f38c22b244-20240704)
 
   react@19.0.0-rc-f38c22b244-20240704: {}
 
@@ -2087,7 +2087,7 @@ snapshots:
 
   safe-buffer@5.2.1: {}
 
-  scheduler@0.25.0-rc-f38c22b244-20240704: {}
+  scheduler@0.25.0-rc-fb9a90fa48-20240614: {}
 
   semver@6.3.1: {}