# Skeleton

**When to use:** Content-shaped loading placeholder, shown while real content is being fetched — more polished than a [Loader](Loader.md) for content-heavy pages (lists, cards, profile headers). Pick the `variant` that matches the shape of what's loading.

**Keywords:** shimmer placeholder, content placeholder

**Import:** `import { Skeleton, SkeletonVariant, SkeletonAnimation } from '@ahrowe/ui'`

**Style variants:** `SkeletonVariant.Text` (default) | `SkeletonVariant.Circle` | `SkeletonVariant.Rectangular`

**Animation:** `SkeletonAnimation.Shimmer` (default) | `SkeletonAnimation.Pulse` | `SkeletonAnimation.None`

```tsx
import { Skeleton, SkeletonVariant, SkeletonAnimation } from '@ahrowe/ui';

// Text line (default variant, full-width, ~1 line of text tall)
<Skeleton />

// Multiple stacked lines — the last one renders narrower, like a paragraph
<Skeleton variant={SkeletonVariant.Text} lines={3} />

// Circle — set width/height to match what it stands in for (e.g. an Avatar)
<Skeleton variant={SkeletonVariant.Circle} style={{ width: 48, height: 48 }} />

// Rectangular block — images, cards, charts
<Skeleton variant={SkeletonVariant.Rectangular} style={{ width: '100%', height: 120 }} />

// Animation
<Skeleton variant={SkeletonVariant.Text} animation={SkeletonAnimation.Pulse} />

// Composed — a typical card placeholder
<div style={{ display: 'flex', gap: 12 }}>
  <Skeleton variant={SkeletonVariant.Circle} style={{ width: 48, height: 48 }} />
  <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 8 }}>
    <Skeleton variant={SkeletonVariant.Text} style={{ width: '40%' }} />
    <Skeleton variant={SkeletonVariant.Text} lines={2} />
  </div>
</div>
```

**Sizing:** there's no dedicated size prop — set `width`/`height` via `style`/`className` to match the content being replaced. `SkeletonVariant.Text` defaults to `height: 1em` and `width: 100%` since that's almost always what's wanted for a text placeholder.

**Key props:**

| Prop | Type | Description |
|------|------|-------------|
| `variant` | `SkeletonVariant` | Placeholder shape (default `Text`) |
| `animation` | `SkeletonAnimation` | Loading animation (default `Shimmer`); respects `prefers-reduced-motion` |
| `lines` | `number` | Stacked lines, `SkeletonVariant.Text` only (default `1`); the last line is narrower |
| `className` / `style` | | Root element |

**Slots:** `line` (each stacked line when `lines > 1`)