<!-- source-hash: 65227a48925322cc0e025749aac5c49b -->
A loading skeleton component for the `QueryReportTable`, rendering animated placeholder rows and columns while data is being fetched.

## Key Components

**`QueryReportTableSkeleton`** — Main export. Renders a configurable grid of pulsing skeleton cells mimicking the table's header and row structure.

**Props (`QueryReportTableSkeletonProps`):**

| Prop | Type | Description |
|------|------|-------------|
| `rows` | `number` | Number of skeleton rows to render |
| `columns` | `number` | Number of skeleton columns per row |
| `columnWidth` | `number \| string` | Fixed width applied to each column cell |
| `variant` | `'default' \| 'compact'` | Controls row height, spacing, and border style |
| `className` | `string` | Optional additional CSS classes |

**Variants:**
- **`default`** — Taller rows (`80px`), card-style bordered containers with rounded corners
- **`compact`** — Shorter rows (`56px`), flat bottom-border separators with tighter spacing

## Usage Example

```typescript
import { QueryReportTableSkeleton } from './query-report-table-skeleton'

// Default variant — card-style table loading state
<QueryReportTableSkeleton
  rows={5}
  columns={4}
  columnWidth={180}
/>

// Compact variant — dense list loading state
<QueryReportTableSkeleton
  rows={10}
  columns={3}
  columnWidth={150}
  variant="compact"
  className="mt-4"
/>
```

> **Note:** Cell placeholder widths vary pseudo-randomly per row/column using `(rowIndex * colIndex * 7) % 35` to produce a more natural-looking skeleton rather than uniform bars.