Skeleton loading components for `MingoOnboardingCard` and its list container, providing pixel-accurate placeholder UI while slash-command data is fetched from `/api/docs/commands`.
## Key Components
| Export | Type | Description |
|--------|------|-------------|
| `MingoOnboardingCardSkeleton` | Component | Single-row skeleton matching the live `MingoOnboardingCard` layout — icon slot, title bar, slash-command bar, description lines, and action chips |
| `MingoOnboardingListSkeleton` | Component | Wraps multiple `MingoOnboardingCardSkeleton` rows in the same bordered container used by the resolved list |
| `MingoOnboardingCardSkeletonProps` | Interface | Props for controlling bar widths, description line count, and chip configuration per card |
| `MingoOnboardingListSkeletonProps` | Interface | Props for row count and container className |
| `ROW_VARIANTS` | Constant | Deterministic width palette cycled by index — prevents uniform appearance without `Math.random` jitter on re-mount |
## Usage Example
```typescript
// Drop-in list skeleton while data loads
import { MingoOnboardingListSkeleton } from './mingo-onboarding-card-skeleton'
function SlashCommandPanel() {
const { data, isLoading } = useSlashCommands()
if (isLoading) {
return
}
return
}
// Single card skeleton with custom widths
import { MingoOnboardingCardSkeleton } from './mingo-onboarding-card-skeleton'
```
## Notes
- Wrap `MingoOnboardingCardSkeleton` rows in a `rounded-md border border-ods-border overflow-hidden` container to replicate the divider behaviour — each row's `border-b last:border-b-0` forms a 1px separator matching the live list.
- `MingoOnboardingListSkeleton` sets `role="status"`, `aria-label`, and `aria-busy` for accessible loading state announcement.