openstatus.dev
Openstatus
www.openstatus.dev
1import { Skeleton } from "@/components/ui/skeleton";
2import {
3 Table,
4 TableBody,
5 TableCell,
6 TableHead,
7 TableHeader,
8 TableRow,
9} from "@/components/ui/table";
10
11interface DataTableSkeletonProps {
12 /**
13 * Number of rows to render
14 * @default 10
15 */
16 rows?: number;
17}
18
19// TODO: add checkbox skeleton (for MonitorTable e.g.)
20
21export function DataTableSkeleton({ rows = 3 }: DataTableSkeletonProps) {
22 return (
23 <Table>
24 <TableHeader className="bg-muted/50">
25 <TableRow className="hover:bg-transparent">
26 <TableHead>
27 <Skeleton className="my-1.5 h-4 w-24" />
28 </TableHead>
29 <TableHead className="hidden sm:table-cell">
30 <Skeleton className="my-1.5 h-4 w-32" />
31 </TableHead>
32 <TableHead className="hidden md:table-cell">
33 <Skeleton className="my-1.5 h-4 w-16" />
34 </TableHead>
35 <TableHead>
36 <Skeleton className="my-1.5 h-4 w-20" />
37 </TableHead>
38 <TableHead className="flex items-center justify-end" />
39 </TableRow>
40 </TableHeader>
41 <TableBody>
42 {[rows].fill(0).map((_, i) => (
43 <TableRow key={i} className="hover:bg-transparent">
44 <TableCell>
45 <Skeleton className="my-1.5 h-4 w-full max-w-40" />
46 </TableCell>
47 <TableCell className="hidden sm:table-cell">
48 <Skeleton className="my-1.5 h-4 w-full max-w-52" />
49 </TableCell>
50 <TableCell className="hidden md:table-cell">
51 <Skeleton className="my-1.5 h-4 w-24" />
52 </TableCell>
53 <TableCell>
54 <Skeleton className="my-1.5 h-4 w-full max-w-40" />
55 </TableCell>
56 <TableCell className="flex justify-end">
57 <Skeleton className="my-1.5 h-5 w-5" />
58 </TableCell>
59 </TableRow>
60 ))}
61 </TableBody>
62 </Table>
63 );
64}