import { Skeleton } from "@/components/ui/skeleton"; import { cn } from "@/lib/utils"; import { LOADING_PRESETS, type LoadingKind } from "./presets"; export interface LoadingSkeletonProps { /** Preset shape. Default `"text"`. */ kind?: LoadingKind; /** Repeat count for row/line kinds (text lines, list rows, table rows, * form fields). Defaults per kind — see `LOADING_PRESETS`. */ count?: number; /** Column count for the `table` kind. Default 4. */ columns?: number; className?: string; } /** Last line renders shorter so the block reads as prose, not a grid. */ function TextLines({ count }: { count: number }) { return (

{Array.from({ length: count }, (_, i) => ( ))}

); } function CardShape({ count }: { count: number }) { return (

); } function ListRows({ count }: { count: number }) { return (

{Array.from({ length: count }, (_, i) => (

))}

); } function TableRows({ count, columns }: { count: number; columns: number }) { return (

{Array.from({ length: columns }, (_, i) => ( ))}

{Array.from({ length: count }, (_, r) => (

{Array.from({ length: columns }, (_, c) => ( ))}

))}

); } function FormFields({ count }: { count: number }) { return (

{Array.from({ length: count }, (_, i) => (

))}

); } /** Generic page body — title strip, prose lines, two-card grid, tall * block. Drop straight into a route `loading.tsx`. */ function PageShape() { return (

); } /** * One configurable skeleton component with per-kind presets — the SSOT * for loading placeholders. Composes the shadcn `Skeleton` primitive. * * `text | card | list | table | form | page | block` — pick the shape * that mirrors the content being streamed, override `count`/`columns` * where the default density doesn't fit. */ export function LoadingSkeleton({ kind = "text", count, columns = 4, className, }: LoadingSkeletonProps) { const n = count ?? LOADING_PRESETS[kind].count; return (

{kind === "text" && } {kind === "card" && } {kind === "list" && } {kind === "table" && } {kind === "form" && } {kind === "page" && } {kind === "block" && }

); }