Provides skeleton UI components that mirror real page layout elements (announcement bar, header, hero, sidebar, article, vendor detail) during loading states, built with Tailwind CSS and animated pulse effects.
## Key Components
| Export | Description |
|---|---|
| `AnnouncementBarSkeleton` | Skeleton for top announcement bars with logo, text, and close button |
| `HeaderSkeleton` | Sticky header skeleton with logo, nav links, and action buttons (responsive) |
| `HeroSkeleton` | Full-width hero section skeleton with title, subtitle, and CTA |
| `SearchContainerSkeleton` | Search input with optional filter chip row |
| `CategorySidebarSkeleton` | File-tree sidebar skeleton mimicking `MultiLevelNavigation` with folder/file icons and badges |
| `BreadcrumbSkeleton` | Horizontal breadcrumb trail with separator dots |
| `ResultsHeaderSkeleton` | Results count / sort bar skeleton |
| `TwoColumnLayoutSkeleton` | Composable two-column grid (sidebar + main), supports left/right sidebar position |
| `ArticleLayoutSkeleton` | Full article skeleton: tags, title, metadata, featured image, and 12 body paragraphs |
| `VendorDetailLayoutSkeleton` | Vendor detail page skeleton with breadcrumb, hero logo/title, and responsive layout |
### Props
| Component | Key Props |
|---|---|
| `SearchContainerSkeleton` | `showFilters?: boolean`, `className?: string` |
| `TwoColumnLayoutSkeleton` | `sidebarContent?: ReactNode`, `mainContent?: ReactNode`, `sidebarPosition?: 'left' \| 'right'` |
| All others | `className?: string` |
## Usage Example
```typescript
import {
HeaderSkeleton,
TwoColumnLayoutSkeleton,
CategorySidebarSkeleton,
ArticleLayoutSkeleton,
} from "./page-layout-skeleton"
// Drop-in page loading state
function CatalogPageSkeleton() {
return (
<>
}
// mainContent defaults to
/>
)
}
// Slot in a custom main area
function ArticlePage() {
return (
}
sidebarPosition="right"
/>
)
}
```
## Notes
- All skeletons use `bg-ods-skeleton` / `bg-ods-border` design tokens and `animate-pulse` for consistent motion.
- `TwoColumnLayoutSkeleton` defaults to `CategorySidebarSkeleton` + `CardSkeletonGrid` when no children are provided.
- `CategorySidebarSkeleton` hard-codes 11 navigation items to closely mirror the actual `MultiLevelNavigation` shape, including README badges and chevron icons.
**Source:** [`page-layout-skeleton.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/page-layout-skeleton.tsx)