Animated loading skeleton for detail/article pages, providing placeholder UI while content is being fetched. ## Key Components ### `DetailPageSkeletonProps` | Prop | Type | Default | Description | |------|------|---------|-------------| | `metadataColumns` | `number` | `4` | Number of metadata grid columns | | `showImageGallery` | `boolean` | `true` | Toggles horizontal image gallery vs. featured image skeleton | | `bare` | `boolean` | `false` | Renders skeleton blocks only, without the built-in `PageLayout` wrapper | ### `DetailPageSkeleton` The main export. Renders a pulsing skeleton layout composed of: - **Title block** — full-width heading placeholder - **Category tags** — row of tag-shaped placeholders - **Metadata grid** — dynamic column count via `metadataColumns` - **Image gallery or featured image** — toggled by `showImageGallery` - **Content sections** — three repeating section/paragraph blocks When `bare = false` (default), the skeleton is wrapped in a self-contained `PageLayout` at the hub article width (`max-w-[1280px]`). Set `bare = true` when the caller already provides a page shell, ensuring the loading state inherits the same width, padding, and `min-height` as the loaded page. ## Usage Example ```typescript // Default — self-contained with PageLayout wrapper // Match a gallery-less case study page // Inside a caller-supplied shell (e.g. during streaming SSR) ``` ## Source [`detail-page-skeleton.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/detail-page-skeleton.tsx)