fix: Improve Shopping cart skeleton

hackerspace-ntnu · Sep 26, 2024 · 4fe0e37 · 4fe0e37
1 parent e5045af
commit 4fe0e37
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 39 deletions.
diff --git a/src/app/[locale]/(default)/storage/shopping-cart/loading.tsx b/src/app/[locale]/(default)/storage/shopping-cart/loading.tsx
@@ -1,32 +1,18 @@
 import { ShoppingCartTableSkeleton } from '@/components/storage/ShoppingCartTableSkeleton';
 import { Skeleton } from '@/components/ui/Skeleton';
+import { useTranslations } from 'next-intl';
 
 export default function ShoppingCartSkeleton() {
+  const t = useTranslations('storage.shoppingCart');
   return (
     <>
       <div className='my-4'>
-        <Skeleton className='mx-auto h-14 w-1/2 rounded-full' />
+        <h1 className='mx-auto my-4 md:text-center'>{t('title')}</h1>
         <ShoppingCartTableSkeleton />
-        <div className='my-6 space-y-4'>
-          <Skeleton className='mx-auto h-8 w-[250px]' />
-          <Skeleton className='h-1 w-full' />
-          <div className='grid grid-cols-3 gap-2'>
-            <div className='space-y-1'>
-              <Skeleton className='h-6 w-[100px]' />
-              <Skeleton className='h-12 w-full' />
-            </div>
-            <div className='space-y-1'>
-              <Skeleton className='h-6 w-[100px]' />
-              <Skeleton className='h-12 w-full' />
-            </div>
-            <div className='space-y-1'>
-              <Skeleton className='h-6 w-[100px]' />
-              <Skeleton className='h-12 w-full' />
-            </div>
-          </div>
-          <Skeleton className='mx-auto h-10 w-[300px]' />
+        <div className='relative my-4'>
+          <Skeleton className='mx-auto block h-10 w-[100px]' />
+          <Skeleton className='-translate-y-1/2 absolute top-1/2 right-3 h-10 w-[225px]' />
         </div>
-        <Skeleton className='mx-auto h-10 w-[200px]' />
       </div>
     </>
   );

diff --git a/src/components/storage/ShoppingCartTable.tsx b/src/components/storage/ShoppingCartTable.tsx
@@ -5,7 +5,6 @@ import { Input } from '@/components/ui/Input';
 import {
   Table,
   TableBody,
-  TableCaption,
   TableCell,
   TableHead,
   TableHeader,
@@ -63,7 +62,6 @@ function ShoppingCartTable({ t }: ShoppingCartTableProps) {
 
   return (
     <Table className='my-4'>
-      <TableCaption>{t.tableDescription}</TableCaption>
       <TableHeader>
         <TableRow>
           <TableHead className='w-[80px]' />

diff --git a/src/components/storage/ShoppingCartTableSkeleton.tsx b/src/components/storage/ShoppingCartTableSkeleton.tsx
@@ -1,26 +1,57 @@
 import { Skeleton } from '@/components/ui/Skeleton';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/Table';
+import { useTranslations } from 'next-intl';
 import { useId } from 'react';
 
 function ShoppingCartTableSkeleton() {
+  const t = useTranslations('storage.shoppingCart');
   return (
     <>
-      <div className='mt-4 grid grid-cols-10 gap-2'>
-        <Skeleton className='col-span-1 h-5 w-[100px]' key={useId()} />
-        <Skeleton className='col-span-3 h-5 w-[150px]' key={useId()} />
-        <Skeleton className='col-span-4 h-5 w-[150px]' key={useId()} />
-        <Skeleton className='col-span-2 h-5 w-[150px]' key={useId()} />
-      </div>
-      {Array.from({ length: 4 }).map(() => {
-        return (
-          <div key={useId()} className='my-4 grid grid-cols-10 gap-2'>
-            <Skeleton className='col-span-1 h-10' />
-            <Skeleton className='col-span-3 h-10' />
-            <Skeleton className='col-span-4 h-10' />
-            <Skeleton className='col-span-2 h-10' />
-          </div>
-        );
-      })}
-      <Skeleton className='mx-auto mt-2 h-5 w-[200px]' />
+      <Table className='my-4'>
+        <TableHeader>
+          <TableRow>
+            <TableHead className='w-[80px]'>
+              <Skeleton />
+            </TableHead>
+            <TableHead className='w-[150px]'>{t('productId')}</TableHead>
+            <TableHead>{t('productName')}</TableHead>
+            <TableHead>{t('location')}</TableHead>
+            <TableHead className='text-right'>{t('unitsAvailable')}</TableHead>
+            <TableHead className='w-[80px]' />
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {Array.from({ length: 3 }).map(() => (
+            <TableRow key={useId()}>
+              <TableCell>
+                <Skeleton className='h-10 w-[80px]' />
+              </TableCell>
+              <TableCell>
+                <Skeleton className='h-4 w-[80px] rounded-lg' />
+              </TableCell>
+              <TableCell>
+                <Skeleton className='h-4 w-[80px] rounded-lg' />
+              </TableCell>
+              <TableCell>
+                <Skeleton className='h-4 w-[150px]' />
+              </TableCell>
+              <TableCell className='relative'>
+                <Skeleton className='ml-auto h-4 w-[30px]' />
+              </TableCell>
+              <TableCell>
+                <Skeleton className='h-8 w-8' />
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
     </>
   );
 }