<!-- source-hash: 136d5eb8692fb936306eaef6f2ae6216 -->
A React component that provides smooth loading transitions with skeleton states while preventing layout jumps during content loading.

## Key Components

- **ContentLoadingContainer** - Main component that overlays skeleton loading states over actual content
- **useContentLoading** - Hook providing common loading state patterns and utilities for different content types

## Core Features

- **Layout Stability** - Maintains consistent dimensions during loading with configurable `minHeight`
- **Smooth Transitions** - Customizable opacity transitions between loading and loaded states
- **Accessibility** - Proper ARIA labels, live regions, and screen reader support
- **Flexible Skeletons** - Accepts any skeleton component for different content types
- **Visual Overlay** - Dark background overlay that smoothly fades in/out during state changes

## Usage Example

```typescript
import { ContentLoadingContainer, useContentLoading } from './content-loading-container'

function VendorPage() {
  const [vendors, setVendors] = useState([])
  const [isLoading, setIsLoading] = useState(true)
  const { getMinHeight, getSkeletonCount } = useContentLoading(isLoading)

  return (
    <ContentLoadingContainer
      isLoading={isLoading}
      skeletonComponent={
        <CardSkeletonGrid 
          variant="vendor" 
          count={getSkeletonCount('vendor')} 
        />
      }
      minHeight={getMinHeight('vendor')}
      transitionDuration={200}
    >
      <VendorGrid vendors={vendors} />
    </ContentLoadingContainer>
  )
}
```

The component uses absolute positioning to overlay the skeleton during loading while keeping the actual content rendered but hidden, ensuring smooth transitions without DOM manipulation delays.