From f368ff7b2c597e15f168529086d72d93d0e73035 Mon Sep 17 00:00:00 2001
From: ZeroWave022 <36341766+ZeroWave022@users.noreply.github.com>
Date: Fri, 13 Sep 2024 11:49:32 +0200
Subject: [PATCH] fix: Show loading skeleton when shopping cart table is
 loading

---
 .../(default)/storage/shopping-cart/page.tsx       |  6 +-----
 src/components/storage/ShoppingCartTable.tsx       | 14 ++++++++------
 2 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/app/[locale]/(default)/storage/shopping-cart/page.tsx b/src/app/[locale]/(default)/storage/shopping-cart/page.tsx
index d51eb165..f2f08d89 100644
--- 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
index ba22b686..8a556ede 100644
--- 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));