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 = () => (
<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 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>
<div className="flex items-center gap-4">
<Skeleton className="h-9 w-[180px]" />
</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>
<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>
</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} />
))}
</TableBody>
</Table>
</tbody>
</table>
</div>
</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">