A React component that provides a skeleton loading state for wizard/multi-step interfaces, displaying placeholders for progress indicators, headers, and navigation buttons.
## Key Components
- **WizardLayoutSkeleton** - Main skeleton component that renders loading placeholders for wizard layouts
- **WizardLayoutSkeletonProps** - Interface defining component props including customizable step count and CSS classes
- **UnifiedSkeleton & TextSkeleton** - Imported skeleton components for consistent loading animations
## Usage Example
```typescript
import { WizardLayoutSkeleton } from './wizard-layout-skeleton'
// Basic usage with default 6 steps
export function SetupWizardPage() {
const [isLoading, setIsLoading] = useState(true)
if (isLoading) {
return
}
return
}
// Custom step count and styling
export function CustomWizard() {
return (
)
}
```
The component automatically generates accessibility attributes (`role="status"`, `aria-label`) and creates a responsive layout with progress bar placeholders, heading/body text skeletons, and navigation button placeholders. The number of progress steps is configurable via the `steps` prop.