fix: Show loading skeleton when shopping cart table is loading

hackerspace-ntnu · Sep 13, 2024 · f368ff7 · f368ff7
1 parent 5cc0683
commit f368ff7
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 11 deletions.
diff --git a/src/app/[locale]/(default)/storage/shopping-cart/page.tsx b/src/app/[locale]/(default)/storage/shopping-cart/page.tsx
@@ -1,11 +1,9 @@
 import { ShoppingCartTable } from '@/components/storage/ShoppingCartTable';
-import ShoppingCartTableSkeleton from '@/components/storage/ShoppingCartTableSkeleton';
 import { Button } from '@/components/ui/Button';
 import { Link } from '@/lib/navigation';
 import { ArrowLeft } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { unstable_setRequestLocale } from 'next-intl/server';
-import { Suspense } from 'react';
 
 export default function StorageShoppingCartPage({
   params: { locale },
@@ -27,9 +25,7 @@ export default function StorageShoppingCartPage({
   return (
     <>
       <h1 className='my-4 md:text-center'>{t('title')}</h1>
-      <Suspense fallback={<ShoppingCartTableSkeleton />}>
-        <ShoppingCartTable messages={tableMessages} />
-      </Suspense>
+      <ShoppingCartTable messages={tableMessages} />
       <Link href='/storage'>
         <Button className='mx-auto flex gap-2'>
           <ArrowLeft />

diff --git a/src/components/storage/ShoppingCartTable.tsx b/src/components/storage/ShoppingCartTable.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import ShoppingCartTableSkeleton from '@/components/storage/ShoppingCartTableSkeleton';
 import {
   Table,
   TableBody,
@@ -9,10 +10,7 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/ui/Table';
-import { useLocalStorage } from 'usehooks-ts';
-
-// TODO: Must be replaced by the type provided from database ORM.
-import type { StorageItem } from '@/components/storage/AddToCartButton';
+import { useReadLocalStorage } from 'usehooks-ts';
 
 // TODO: Must be replaced by requesting the data from a database.
 import { items } from '@/mock-data/items';
@@ -28,8 +26,12 @@ type ShoppingCartTableProps = {
   };
 };
 
-async function ShoppingCartTable({ messages }: ShoppingCartTableProps) {
-  const [cart] = useLocalStorage<number[]>('shopping-cart', []);
+function ShoppingCartTable({ messages }: ShoppingCartTableProps) {
+  const cart = useReadLocalStorage<number[]>('shopping-cart', {
+    initializeWithValue: false,
+  });
+
+  if (!cart) return <ShoppingCartTableSkeleton />;
 
   const itemsInCart = items.filter((item) => cart.includes(item.id));