Loading skeleton component for the `/onboarding-guides` catalog page, rendering chrome-less placeholder UI that mirrors the layout of `` to prevent layout shifts during data fetching. ## Key Components - **`OnboardingGuidesCatalogSkeleton`** — Default export-less named function component that renders an animated pulse skeleton matching the catalog view structure: - Search input placeholder (`h-12`) - Section pill/filter row with 4 pill placeholders - Three grouped sections (4, 3, 3 cards) using `` ## Usage Example ```typescript // app/onboarding-guides/loading.tsx import { OnboardingGuidesCatalogSkeleton } from '@/components/onboarding-guides-catalog-skeleton' // Next.js automatically renders this during page-level Suspense. // The host page owns the shell; this component // renders only the inner content region. export default function Loading() { return } ``` ## Notes - **Chrome-less by design**: The host page provides the `` shell (hero + back button). This skeleton must not re-render that shell — doing so causes duplicate hero/back-button during loading. - **Zero layout shift**: Card heights match the loaded `` exactly, so no reflow occurs on hydration. - **Section structure**: Mirrors the loaded view's three sections with card counts `[4, 3, 3]` and a `w-full flex flex-col gap-10` wrapper. ## Source [`onboarding-guides-catalog-skeleton.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/onboarding-guides-catalog-skeleton.tsx)