A unified skeleton loading component library providing accessible, animated placeholder elements for content loading states across the application.
## Key Components
### `UnifiedSkeleton`
Base skeleton component accepting:
- `variant` — Shape style: `default` (rounded), `text` (rounded-sm), `circular`, `rectangular`
- `width` / `height` — Custom dimensions; defaults to full width with variant-based height
- `animate` — Toggles pulse animation; respects `prefers-reduced-motion` via `motion-reduce:animate-none`
- `aria-label` — Screen reader label (defaults to `"Loading content"`)
### `TextSkeleton`
Namespace of text-specific variants:
| Export | Use Case |
|---|---|
| `TextSkeleton.Heading` | H1/H2 placeholders |
| `TextSkeleton.Subheading` | H3/H4 placeholders |
| `TextSkeleton.Body` | Paragraph text |
| `TextSkeleton.Caption` | Captions and metadata |
### `InteractiveSkeleton`
UI control placeholders:
| Export | Use Case |
|---|---|
| `InteractiveSkeleton.Button` | CTA buttons |
| `InteractiveSkeleton.Input` | Form fields |
| `InteractiveSkeleton.Chip` | Filter chips |
### `MediaSkeleton`
Media and icon placeholders:
| Export | Use Case |
|---|---|
| `MediaSkeleton.Avatar` | Profile images (`sm`/`md`/`lg`) |
| `MediaSkeleton.CardImage` | OG-ratio card images (1200×630) |
| `MediaSkeleton.Icon` | Icons (`sm`/`md`/`lg`) |
## Usage Example
```typescript
import {
UnifiedSkeleton,
TextSkeleton,
InteractiveSkeleton,
MediaSkeleton,
} from "./unified-skeleton"
// Custom skeleton
// Composing a card loading state
function CardSkeleton() {
return (
)
}
```