Skeleton

1import type * as React from "react";
2import { cn } from "@/lib/utils";
3 
4export interface SkeletonProps
5  extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
6  /** Number → px; string passed through. */
7  width?: number | string;
8  /** Number → px; string passed through. */
9  height?: number | string;
10  shape?: "rounded" | "pill" | "squared";
11  animated?: boolean;
12  /** When false, render `children` instead of the skeleton. */
13  show?: boolean;
14  children?: React.ReactNode;
15}
16 
17/** Placeholder for async content. */
18export function Skeleton({
19  className,
20  width,
21  height,
22  shape = "rounded",
23  animated = true,
24  show = true,
25  children,
26  style,
27  ...props
28}: SkeletonProps): React.ReactElement {
29  if (!show) return <>{children}</> as unknown as React.ReactElement;
30 
31  const dimStyle: React.CSSProperties = {
32    ...(width != null && { width: typeof width === "number" ? `${width}px` : width }),
33    ...(height != null && { height: typeof height === "number" ? `${height}px` : height }),
34    ...style,
35  };
36 
37  return (
38    <div
39      aria-hidden="true"
40      data-slot="skeleton"
41      className={cn(
42        "bg-fill-2",
43        shape === "rounded" && "rounded-[var(--radius-6)]",
44        shape === "squared" && "rounded-none",
45        shape === "pill" && "rounded-full",
46        animated &&
47          "animate-[patch-skeleton-pulse_1.8s_ease-in-out_infinite] motion-reduce:animate-none",
48        className,
49      )}
50      style={dimStyle}
51      {...props}
52    />
53  );
54}