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-[66px] md:h-[78px]` (inner; +2px border = 68/80 total)) | | `ROW_HEIGHT_MOBILE` | Constant | Shared row height class for mobile (`h-[66px]` (inner)) | ## 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 ( ) } return } ``` ## 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