A full-page loading skeleton for the Margin Report view, rendering placeholder shimmer blocks that mirror the report's layout sections while data is being fetched. ## Key Components ### `MarginReportSkeleton` Main export. Renders a multi-section skeleton layout matching the Margin Report structure. **Props (`MarginReportSkeletonProps`):** | Prop | Type | Default | Description | |---|---|---|---| | `animate` | `boolean` | `true` | Toggles Tailwind `animate-pulse` shimmer | | `description` | `React.ReactNode` | — | Text shown above the overlay content | | `overlayContent` | `React.ReactNode` | — | Node rendered in a centered fixed overlay (e.g. CTA button, spinner) | **Skeleton sections rendered (in order):** 1. **Header** — title and subtitle placeholders 2. **Summary cards** — 3-column grid of `h-32` blocks 3. **MSP Profile & Report Info** — 2-column card row with icon + text shimmer 4. **Vendor solution lists** — Commercial Stack / Open-Source Stack columns, each with 5 vendor rows (icon + name + cost placeholders) 5. **Strategic Recommendations** — section heading + 3-column card grid 6. **OpenFrame value section** — header with logo + 3-column value card grid 7. **CTA Overlay** — conditionally renders a semi-transparent overlay with `overlayContent` fixed-centered on screen ## Usage Example ```typescript import { MarginReportSkeleton } from './margin-report-skeleton'; // Basic shimmer while loading // With overlay CTA (e.g. prompt user to generate report) Generate Report } /> // Static (no animation) for testing/screenshots ``` **Source:** [`margin-report-skeleton.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/margin-report-skeleton.tsx)