<!-- source-hash: f80d7f61d9427dcf715215adf596f271 -->
A unified skeleton loading component that replaces duplicate loading patterns across the UI, using ODS design tokens for consistent theming.

## Key Components

**`ContentLoader`** — Main export. Renders an animated pulse skeleton based on the selected `variant`.

**`ContentLoaderProps`**

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `variant` | `'card' \| 'form' \| 'detail' \| 'list'` | `'card'` | Skeleton layout type |
| `items` | `number` | `4` | Number of repeated skeleton items |
| `showTitle` | `boolean` | `true` | Renders a title placeholder bar |
| `className` | `string` | — | Inner wrapper CSS classes |
| `containerClassName` | `string` | — | Outer container CSS classes |

**Convenience exports** — Pre-bound variants for direct use:
- `CardLoader` — stat/metric card layout
- `FormLoader` — labeled input fields layout
- `DetailLoader` — two-column detail/sidebar layout
- `ListLoader` — icon + text row list layout

## Usage Example

```typescript
// Generic usage
import { ContentLoader } from './content-loader';

<ContentLoader variant="list" items={6} showTitle={false} />

// Convenience variants
import { FormLoader, DetailLoader, ListLoader } from './content-loader';

// Form skeleton with 3 fields
<FormLoader items={3} />

// Detail page skeleton
<DetailLoader containerClassName="max-w-4xl" />

// List with custom container
<ListLoader items={8} showTitle={false} containerClassName="px-0" />
```