<!-- source-hash: cf0d76307d34f2cb3ba0d8a755fc3f81 -->
Renders animated pulse skeleton rows for table/card lists while data loads, providing separate desktop and mobile layouts. Marked as deprecated in favor of `DataTableSkeleton` from `data-table`.

## Key Components

### `TableCardSkeleton` *(deprecated)*
Main export. Renders `n` skeleton card rows with responsive desktop (`md:flex`) and mobile (`flex md:hidden`) layouts.

**Props** (`TableCardSkeletonProps`):

| Prop | Type | Default | Description |
|---|---|---|---|
| `columns` | `Column[]` | — | Column definitions with `key` and optional `width` (Tailwind class) |
| `rows` | `number` | `10` | Number of skeleton rows to render |
| `hasActions` | `boolean` | `false` | Renders action button placeholders |
| `hasChevron` | `boolean` | `false` | Renders a chevron/navigate placeholder |
| `className` | `string` | — | Extra classes on the row wrapper |
| `rowClassName` | `string` | — | Extra classes on the inner flex row |

### Constants *(deprecated)*
- `ROW_HEIGHT_DESKTOP` — `'h-[66px] md:h-[78px]'` (inner; +2px border = 68/80 total)
- `ROW_HEIGHT_MOBILE` — `'h-[66px]'` (inner)

**Primary column detection:** The component automatically identifies the widest (`flex-1` or `flex-[n]`) column as "primary" and renders a second skeleton line on every other row to simulate multi-line content.

## Usage Example

```typescript
import { TableCardSkeleton } from '@openframe/ui/components/table-card-skeleton'

const columns = [
  { key: 'avatar', width: 'w-10' },
  { key: 'name',   width: 'flex-1' },
  { key: 'status', width: 'w-24' },
]

// While data is loading:
<TableCardSkeleton
  columns={columns}
  rows={5}
  hasActions
  hasChevron
/>
```

> **Deprecated:** Migrate to `DataTableSkeleton` from the `data-table` package.

## Source

[`table-skeleton.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/table-skeleton.tsx)