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.