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

Merge pull request 'Display a table skeleton while the list of guests is loading' (#29 ) from skeleton into main
Reviewed-on: #29
2024-08-18 21:30:23 +00:00 · 2024-08-18 20:02:45 +00:00 · 2024-08-18 20:01:17 +02:00 · 2024-08-18 19:18:00 +02:00 · 2024-08-18 18:41:44 +02:00 · 2024-08-18 18:09:09 +02:00
6 changed files with 124 additions and 88 deletions
--- a/app/dashboard/guests/page.tsx
+++ b/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';



@ -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>
  );
--- a/app/ui/guests/skeleton-row.tsx
+++ b/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>
+
+    );
+}
+
--- a/app/ui/guests/table.tsx
+++ b/app/ui/guests/table.tsx
@ -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>
--- a/app/ui/skeleton.tsx
+++ b/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}`} />;
+}
--- a/package.json
+++ b/package.json
@ -17,7 +17,7 @@
    "postcss": "8.4.41",
    "primeicons": "^7.0.0",
    "primereact": "^10.8.2",
-    "react": "19.0.0-rc-f38c22b244-20240704",
+    "react": "19.0.0-rc-fb9a90fa48-20240614",
    "react-dom": "19.0.0-rc-f38c22b244-20240704",
    "tailwindcss": "3.4.10",
    "typescript": "5.5.4",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -10,7 +10,7 @@ importers:
    dependencies:
      '@heroicons/react':
        specifier: ^2.1.4
-        version: 2.1.5(react@19.0.0-rc-f38c22b244-20240704)
+        version: 2.1.5(react@19.0.0-rc-fb9a90fa48-20240614)
      '@tailwindcss/forms':
        specifier: ^0.5.7
        version: 0.5.7(tailwindcss@3.4.10)
@ -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-f38c22b244-20240704(react@19.0.0-rc-fb9a90fa48-20240614))(react@19.0.0-rc-fb9a90fa48-20240614)
      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-f38c22b244-20240704(react@19.0.0-rc-fb9a90fa48-20240614))(react@19.0.0-rc-fb9a90fa48-20240614))(react@19.0.0-rc-fb9a90fa48-20240614)
      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-f38c22b244-20240704(react@19.0.0-rc-fb9a90fa48-20240614))(react@19.0.0-rc-fb9a90fa48-20240614)
      react:
-        specifier: 19.0.0-rc-f38c22b244-20240704
-        version: 19.0.0-rc-f38c22b244-20240704
+        specifier: 19.0.0-rc-fb9a90fa48-20240614
+        version: 19.0.0-rc-fb9a90fa48-20240614
      react-dom:
        specifier: 19.0.0-rc-f38c22b244-20240704
-        version: 19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704)
+        version: 19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-fb9a90fa48-20240614)
      tailwindcss:
        specifier: 3.4.10
        version: 3.4.10
@ -55,7 +55,7 @@ importers:
        version: 5.5.4
      use-debounce:
        specifier: ^10.0.1
-        version: 10.0.3(react@19.0.0-rc-f38c22b244-20240704)
+        version: 10.0.3(react@19.0.0-rc-fb9a90fa48-20240614)
      zod:
        specifier: ^3.23.8
        version: 3.23.8
@ -1008,8 +1008,8 @@ packages:
      react: '>=16.6.0'
      react-dom: '>=16.6.0'

-  react@19.0.0-rc-f38c22b244-20240704:
-    resolution: {integrity: sha512-OP8O6Oc1rdR9IdIKJRKaL1PYd4eGkn6f88VqiygWyyG4P4RmPPix5pp7MatqSt9TnBOcVT+lBMGoVxRgUFeudQ==}
+  react@19.0.0-rc-fb9a90fa48-20240614:
+    resolution: {integrity: sha512-nvE3Gy+IOIfH/DXhkyxFVQSrITarFcQz4+shzC/McxQXEUSonpw2oDy/Wi9hdDtV3hlP12VYuDL95iiBREedNQ==}
    engines: {node: '>=0.10.0'}

  read-cache@1.0.0:
@ -1258,9 +1258,9 @@ snapshots:
      tslib: 2.6.3
    optional: true

-  '@heroicons/react@2.1.5(react@19.0.0-rc-f38c22b244-20240704)':
+  '@heroicons/react@2.1.5(react@19.0.0-rc-fb9a90fa48-20240614)':
    dependencies:
-      react: 19.0.0-rc-f38c22b244-20240704
+      react: 19.0.0-rc-fb9a90fa48-20240614

  '@img/sharp-darwin-arm64@0.33.4':
    optionalDependencies:
@ -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-f38c22b244-20240704(react@19.0.0-rc-fb9a90fa48-20240614))(react@19.0.0-rc-fb9a90fa48-20240614))(react@19.0.0-rc-fb9a90fa48-20240614):
    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)
-      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-fb9a90fa48-20240614))(react@19.0.0-rc-fb9a90fa48-20240614)
+      react: 19.0.0-rc-fb9a90fa48-20240614

-  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-f38c22b244-20240704(react@19.0.0-rc-fb9a90fa48-20240614))(react@19.0.0-rc-fb9a90fa48-20240614):
    dependencies:
      '@next/env': 15.0.0-rc.0
      '@swc/helpers': 0.5.11
@ -1853,9 +1853,9 @@ snapshots:
      caniuse-lite: 1.0.30001651
      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)
-      styled-jsx: 5.1.3(react@19.0.0-rc-f38c22b244-20240704)
+      react: 19.0.0-rc-fb9a90fa48-20240614
+      react-dom: 19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-fb9a90fa48-20240614)
+      styled-jsx: 5.1.3(react@19.0.0-rc-fb9a90fa48-20240614)
    optionalDependencies:
      '@next/swc-darwin-arm64': 15.0.0-rc.0
      '@next/swc-darwin-x64': 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-f38c22b244-20240704(react@19.0.0-rc-fb9a90fa48-20240614))(react@19.0.0-rc-fb9a90fa48-20240614):
    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: 19.0.0-rc-fb9a90fa48-20240614
+      react-dom: 19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-fb9a90fa48-20240614)
+      react-transition-group: 4.4.5(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-fb9a90fa48-20240614))(react@19.0.0-rc-fb9a90fa48-20240614)
    optionalDependencies:
      '@types/react': 18.3.3

@ -2035,23 +2035,23 @@ 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-f38c22b244-20240704(react@19.0.0-rc-fb9a90fa48-20240614):
    dependencies:
-      react: 19.0.0-rc-f38c22b244-20240704
+      react: 19.0.0-rc-fb9a90fa48-20240614
      scheduler: 0.25.0-rc-f38c22b244-20240704

  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-f38c22b244-20240704(react@19.0.0-rc-fb9a90fa48-20240614))(react@19.0.0-rc-fb9a90fa48-20240614):
    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: 19.0.0-rc-fb9a90fa48-20240614
+      react-dom: 19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-fb9a90fa48-20240614)

-  react@19.0.0-rc-f38c22b244-20240704: {}
+  react@19.0.0-rc-fb9a90fa48-20240614: {}

  read-cache@1.0.0:
    dependencies:
@ -2165,10 +2165,10 @@ snapshots:
    dependencies:
      ansi-regex: 6.0.1

-  styled-jsx@5.1.3(react@19.0.0-rc-f38c22b244-20240704):
+  styled-jsx@5.1.3(react@19.0.0-rc-fb9a90fa48-20240614):
    dependencies:
      client-only: 0.0.1
-      react: 19.0.0-rc-f38c22b244-20240704
+      react: 19.0.0-rc-fb9a90fa48-20240614

  sucrase@3.35.0:
    dependencies:
@ -2246,9 +2246,9 @@ snapshots:
      escalade: 3.1.2
      picocolors: 1.0.1

-  use-debounce@10.0.3(react@19.0.0-rc-f38c22b244-20240704):
+  use-debounce@10.0.3(react@19.0.0-rc-fb9a90fa48-20240614):
    dependencies:
-      react: 19.0.0-rc-f38c22b244-20240704
+      react: 19.0.0-rc-fb9a90fa48-20240614

  utf-8-validate@6.0.4:
    dependencies:
Author	SHA1	Message	Date
Renovate Bot	22ed11d8e9	Update dependency react to v19.0.0-rc-fb9a90fa48-20240614 Some checks failed Playwright Tests / test (pull_request) Failing after 48s Details Build docker image / build-static-assets (pull_request) Failing after 3m22s Details	2024-08-18 21:30:23 +00:00
bustikiller	138813b674	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 Reviewed-on: #29	2024-08-18 20:02:45 +00:00
Manuel Bustillo	61df349cee	Capture error in case the connection is not OK All checks were successful Playwright Tests / test (pull_request) Successful in 2m20s Details Build docker image / build-static-assets (pull_request) Successful in 3m56s Details	2024-08-18 20:01:17 +02:00
Manuel Bustillo	628ddc8eb2	Define table as a client component Some checks failed Playwright Tests / test (pull_request) Failing after 1m58s Details Build docker image / build-static-assets (pull_request) Failing after 5m22s Details	2024-08-18 19:18:00 +02:00
Manuel Bustillo	4022928f1c	Display a skeleton while guests information is loading Some checks failed Playwright Tests / test (pull_request) Failing after 1m12s Details Build docker image / build-static-assets (pull_request) Failing after 4m27s Details	2024-08-18 18:41:44 +02:00
Manuel Bustillo	611b487db4	Define skeletons for the guests table (not working yet)	2024-08-18 18:09:09 +02:00
Manuel Bustillo	b7eb2838a0	Render table of guests as a server component	2024-08-18 17:46:37 +02:00