A unified skeleton loading component that renders animated placeholder UI for different content layouts using ODS design tokens, replacing duplicate loading patterns across the application. ## Key Components ### `ContentLoader` The primary export. Accepts a `variant` prop to switch between four skeleton layouts, with configurable item count and optional title placeholder. **Props (`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` | Render a title placeholder bar | | `className` | `string` | — | CSS classes for inner wrapper | | `containerClassName` | `string` | — | CSS classes for outer container | ### Variant Shortcuts Pre-bound convenience exports with `variant` locked: - **`CardLoader`** — Grid of stat fields with a footer row - **`FormLoader`** — Stacked label + input field rows - **`DetailLoader`** — Two-column layout with a large content area and sidebar - **`ListLoader`** — Row items with avatar, text lines, and action button All variants use `bg-ods-skeleton` tokens and `animate-pulse` for consistent theming. ## Usage Example ```typescript import { ContentLoader, CardLoader, FormLoader, DetailLoader, ListLoader, } from './content-loader'; // Generic usage with variant selection // Convenience wrappers ``` > **Note:** This is a `'use client'` component. It must be rendered in a client boundary in Next.js App Router projects.