<!-- source-hash: 51f3cf29d7b19b4a1c11b15eb5e163de -->
A loading skeleton component that mimics the structure and layout of a header while content is being fetched, providing visual continuity during loading states.

## Key Components

- **HeaderSkeleton**: Main skeleton component that renders animated placeholder elements
- **HeaderSkeletonProps**: Interface defining optional `HeaderConfig` for conditional rendering
- **Conditional sections**: Logo area, navigation items, action buttons, and mobile menu toggle
- **Admin header support**: Special handling for admin interfaces with additional left actions
- **Responsive design**: Different layouts for desktop and mobile viewports

## Usage Example

```typescript
import { HeaderSkeleton } from './components/header-skeleton'
import { HeaderConfig } from './types/navigation'

// Basic usage
function App() {
  const [isLoading, setIsLoading] = useState(true)
  
  return (
    <div>
      {isLoading ? (
        <HeaderSkeleton />
      ) : (
        <Header config={headerConfig} />
      )}
    </div>
  )
}

// With configuration
const headerConfig: HeaderConfig = {
  navigation: {
    items: [{ label: 'Home' }, { label: 'About' }],
    position: 'center'
  },
  actions: {
    right: [{ type: 'button', label: 'Sign Up' }]
  },
  mobile: { enabled: true },
  className: 'admin-header'
}

<HeaderSkeleton config={headerConfig} />
```

The skeleton intelligently shows or hides sections based on the provided configuration, ensuring the loading state matches the expected final header layout.