Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/openstatusHQ/openstatus. 🫖 Status page with uptime monitoring & API monitoring as code 🫖 openstatus.dev
bun drizzle-orm monitoring monitoring-as-code nextjs observability on-call open-source shadcn-ui status-page statuspage synthetic-monitoring tinybird turso uptime uptime-checker uptime-monitor
Something went wrong. Try again.
2.0 kB · 64 lines
TSX
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465import { Skeleton } from "@openstatus/ui/components/ui/skeleton";import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow,} from "@openstatus/ui/components/ui/table";
interface DataTableSkeletonProps { /** * Number of rows to render * @default 10 */ rows?: number;}
// TODO: add checkbox skeleton (for MonitorTable e.g.)
export function DataTableSkeleton({ rows = 3 }: DataTableSkeletonProps) { return ( <Table> <TableHeader className="bg-muted/50"> <TableRow className="hover:bg-transparent"> <TableHead> <Skeleton className="my-1.5 h-4 w-24" /> </TableHead> <TableHead className="hidden sm:table-cell"> <Skeleton className="my-1.5 h-4 w-32" /> </TableHead> <TableHead className="hidden md:table-cell"> <Skeleton className="my-1.5 h-4 w-16" /> </TableHead> <TableHead> <Skeleton className="my-1.5 h-4 w-20" /> </TableHead> <TableHead className="flex items-center justify-end" /> </TableRow> </TableHeader> <TableBody> {Array.from({ length: rows }).map((_, i) => ( <TableRow key={i} className="hover:bg-transparent"> <TableCell> <Skeleton className="my-1.5 h-4 w-full max-w-40" /> </TableCell> <TableCell className="hidden sm:table-cell"> <Skeleton className="my-1.5 h-4 w-full max-w-52" /> </TableCell> <TableCell className="hidden md:table-cell"> <Skeleton className="my-1.5 h-4 w-24" /> </TableCell> <TableCell> <Skeleton className="my-1.5 h-4 w-full max-w-40" /> </TableCell> <TableCell className="flex justify-end"> <Skeleton className="my-1.5 h-5 w-5" /> </TableCell> </TableRow> ))} </TableBody> </Table> );}