matt/dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix loading state and skeleton layout

Browse Source
This commit is contained in:
Matt
2024-12-21 19:04:27 -05:00
parent e4c35f2eb0
commit 61af38ce93
1 changed files with 60 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
dashboard/src/components/dashboard/ProductGrid.jsx
View File

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