Skeleton.

The architecture of anticipation. Skeletons improve perceived performance by providing a visual estimate of content before it loads, maintaining layout stability (CLS) and reducing cognitive friction.

import { Skeleton } from "@/components/ui/skeleton"

Configuration

Composition

Simulation State

Block-level Layout Preservation

Cumulative Layout Shift (CLS)

Skeletons are not just decorative. By enforcing dimensions (`h-4`, `w-full`) before data arrives, we prevent the UI from jumping violently when content loads. This is critical for Core Web Vitals scores.

Compositional Flexibility

The component intentionally lacks complex variants. It is a primitive designed to be composed via `className`. Use utility classes like `rounded-full` or `aspect-video` to mirror the target content's shape exactly.

DashboardCard.tsx

export function LoadingCard() {
  return (
    <div className="flex flex-col space-y-3">
      
      <Skeleton className="h-[125px] w-[250px] rounded-xl" />
      
      <div className="space-y-2">
        
        <Skeleton className="h-4 w-[250px]" />
        
        
        <Skeleton className="h-4 w-[200px]" />
      </div>
    </div>
  )
}