<!-- source-hash: c2128eeaf09cf16a3c77d41f2e6d9b86 -->
Animated loading skeleton for `ProductReleaseCard` that prevents layout shift by precisely matching the loaded card's dimensions in both `lg` and `sm` size variants.

## Key Components

### `ProductReleaseCardSkeletonProps`

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `className` | `string` | — | Additional CSS classes |
| `size` | `'lg' \| 'sm'` | `'lg'` | Must match the target `ProductReleaseCard` size prop |

### `ProductReleaseCardSkeleton`

The exported component renders two structurally distinct skeletons:

- **`size='lg'`** — Full card with hero section (16:9 image + version pill + title + summary), a changelog strip placeholder, and a 4-cell metadata grid (3 stat cells + 1 author avatar cell). All inner element heights are pinned to match the resolved card's `min-h` reservations.
- **`size='sm'`** — Compact inline card (used in chat contexts) with a square thumbnail, title row with version pill, date row, and summary row. Uses `<span>` elements to remain valid inside inline containers.

Both branches apply `animate-pulse` and throw defensively if an unsupported `size` value is passed at runtime.

## Usage Example

```typescript
import { ProductReleaseCardSkeleton } from './product-release-card-skeleton'

// Full card — use while fetching release data for the main releases list
<ProductReleaseCardSkeleton size="lg" />

// Compact card — use while fetching release data in a chat message slot
<ProductReleaseCardSkeleton size="sm" className="mt-2" />
```

> **Layout shift note:** The `size` prop on this skeleton **must** match the `size` prop passed to the resolved `ProductReleaseCard`. Mismatching causes a measurable reflow when the skeleton is replaced because `lg` and `sm` produce different pixel heights.

## Source

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