Data Grid Skeleton

1import type * as React from "react";
2import { Skeleton } from "@/components/ui/skeleton";
3import { cn } from "@/lib/utils";
4 
5interface DivProps extends React.ComponentProps<"div"> {}
6 
7function DataGridSkeleton({ className, ...props }: DivProps) {
8  return (
9    <div
10      data-slot="grid-skeleton"
11      className={cn(
12        "flex h-[calc(100dvh-(--spacing(16)))] w-full flex-col gap-4 has-[>[data-slot=grid-skeleton-toolbar]]:h-[calc(100dvh-(--spacing(20)))]",
13        className,
14      )}
15      {...props}
16    />
17  );
18}
19 
20interface DataGridSkeletonToolbarProps extends DivProps {
21  align?: "start" | "center" | "end";
22  actionCount?: number;
23}
24 
25function DataGridSkeletonToolbar({
26  align = "end",
27  actionCount = 4,
28  className,
29  ...props
30}: DataGridSkeletonToolbarProps) {
31  return (
32    <div
33      data-slot="grid-skeleton-toolbar"
34      className={cn(
35        "flex items-center gap-2",
36        {
37          "justify-start": align === "start",
38          "justify-center": align === "center",
39          "justify-end": align === "end",
40        },
41        className,
42      )}
43      {...props}
44    >
45      {Array.from({ length: actionCount }).map((_, i) => (
46        <Skeleton key={i} className="h-7 w-20 shrink-0" />
47      ))}
48    </div>
49  );
50}
51 
52function DataGridSkeletonGrid({ className, ...props }: DivProps) {
53  return (
54    <Skeleton
55      data-slot="grid-skeleton-grid"
56      className={cn("flex-1", className)}
57      {...props}
58    />
59  );
60}
61 
62export { DataGridSkeleton, DataGridSkeletonGrid, DataGridSkeletonToolbar };