<!-- source-hash: a465f87f85ec79ae37576015929fe094 -->
A full-page loading skeleton for the Margin Report view, rendering animated placeholder blocks that mirror the report's layout sections while optionally displaying an overlay with a CTA or status message.

## Key Components

| Export | Type | Description |
|--------|------|-------------|
| `MarginReportSkeleton` | `React.FC` | Main skeleton component with pulse animation and optional overlay |
| `MarginReportSkeletonProps` | `interface` | Props contract for the skeleton component |

### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `animate` | `boolean` | `true` | Toggles CSS `animate-pulse` on the root element |
| `description` | `React.ReactNode` | — | Explanatory text rendered above the overlay content |
| `overlayContent` | `React.ReactNode` | — | Node rendered in a centered fixed overlay (e.g. button, spinner) |

### Skeleton Sections Rendered

```text
├── Header (title + subtitle bars)
├── Summary cards (3-column grid)
├── MSP Profile + Report Info (2-column grid)
├── Vendor lists — Commercial & Open-Source stacks (2-column, 5 rows each)
├── Strategic Recommendations header + cards (3-column grid)
└── OpenFrame value section (header + 3 value cards)
```

## Usage Example

```typescript
// Basic animated skeleton while data loads
<MarginReportSkeleton />

// Static skeleton with a gated CTA overlay
<MarginReportSkeleton
  animate={false}
  description="Generate your free Margin Report to unlock insights."
  overlayContent={
    <Button onClick={handleGenerate}>
      Generate Report
    </Button>
  }
/>

// Skeleton with a loading spinner overlay
<MarginReportSkeleton
  description="Calculating your margins…"
  overlayContent={<Spinner size="lg" />}
/>
```

> **Note:** When `overlayContent` is provided, a semi-transparent overlay (`bg-ods-card/80`) covers the entire skeleton. The overlay content is viewport-centered via `fixed` positioning with pointer-events re-enabled only on the CTA container.