<!-- source-hash: c772b3ac402db602bd1473a8927ce650 -->
Renders animated skeleton placeholder rows for a `DataTable` during loading states, matching the visual structure of real rows (desktop multi-column and mobile single-column layouts).

## Key Components

| Export | Type | Description |
|--------|------|-------------|
| `DataTableSkeleton` | Component | Animated pulse skeleton rows mirroring visible table columns |
| `DataTableSkeletonProps` | Interface | Props: `rows` (count), `className`, `rowClassName` |
| `ROW_HEIGHT_DESKTOP` | Constant | Shared row height class for desktop (`h-[68px] md:h-[80px]`) |
| `ROW_HEIGHT_MOBILE` | Constant | Shared row height class for mobile (`h-[68px]`) |

## Usage Example

```typescript
import {
  DataTableSkeleton,
  DataTableSkeletonProps,
} from './data-table-skeleton'

// Inside a DataTable context, shown while data is loading
function MyTableContent({ isLoading }: { isLoading: boolean }) {
  if (isLoading) {
    return (
      <DataTableSkeleton
        rows={5}
        className="my-2"
        rowClassName="opacity-80"
      />
    )
  }
  return <DataTableRows />
}
```

## Behavior Notes

- Reads visible columns via `useDataTableContext()` to match real column widths and layout
- **Desktop**: renders one placeholder block per column, respecting `meta.width` or `flex-1`
- **Mobile**: renders a simplified two-line placeholder (title + subtitle)
- Every other row (`index % 2 === 0`) adds a secondary line on the first column, mimicking subtitle density variation
- Uses `animate-pulse` for the loading animation and ODS design tokens for consistent theming