<!-- source-hash: 906f9090b003db906415d2c34987f68e -->
Loading skeleton for the `/roadmap` grid view, rendering animated placeholder cards while roadmap data is being fetched.

## Key Components

### `RoadmapCardSkeleton` *(internal)*
A 340px animated placeholder card mimicking the full grid card layout. Renders pulsing skeletons for:
- Status badge (top-right)
- Icon + title + subtitle
- 3-line description block
- Bottom action area (button + badge)

> **Note:** Intentionally kept file-internal to avoid naming collision with `RoadmapCardSkeleton` from `lib/chat/entity-cards/roadmap-card.tsx`, which is a compact 56px chat-card variant.

### `RoadmapGridSkeleton` *(exported)*
Renders a responsive 1→2 column grid of `RoadmapCardSkeleton` instances.

### `RoadmapGridSkeletonProps`

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `count` | `number` | `4` | Number of skeleton cards to render |
| `showLeftMargin` | `boolean` | `true` | Applies `md:ml-[120px]` to align with the page hero title block. Pass `false` for narrower surfaces (e.g. release detail page) |

## Usage Example

```typescript
// Default: 4 cards with left margin (full roadmap page)
<RoadmapGridSkeleton />

// Custom count, no left margin (embedded in a narrower rail)
<RoadmapGridSkeleton count={6} showLeftMargin={false} />

// Typical Suspense / conditional pattern
{isLoading
  ? <RoadmapGridSkeleton count={4} />
  : <RoadmapGrid items={roadmapItems} />
}
```