A React component that handles client-side rendering of headers with hydration-safe mounting to prevent server-client mismatch errors. ## Key Components - **`ClientOnlyHeader`** - Main component that conditionally renders header based on client-side mounting state - **`ClientOnlyHeaderProps`** - Interface defining config and optional skeleton props - **Client-side state management** - Uses `useState` and `useEffect` to track hydration status ## Usage Example ```typescript import { ClientOnlyHeader } from './client-only-header'; import { CustomSkeleton } from './custom-skeleton'; // Basic usage with default skeleton // With custom loading skeleton } /> ``` The component prevents hydration mismatches by showing a skeleton during server-side rendering, then switching to the full interactive header once client-side JavaScript loads. This pattern is essential for headers containing client-side features like theme toggles or dynamic navigation states.