From c31a12c0fb8ec5f8f6efd2b81ce65ade1058ceb7 Mon Sep 17 00:00:00 2001
From: Patrick Arminio <patrick.arminio@gmail.com>
Date: Mon, 15 Apr 2024 22:03:39 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Use=20suspense=20for=20items=20page?=
 =?UTF-8?q?=20(#1167)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/package-lock.json            |  20 ++++
 frontend/package.json                 |   1 +
 frontend/src/routes/_layout/items.tsx | 139 ++++++++++++++------------
 3 files changed, 98 insertions(+), 62 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index a071cc3..7c15566 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -20,6 +20,7 @@
         "framer-motion": "10.16.16",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-error-boundary": "^4.0.13",
         "react-hook-form": "7.49.3",
         "react-icons": "5.0.1"
       },
@@ -3409,6 +3410,17 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-error-boundary": {
+      "version": "4.0.13",
+      "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-4.0.13.tgz",
+      "integrity": "sha512-b6PwbdSv8XeOSYvjt8LpgpKrZ0yGdtZokYwkwV2wlcZbxgopHX/hgPl5VgpnoVOWd868n1hktM8Qm4b+02MiLQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5"
+      },
+      "peerDependencies": {
+        "react": ">=16.13.1"
+      }
+    },
     "node_modules/react-fast-compare": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
@@ -6108,6 +6120,14 @@
         "scheduler": "^0.23.0"
       }
     },
+    "react-error-boundary": {
+      "version": "4.0.13",
+      "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-4.0.13.tgz",
+      "integrity": "sha512-b6PwbdSv8XeOSYvjt8LpgpKrZ0yGdtZokYwkwV2wlcZbxgopHX/hgPl5VgpnoVOWd868n1hktM8Qm4b+02MiLQ==",
+      "requires": {
+        "@babel/runtime": "^7.12.5"
+      }
+    },
     "react-fast-compare": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index f8fdaa1..55d6e79 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -23,6 +23,7 @@
     "framer-motion": "10.16.16",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-error-boundary": "^4.0.13",
     "react-hook-form": "7.49.3",
     "react-icons": "5.0.1"
   },
diff --git a/frontend/src/routes/_layout/items.tsx b/frontend/src/routes/_layout/items.tsx
index 165e9e5..1f53d27 100644
--- a/frontend/src/routes/_layout/items.tsx
+++ b/frontend/src/routes/_layout/items.tsx
@@ -2,7 +2,7 @@ import {
   Container,
   Flex,
   Heading,
-  Spinner,
+  Skeleton,
   Table,
   TableContainer,
   Tbody,
@@ -11,82 +11,97 @@ import {
   Thead,
   Tr,
 } from "@chakra-ui/react"
-import { useQuery } from "@tanstack/react-query"
+import { useSuspenseQuery } from "@tanstack/react-query"
 import { createFileRoute } from "@tanstack/react-router"
 
+import { Suspense } from "react"
+import { ErrorBoundary } from "react-error-boundary"
 import { ItemsService } from "../../client"
 import ActionsMenu from "../../components/Common/ActionsMenu"
 import Navbar from "../../components/Common/Navbar"
-import useCustomToast from "../../hooks/useCustomToast"
 
 export const Route = createFileRoute("/_layout/items")({
   component: Items,
 })
 
-function Items() {
-  const showToast = useCustomToast()
-  const {
-    data: items,
-    isLoading,
-    isError,
-    error,
-  } = useQuery({
+function ItemsTableBody() {
+  const { data: items } = useSuspenseQuery({
     queryKey: ["items"],
     queryFn: () => ItemsService.readItems({}),
   })
 
-  if (isError) {
-    const errDetail = (error as any).body?.detail
-    showToast("Something went wrong.", `${errDetail}`, "error")
-  }
-
   return (
-    <>
-      {isLoading ? (
-        // TODO: Add skeleton
-        <Flex justify="center" align="center" height="100vh" width="full">
-          <Spinner size="xl" color="ui.main" />
-        </Flex>
-      ) : (
-        items && (
-          <Container maxW="full">
-            <Heading
-              size="lg"
-              textAlign={{ base: "center", md: "left" }}
-              pt={12}
-            >
-              Items Management
-            </Heading>
-            <Navbar type={"Item"} />
-            <TableContainer>
-              <Table size={{ base: "sm", md: "md" }}>
-                <Thead>
-                  <Tr>
-                    <Th>ID</Th>
-                    <Th>Title</Th>
-                    <Th>Description</Th>
-                    <Th>Actions</Th>
-                  </Tr>
-                </Thead>
-                <Tbody>
-                  {items.data.map((item) => (
-                    <Tr key={item.id}>
-                      <Td>{item.id}</Td>
-                      <Td>{item.title}</Td>
-                      <Td color={!item.description ? "ui.dim" : "inherit"}>
-                        {item.description || "N/A"}
-                      </Td>
-                      <Td>
-                        <ActionsMenu type={"Item"} value={item} />
+    <Tbody>
+      {items.data.map((item) => (
+        <Tr key={item.id}>
+          <Td>{item.id}</Td>
+          <Td>{item.title}</Td>
+          <Td color={!item.description ? "ui.dim" : "inherit"}>
+            {item.description || "N/A"}
+          </Td>
+          <Td>
+            <ActionsMenu type={"Item"} value={item} />
+          </Td>
+        </Tr>
+      ))}
+    </Tbody>
+  )
+}
+function ItemsTable() {
+  return (
+    <TableContainer>
+      <Table size={{ base: "sm", md: "md" }}>
+        <Thead>
+          <Tr>
+            <Th>ID</Th>
+            <Th>Title</Th>
+            <Th>Description</Th>
+            <Th>Actions</Th>
+          </Tr>
+        </Thead>
+        <ErrorBoundary
+          fallbackRender={({ error }) => (
+            <Tbody>
+              <Tr>
+                <Td colSpan={4}>Something went wrong: {error.message}</Td>
+              </Tr>
+            </Tbody>
+          )}
+        >
+          <Suspense
+            fallback={
+              <Tbody>
+                {new Array(5).fill(null).map((_, index) => (
+                  <Tr key={index}>
+                    {new Array(4).fill(null).map((_, index) => (
+                      <Td key={index}>
+                        <Flex>
+                          <Skeleton height="20px" width="20px" />
+                        </Flex>
                       </Td>
-                    </Tr>
-                  ))}
-                </Tbody>
-              </Table>
-            </TableContainer>
-          </Container>
-        )
-      )}
-    </>
+                    ))}
+                  </Tr>
+                ))}
+              </Tbody>
+            }
+          >
+            <ItemsTableBody />
+          </Suspense>
+        </ErrorBoundary>
+      </Table>
+    </TableContainer>
+  )
+}
+
+function Items() {
+  return (
+    <Container maxW="full">
+      <Heading size="lg" textAlign={{ base: "center", md: "left" }} pt={12}>
+        Items Management
+      </Heading>
+
+      <Navbar type={"Item"} />
+      <ItemsTable />
+    </Container>
   )
 }