<!-- source-hash: d81e064ec80f99a3beddcfc15467f602 -->
Skeleton loading components for the page layout, providing animated placeholders that match the structure of major UI sections including headers, heroes, sidebars, articles, and vendor detail pages.

## Key Components

| Export | Description |
|--------|-------------|
| `AnnouncementBarSkeleton` | Matches `AnnouncementBar` with logo, text lines, and close button placeholders |
| `HeaderSkeleton` | Sticky header with logo, nav links, and action button skeletons |
| `HeroSkeleton` | Full-width hero section with title, subtitle, and CTA placeholders |
| `SearchContainerSkeleton` | Search input with optional filter chip row |
| `CategorySidebarSkeleton` | Sidebar mimicking `MultiLevelNavigation` with folder/file icons and README badges |
| `BreadcrumbSkeleton` | Horizontal breadcrumb trail with separator dots |
| `ResultsHeaderSkeleton` | Results count and sort controls placeholder |
| `TwoColumnLayoutSkeleton` | Responsive grid wrapper accepting custom sidebar/main content with configurable `sidebarPosition` |
| `ArticleLayoutSkeleton` | Full article page skeleton with header, featured image, and paragraph blocks |
| `VendorDetailLayoutSkeleton` | Vendor detail page with breadcrumb, hero logo/title area, and responsive layout |

## Usage Example

```typescript
import {
  HeaderSkeleton,
  TwoColumnLayoutSkeleton,
  CategorySidebarSkeleton,
} from "./page-layout-skeleton"

// Drop-in loading state for a browse page
function BrowsePage() {
  if (isLoading) {
    return (
      <>
        <HeaderSkeleton />
        <TwoColumnLayoutSkeleton
          sidebarContent={<CategorySidebarSkeleton />}
          sidebarPosition="left"
        />
      </>
    )
  }
  return <ActualContent />
}

// Inline search skeleton with filters hidden
<SearchContainerSkeleton showFilters={false} className="my-4" />
```