From 61af38ce93fcaee4fbcb34805156d5f8f1624cdb Mon Sep 17 00:00:00 2001
From: Matt <mattskent@gmail.com>
Date: Sat, 21 Dec 2024 19:04:27 -0500
Subject: [PATCH] Fix loading state and skeleton layout

---
 .../src/components/dashboard/ProductGrid.jsx  | 119 +++++++++---------
 1 file changed, 60 insertions(+), 59 deletions(-)

diff --git a/dashboard/src/components/dashboard/ProductGrid.jsx b/dashboard/src/components/dashboard/ProductGrid.jsx
index 5721733..25321a2 100644
--- a/dashboard/src/components/dashboard/ProductGrid.jsx
+++ b/dashboard/src/components/dashboard/ProductGrid.jsx
@@ -92,71 +92,72 @@ const ProductGrid = ({
   );
 
   const SkeletonProduct = () => (
-    <TableRow>
-      <TableCell className="w-[50px] p-1">
+    <tr>
+      <td className="p-1 align-middle w-[50px]">
         <Skeleton className="h-[50px] w-[50px] rounded" />
-      </TableCell>
-      <TableCell className="min-w-[200px] px-0">
-        <div className="flex flex-col gap-2">
-          <Skeleton className="h-4 w-[200px]" />
-          <Skeleton className="h-4 w-[150px]" />
+      </td>
+      <td className="p-1 align-middle min-w-[200px]">
+        <div className="flex flex-col gap-1">
+          <Skeleton className="h-4 w-[180px]" />
+          <Skeleton className="h-3 w-[120px]" />
         </div>
-      </TableCell>
-      <TableCell className="text-center px-0">
+      </td>
+      <td className="p-1 align-middle text-center">
+        <Skeleton className="h-4 w-8 mx-auto" />
+      </td>
+      <td className="p-1 align-middle text-center">
+        <Skeleton className="h-4 w-16 mx-auto" />
+      </td>
+      <td className="p-1 align-middle text-center">
+        <Skeleton className="h-4 w-8 mx-auto" />
+      </td>
+      <td className="p-1 align-middle text-center hidden md:table-cell">
         <Skeleton className="h-4 w-12 mx-auto" />
-      </TableCell>
-      <TableCell className="text-center px-0">
-        <Skeleton className="h-4 w-20 mx-auto" />
-      </TableCell>
-      <TableCell className="text-center px-0">
-        <Skeleton className="h-4 w-16 mx-auto" />
-      </TableCell>
-      <TableCell className="text-center hidden md:table-cell px-0">
-        <Skeleton className="h-4 w-16 mx-auto" />
-      </TableCell>
-    </TableRow>
+      </td>
+    </tr>
   );
 
   const LoadingState = () => (
-    <div className="space-y-4">
-      <div className="flex items-center justify-between">
-        <div>
-          <Skeleton className="h-6 w-48 mb-2" />
-          <Skeleton className="h-4 w-64" />
-        </div>
-        <div className="flex items-center gap-4">
-          <Skeleton className="h-9 w-[180px]" />
-        </div>
+    <div className="rounded-md border h-full">
+      <div className="overflow-y-auto h-full">
+        <table className="w-full">
+          <thead>
+            <tr className="hover:bg-transparent">
+              <th className="p-1.5 text-left font-medium sticky top-0 bg-white dark:bg-background z-10 w-[50px] min-w-[50px] border-b" />
+              <th className="p-1.5 text-left font-medium sticky top-0 bg-white dark:bg-background z-10 min-w-[200px] border-b">
+                <div className="inline-flex items-center justify-start w-full px-2 py-1 text-sm font-medium">
+                  <Skeleton className="h-4 w-16" />
+                </div>
+              </th>
+              <th className="p-1.5 font-medium text-center sticky top-0 bg-white dark:bg-background z-10 border-b">
+                <div className="inline-flex items-center justify-center w-full px-2 py-1 text-sm font-medium">
+                  <Skeleton className="h-4 w-8" />
+                </div>
+              </th>
+              <th className="p-1.5 font-medium text-center sticky top-0 bg-white dark:bg-background z-10 border-b">
+                <div className="inline-flex items-center justify-center w-full px-2 py-1 text-sm font-medium">
+                  <Skeleton className="h-4 w-8" />
+                </div>
+              </th>
+              <th className="p-1.5 font-medium text-center sticky top-0 bg-white dark:bg-background z-10 border-b">
+                <div className="inline-flex items-center justify-center w-full px-2 py-1 text-sm font-medium">
+                  <Skeleton className="h-4 w-12" />
+                </div>
+              </th>
+              <th className="p-1.5 font-medium text-center sticky top-0 bg-white dark:bg-background z-10 hidden md:table-cell border-b">
+                <div className="inline-flex items-center justify-center w-full px-2 py-1 text-sm font-medium">
+                  <Skeleton className="h-4 w-10" />
+                </div>
+              </th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-gray-200 dark:divide-gray-800">
+            {[...Array(10)].map((_, i) => (
+              <SkeletonProduct key={i} />
+            ))}
+          </tbody>
+        </table>
       </div>
-      <Table>
-        <TableHeader>
-          <TableRow className="hover:bg-transparent">
-            <TableHead className="w-[50px] min-w-[50px]">
-              <Skeleton className="h-4 w-4" />
-            </TableHead>
-            <TableHead className="min-w-[200px]">
-              <Skeleton className="h-4 w-24" />
-            </TableHead>
-            <TableHead className="text-right">
-              <Skeleton className="h-4 w-16 ml-auto" />
-            </TableHead>
-            <TableHead className="text-right">
-              <Skeleton className="h-4 w-16 ml-auto" />
-            </TableHead>
-            <TableHead className="text-right">
-              <Skeleton className="h-4 w-16 ml-auto" />
-            </TableHead>
-            <TableHead className="text-right hidden md:table-cell">
-              <Skeleton className="h-4 w-16 ml-auto" />
-            </TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          {[...Array(10)].map((_, i) => (
-            <SkeletonProduct key={i} />
-          ))}
-        </TableBody>
-      </Table>
     </div>
   );
 
@@ -201,7 +202,7 @@ const ProductGrid = ({
 
       <CardContent className="p-6 pt-0 flex-1 overflow-hidden -mt-1">
         <div className="h-full">
-          {loading && !products.length ? (
+          {loading ? (
             <LoadingState />
           ) : error ? (
             <div className="flex flex-col items-center justify-center py-8 text-center">