Animated loading skeleton components for the DocsHub document viewer, providing layout-matched placeholders while document content loads. ## Key Components ### `MarkdownSkeleton` A text-style skeleton that mimics a rendered markdown article layout — paragraphs of pulsing bars, a heading bar, and two card-style callout blocks. Used by `` as the default skeleton for `markdown` and unknown document types. ### `EmbedSkeleton` A document-type-aware skeleton for iframe-based viewers (`pdf`, `google_sheet`, `figma`, `file`). Matches the header button count and body layout of the actual viewer to minimize layout shift on load. **`EmbedSkeletonProps`** | Prop | Type | Description | |---|---|---| | `documentType` | `'pdf' \| 'google_sheet' \| 'figma' \| 'file' \| string` | Controls header button count and card layout | **Layout by `documentType`:** | Value | Layout | |---|---| | `pdf` | Header + icon/title + **two** buttons (Preview, Download) + iframe body | | `google_sheet` / `figma` | Header + icon/title + **one** button + iframe body | | `file` | Centered `FileDownloadCard`-style bordered card (icon, name, download button) | | `undefined` / other | Generic one-button header + iframe body | > **Note:** Bars use `bg-ods-border` intentionally — `--ods-skeleton` resolves to transparent in this build, which would leave large surfaces visually empty. ## Usage Example ```typescript import { MarkdownSkeleton, EmbedSkeleton } from './skeletons' // Default markdown loading state // PDF viewer loading state (two-button header) // File download card loading state // Embedders can override entirely via renderSkeleton prop on DocsHubPage } /> ```