@flamingo-stack/openframe-frontend-core 0.0.748 → 0.0.749

package/src/components/features/push-button-selector.tsx

@@ -4,6 +4,7 @@ import { Check } from 'lucide-react';
 import type React from 'react';
 import { useEffect, useRef } from 'react';
 import { UnifiedSkeleton } from '../loading';
+import { LoadingRegion } from '../loading/loading-region';
 import { Badge, Input } from '../ui';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip';
 
@@ -78,32 +79,40 @@ interface PushButtonSelectorProps<Id extends SelectableOptionId = string> {
   footer?: React.ReactNode;
 }
 
-// Composed from the app-wide UnifiedSkeleton system (components/loading) —
-// the same base every other loading surface uses (bg-ods-skeleton pulse,
-// prefers-reduced-motion support, role="status" a11y). Each skeleton row
+// Composed from the app-wide UnifiedSkeleton system (components/loading),
+// announced once by its LoadingRegion. Each skeleton row
 // mirrors a LOADED option row exactly (bg-ods-bg card, p-4, icon + two
 // 20px-tall text lines + selection box) so the list never jumps on load.
-function PushButtonSelectorSkeleton({ count = 3, hasTitle }: { count?: number; hasTitle?: boolean }) {
+function PushButtonSelectorSkeleton({
+  region = true,
+  count = 3,
+  hasTitle,
+}: {
+  /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
+  region?: boolean;
+  count?: number;
+  hasTitle?: boolean;
+}) {
   return (
-    <div className="space-y-3" role="status" aria-label="Loading options">
-      {hasTitle && <UnifiedSkeleton className="h-5 w-20" aria-label="Loading title" />}
+    <LoadingRegion label="Loading options" announce={region} className="space-y-3">
+      {hasTitle && <UnifiedSkeleton className="h-5 w-20" />}
       <div className="space-y-3">
         {Array.from({ length: count }, (_, i) => (
           <div key={i} className="rounded-lg border border-ods-border bg-ods-bg p-4">
             <div className="flex items-center justify-between gap-4">
               <div className="flex items-center gap-3">
-                <UnifiedSkeleton className="h-8 w-8" aria-label="Loading icon" />
+                <UnifiedSkeleton className="h-8 w-8" />
                 <div>
-                  <UnifiedSkeleton variant="text" className="mb-2 h-4 w-24" aria-label="Loading name" />
-                  <UnifiedSkeleton variant="text" className="h-4 w-36" aria-label="Loading description" />
+                  <UnifiedSkeleton variant="text" className="mb-2 h-4 w-24" />
+                  <UnifiedSkeleton variant="text" className="h-4 w-36" />
                 </div>
               </div>
-              <UnifiedSkeleton className="h-6 w-6" aria-label="Loading selection state" />
+              <UnifiedSkeleton className="h-6 w-6" />
             </div>
           </div>
         ))}
       </div>
-    </div>
+    </LoadingRegion>
   );
 }
 

package/src/components/features/remote-session/remote-desktop-view.tsx

@@ -11,9 +11,10 @@ import {
   Settings01Icon,
 } from '../../icons-v2-generated';
 import { PageLayout } from '../../layout/page-layout';
+import { LoadingRegion } from '../../loading/loading-region';
+import { UnifiedSkeleton } from '../../loading/unified-skeleton';
 import { ActionsMenuDropdown, type ActionsMenuGroup } from '../../ui/actions-menu';
 import { Button } from '../../ui/button/button';
-import { Skeleton } from '../../ui/skeleton';
 import { TruncateText } from '../../ui/truncate-text';
 import { RemoteDesktopFullscreenToolbar } from './remote-desktop-fullscreen-toolbar';
 
@@ -206,27 +207,36 @@ export function RemoteDesktopView({
 }
 
 /** The page while the device is still loading: the header bar as placeholders over an empty screen. */
-export function RemoteDesktopViewSkeleton({ onBack }: Pick<RemoteDesktopViewProps, 'onBack'>) {
+export function RemoteDesktopViewSkeleton({
+  onBack,
+  region = true,
+}: Pick<RemoteDesktopViewProps, 'onBack'> & {
+  /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
+  region?: boolean;
+}) {
   return (
     <PageLayout className={PAGE_CLASS} backButton={onBack ? { label: 'Back', onClick: onBack } : undefined}>
-      <div className={CONTROLS_BAR_CLASS}>
-        <div className={CONTROLS_ROW_CLASS}>
-          <div className="flex min-w-0 items-center gap-[var(--spacing-system-mf)]">
-            <Skeleton className="h-9 w-9 flex-shrink-0 rounded-md" />
-            <div className="flex min-w-0 flex-col gap-[var(--spacing-system-xxs)]">
-              <Skeleton className="h-5 w-48" />
-              <Skeleton className="h-4 w-36" />
+      {/* `contents`: the page's own children stay its layout items; the region adds the one announcement. */}
+      <LoadingRegion label="Loading the remote session" announce={region} className="contents">
+        <div className={CONTROLS_BAR_CLASS}>
+          <div className={CONTROLS_ROW_CLASS}>
+            <div className="flex min-w-0 items-center gap-[var(--spacing-system-mf)]">
+              <UnifiedSkeleton className="h-9 w-9 flex-shrink-0 rounded-md" />
+              <div className="flex min-w-0 flex-col gap-[var(--spacing-system-xxs)]">
+                <UnifiedSkeleton className="h-5 w-48" />
+                <UnifiedSkeleton className="h-4 w-36" />
+              </div>
+            </div>
+            <div className="flex flex-shrink-0 items-center gap-[var(--spacing-system-xs)]">
+              <UnifiedSkeleton className="h-11 w-11 rounded-lg md:h-12 md:w-12" />
+              <UnifiedSkeleton className="h-11 w-11 rounded-lg md:h-12 md:w-12" />
+              <UnifiedSkeleton className="h-11 w-11 rounded-lg md:h-12 md:w-12" />
             </div>
-          </div>
-          <div className="flex flex-shrink-0 items-center gap-[var(--spacing-system-xs)]">
-            <Skeleton className="h-11 w-11 rounded-lg md:h-12 md:w-12" />
-            <Skeleton className="h-11 w-11 rounded-lg md:h-12 md:w-12" />
-            <Skeleton className="h-11 w-11 rounded-lg md:h-12 md:w-12" />
           </div>
         </div>
-      </div>
 
-      <div className="min-h-0 min-w-0 flex-1 rounded-lg bg-black" />
+        <div className="min-h-0 min-w-0 flex-1 rounded-lg bg-black" />
+      </LoadingRegion>
     </PageLayout>
   );
 }

package/src/components/features/waitlist-form.tsx

@@ -14,6 +14,7 @@ import type { FormRescueDefinition } from '../../utils/form-rescue';
 import { hasGenericEmailDomain } from '../../utils/generic-domain-utils';
 import type { HumanitySignals } from '../../utils/humanity-signals';
 import { OpenframeLogoIcon } from '../icons-v2-generated/logos/openframe-logo-icon';
+import { UnifiedSkeleton } from '../loading/unified-skeleton';
 import { Button } from '../ui/button';
 import { CheckboxBlock } from '../ui/checkbox-block';
 import { HoneypotField } from '../ui/honeypot-field';
@@ -201,16 +202,16 @@ export function WaitlistForm({
         )}
       >
         {/* Email input skeleton */}
-        <div className="h-12 w-full animate-pulse rounded-[6px] border border-ods-border bg-ods-card" />
+        <UnifiedSkeleton className="h-12 w-full rounded-[6px] border border-ods-border" />
         {/* Phone input skeleton */}
         <div className="flex w-full gap-[var(--spacing-system-xs)]">
-          <div className="h-12 w-[130px] shrink-0 animate-pulse rounded-[6px] border border-ods-border bg-ods-card" />
-          <div className="h-12 flex-1 animate-pulse rounded-[6px] border border-ods-border bg-ods-card" />
+          <UnifiedSkeleton className="h-12 w-[130px] shrink-0 rounded-[6px] border border-ods-border" />
+          <UnifiedSkeleton className="h-12 flex-1 rounded-[6px] border border-ods-border" />
         </div>
         {/* Disclaimer + button skeleton */}
         <div className="flex w-full flex-col items-end gap-[var(--spacing-system-m)]">
-          <div className="w-full animate-pulse rounded-[6px] border border-ods-border bg-ods-bg px-4 py-6" />
-          <div className="h-12 w-[200px] animate-pulse rounded-[6px] border border-ods-border bg-ods-card" />
+          <UnifiedSkeleton className="h-auto w-full rounded-[6px] border border-ods-border px-4 py-6" />
+          <UnifiedSkeleton className="h-12 w-[200px] rounded-[6px] border border-ods-border" />
         </div>
       </div>
     );

package/src/components/help-center-pages/download-apps-page.tsx

@@ -59,6 +59,7 @@ import { WindowsLogoGreyIcon } from '../icons-v2-generated/brand-logos/windows-l
 import { Download01Icon } from '../icons-v2-generated/interface/download-01-icon';
 import { PageShell } from '../layout/article-detail-layout';
 import { PageLayout } from '../layout/page-layout';
+import { LoadingRegion } from '../loading/loading-region';
 import { UnifiedSkeleton } from '../loading/unified-skeleton';
 import { Button } from '../ui/button/button';
 import { LoadError } from '../ui/error-state';
@@ -248,7 +249,7 @@ function WebCard({ web }: { web: DownloadAppsWebOption }) {
 /** A section's cards while the server's answer loads: the same grid and card frame, a button's box in each. */
 function CardsSkeleton({ label }: { label: string }) {
   return (
-    <div className={CARDS_GRID_CLASS} aria-busy="true" aria-label={label}>
+    <LoadingRegion label={label} className={CARDS_GRID_CLASS}>
       {[0, 1].map(card => (
         <div key={card} className={CARD_CLASS}>
           <UnifiedSkeleton className="h-6 w-32 rounded" />
@@ -256,7 +257,7 @@ function CardsSkeleton({ label }: { label: string }) {
           <UnifiedSkeleton className="h-14 w-full rounded-md" />
         </div>
       ))}
-    </div>
+    </LoadingRegion>
   );
 }
 

package/src/components/help-center-pages/trust-center-page.tsx

@@ -376,10 +376,14 @@ export function TrustCenterPageSkeleton({
   backButton = false,
   title = TRUST_CENTER_TITLE,
   subtitle = TRUST_CENTER_TAGLINE,
-}: Pick<TrustCenterPageProps, 'shell' | 'backButton' | 'title' | 'subtitle'>) {
+  region = true,
+}: Pick<TrustCenterPageProps, 'shell' | 'backButton' | 'title' | 'subtitle'> & {
+  /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
+  region?: boolean;
+}) {
   return (
     <TrustCenterChrome shell={shell} title={title} subtitle={subtitle} backButton={backButton}>
-      <TrustCenterSkeleton />
+      <TrustCenterSkeleton region={region} />
     </TrustCenterChrome>
   );
 }

package/src/components/help-center-pages/trust-center-sections.tsx

@@ -46,6 +46,7 @@ import { ShieldCheckIcon } from '../icons-v2-generated/security/shield-check-ico
 import { CheckIcon } from '../icons-v2-generated/signs-and-symbols/check-icon';
 import { SECTION_HEADING_CLASS } from '../layout/page-heading';
 import { ListEmptyState } from '../list-empty-state';
+import { LoadingRegion } from '../loading/loading-region';
 import { TextSkeleton, UnifiedSkeleton } from '../loading/unified-skeleton';
 import { Button } from '../ui/button/button';
 import { ComplianceLogo } from '../ui/compliance-badge';
@@ -666,7 +667,12 @@ function SectionRailSkeleton() {
  * the content replaces it. The status row, then Compliance, Controls and
  * Documents (what fills the first screens), beside the section rail.
  */
-export function TrustCenterSkeleton() {
+export function TrustCenterSkeleton({
+  region = true,
+}: {
+  /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
+  region?: boolean;
+} = {}) {
   return (
     <>
       <div className={TRUST_STATUS_ROW_CLASS} aria-hidden="true">
@@ -683,7 +689,7 @@ export function TrustCenterSkeleton() {
           <TextSkeleton.Body className="w-44" />
         </div>
       </div>
-      <div className={TRUST_BODY_GRID_CLASS} aria-busy="true" aria-label="Loading the trust center">
+      <LoadingRegion label="Loading the trust center" announce={region} className={TRUST_BODY_GRID_CLASS}>
         <div className={TRUST_SECTIONS_COLUMN_CLASS}>
           <SkeletonSection id="compliance">
             <StackedRowsPanel rows={skeletonRows(3, { mark: 'logo', action: 'badge' })} />
@@ -698,7 +704,7 @@ export function TrustCenterSkeleton() {
         <aside className="hidden content-lg:block" aria-hidden="true">
           <SectionRailSkeleton />
         </aside>
-      </div>
+      </LoadingRegion>
     </>
   );
 }

package/src/components/index.ts

@@ -18,7 +18,6 @@ export * from './comment-card';
 export * from './comment-composer';
 export * from './comment-thread';
 export * from './content-loading-container';
-export * from './dynamic-skeleton';
 export * from './empty-state';
 export * from './list-empty-state';
 export * from './faq-accordion';
@@ -57,7 +56,6 @@ export * from './social-icon-row';
 export * from './user-display';
 export * from './vendor-display-button';
 export * from './vendor-icon';
-export * from './vendor-page-skeleton';
 export * from './vendor-tag';
 export * from './why-it-matters';
 export * from './yes-no-display';

package/src/components/layout/title-block.tsx

@@ -84,6 +84,7 @@
 import type React from 'react';
 import { useIsTruncated } from '../../hooks/ui/use-is-truncated';
 import { cn } from '../../utils/cn';
+import { UnifiedSkeleton } from '../loading/unified-skeleton';
 import type { ActionsMenuGroup } from '../ui/actions-menu';
 import { EntityImage } from '../ui/entity-image';
 import { FloatingTooltip } from '../ui/floating-tooltip';
@@ -159,21 +160,14 @@ export interface TitleBlockProps {
 }
 
 /**
- * Inline text skeleton — used only in `loading` mode, placed directly inside the real
- * `h1`/`p`. It is a single `inline-block` bar whose height is intentionally SHORTER than the
- * typography line-height, and it uses the default baseline alignment. That way the element's
+ * The inline text skeleton, used only in `loading` mode, placed directly inside the real
+ * `h1`/`p`: a single `inline-block` `UnifiedSkeleton` span whose height is intentionally SHORTER
+ * than the typography line-height, on the default baseline alignment. That way the element's
  * own line-box STRUT (text-h2 → 40px, text-h6 → 20px) sets the height exactly as it would for
- * real text — the bar fits within the ascent and never inflates the line. So a loading header
+ * real text: the bar fits within the ascent and never inflates the line. So a loading header
  * is pixel-identical in height to the loaded one. Phrasing-valid (`span` only).
  */
-function TitleTextSkeleton({ widthClass, heightClass }: { widthClass: string; heightClass: string }) {
-  return (
-    <span
-      aria-hidden
-      className={cn('inline-block max-w-full animate-pulse rounded-md bg-ods-border', widthClass, heightClass)}
-    />
-  );
-}
+const TITLE_TEXT_SKELETON_CLASS = 'inline-block max-w-full rounded-md';
 
 /**
  * Bar geometry per title size, following the ODS type scale across breakpoints
@@ -184,7 +178,7 @@ function TitleTextSkeleton({ widthClass, heightClass }: { widthClass: string; he
  * 32/40 from tablet up. `text-h1` scales at both breakpoints (40 → 48 → 56), so
  * its bar does too — reusing the h2 bar there would leave a stamp-sized smudge
  * inside a 64px line. Heights stay well under the line box's ascent on purpose;
- * see `TitleTextSkeleton` for why that is what keeps the header height honest.
+ * see `TITLE_TEXT_SKELETON_CLASS` for why that is what keeps the header height honest.
  */
 const TITLE_SKELETON_SIZE = {
   h1: { width: 'w-56 content-md:w-80 content-lg:w-96', height: 'h-7 content-md:h-8 content-lg:h-9' },
@@ -226,7 +220,11 @@ export function TitleBlock({
     loading ? null : subtitle,
   );
   const titleNode = loading ? (
-    <TitleTextSkeleton widthClass={skeletonSize.width} heightClass={skeletonSize.height} />
+    <UnifiedSkeleton
+      as="span"
+      aria-hidden
+      className={cn(TITLE_TEXT_SKELETON_CLASS, skeletonSize.width, skeletonSize.height)}
+    />
   ) : (
     title
   );
@@ -307,7 +305,11 @@ export function TitleBlock({
                     aria-hidden={!loading && !subtitle ? true : undefined}
                   >
                     {loading ? (
-                      <TitleTextSkeleton widthClass="w-28 content-md:w-36" heightClass="h-2.5 content-md:h-3" />
+                      <UnifiedSkeleton
+                        as="span"
+                        aria-hidden
+                        className={cn(TITLE_TEXT_SKELETON_CLASS, 'h-2.5 w-28 content-md:h-3 content-md:w-36')}
+                      />
                     ) : (
                       subtitle || '\u00A0'
                     )}

package/src/components/loading/card-skeleton.tsx

@@ -1,12 +1,13 @@
 import { cn } from '../../utils/cn';
-import { TextSkeleton, MediaSkeleton, InteractiveSkeleton } from './unified-skeleton';
+import { LoadingRegion } from './loading-region';
+import { UnifiedSkeleton, TextSkeleton, MediaSkeleton, InteractiveSkeleton } from './unified-skeleton';
 
 interface CardSkeletonProps {
   className?: string;
   /**
    * Card layout variant
    */
-  variant?: 'vendor' | 'blog' | 'category' | 'alternative';
+  variant?: 'vendor' | 'blog' | 'alternative';
   /**
    * Show action buttons area
    */
@@ -24,9 +25,10 @@ interface CardSkeletonProps {
  *
  * Supports different card types used across the application:
  * - vendor: Vendor cards with logo, title, description, and actions
- * - blog: Blog post cards with image, title, summary, and metadata  
- * - category: Category cards with icon, title, and description
+ * - blog: Blog post cards with image, title, summary, and metadata
  * - alternative: Alternative vendor cards in comparison lists
+ *
+ * A category card's loading box is `CategoryCardSkeleton`.
  */
 export function CardSkeleton({
   className,
@@ -39,7 +41,6 @@ export function CardSkeleton({
   const cardContent = {
     vendor: <VendorCardContent showMetadata={showMetadata} />,
     blog: <BlogCardContent showActions={showActions} showMetadata={showMetadata} />,
-    category: <CategoryCardContent />,
     alternative: <AlternativeCardContent showActions={showActions} />,
   };
 
@@ -53,8 +54,6 @@ export function CardSkeleton({
         variant === 'vendor' && 'flex h-full flex-col',
         className,
       )}
-      role="status"
-      aria-label={`Loading ${variant} card`}
       {...props}
     >
       {cardContent[variant]}
@@ -181,7 +180,7 @@ function BlogCardContent({ showActions, showMetadata }: { showActions: boolean;
               <div className="flex shrink-0 items-center gap-3 text-ods-text-muted">
                 <TextSkeleton.Caption className="w-12" />
                 {/* Separator dot */}
-                <div className="h-1 w-1 rounded-full bg-ods-skeleton"></div>
+                <UnifiedSkeleton variant="circular" className="h-1 w-1" />
                 <TextSkeleton.Caption className="w-16" />
               </div>
             </div>
@@ -192,39 +191,6 @@ function BlogCardContent({ showActions, showMetadata }: { showActions: boolean;
   );
 }
 
-/**
- * Category card skeleton content
- */
-function CategoryCardContent() {
-  return (
-    <div className="space-y-4 p-4 content-md:p-6">
-      {/* Icon grid */}
-      <div className="flex gap-2 content-md:gap-3">
-        {Array.from({ length: 6 }).map((_, index) => (
-          <MediaSkeleton.Icon key={index} size="lg" className="flex-shrink-0" />
-        ))}
-      </div>
-
-      {/* Content */}
-      <div className="space-y-2">
-        <div className="space-y-1">
-          <TextSkeleton.Subheading className="w-3/4" />
-          <TextSkeleton.Caption className="w-1/2" />
-        </div>
-
-        <div className="flex items-start justify-between gap-4 content-md:items-end content-md:gap-6">
-          <div className="flex-1 space-y-2">
-            <TextSkeleton.Body className="w-full" />
-            <TextSkeleton.Body className="w-2/3" />
-          </div>
-
-          <InteractiveSkeleton.Button className="h-10 w-10 flex-shrink-0 content-md:h-12 content-md:w-12" />
-        </div>
-      </div>
-    </div>
-  );
-}
-
 /**
  * Alternative card skeleton content (for vendor alternatives/comparisons)
  */
@@ -258,34 +224,36 @@ function AlternativeCardContent({ showActions }: { showActions: boolean }) {
  * Grid of card skeletons for loading lists
  */
 export function CardSkeletonGrid({
+  region = true,
   count = 6,
   variant = 'vendor',
   className,
   containerClassName,
   ...props
 }: {
+  /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
+  region?: boolean;
   count?: number;
   variant?: CardSkeletonProps['variant'];
   className?: string;
   containerClassName?: string;
 } & Omit<CardSkeletonProps, 'variant'>) {
   return (
-    <div
+    <LoadingRegion
+      label={`Loading ${variant} cards`}
+      announce={region}
       className={cn(
         'grid gap-4 content-md:gap-6',
         // Responsive grid based on card type
         variant === 'vendor' && 'grid-cols-1 content-md:grid-cols-2 content-lg:grid-cols-3',
         variant === 'blog' && 'grid-cols-1 content-md:grid-cols-2',
-        variant === 'category' && 'grid-cols-1 content-md:grid-cols-2 content-lg:grid-cols-4',
         variant === 'alternative' && 'grid-cols-1',
         className,
       )}
-      role="status"
-      aria-label={`Loading ${count} ${variant} cards`}
     >
       {Array.from({ length: count }, (_, index) => (
         <CardSkeleton key={index} variant={variant} containerClassName={containerClassName} {...props} />
       ))}
-    </div>
+    </LoadingRegion>
   );
 }

package/src/components/loading/category-card-skeleton.tsx

@@ -12,13 +12,11 @@ export function CategoryCardSkeleton({ className }: CategoryCardSkeletonProps) {
         'box-border flex min-w-0 flex-col rounded-[12px] border border-ods-border bg-ods-card p-8',
         className,
       )}
-      role="status"
-      aria-label="Loading category card"
     >
       {/* Icons row */}
       <div className="mb-8 flex items-center justify-center gap-6">
         {Array.from({ length: 10 }).map((_, i) => (
-          <UnifiedSkeleton key={i} variant="circular" className="h-10 w-10 flex-shrink-0" aria-label="Loading icon" />
+          <UnifiedSkeleton key={i} variant="circular" className="h-10 w-10 flex-shrink-0" />
         ))}
       </div>
 
@@ -31,7 +29,7 @@ export function CategoryCardSkeleton({ className }: CategoryCardSkeletonProps) {
 
       {/* Arrow button placeholder */}
       <div className="mt-4 flex justify-end">
-        <UnifiedSkeleton className="h-12 w-12 rounded-[6px]" aria-label="Loading button" />
+        <UnifiedSkeleton className="h-12 w-12 rounded-[6px]" />
       </div>
     </article>
   );

package/src/components/loading/category-vendor-selector-skeleton.tsx

@@ -1,18 +1,25 @@
 import { cn } from '../../utils/cn';
+import { LoadingRegion } from './loading-region';
 import { TextSkeleton, UnifiedSkeleton } from './unified-skeleton';
 
 interface CategoryVendorSelectorSkeletonProps {
+  /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
+  region?: boolean;
   /** number of subcategory blocks to render */
   subcategories?: number;
   className?: string;
 }
 
-export function CategoryVendorSelectorSkeleton({ subcategories = 3, className }: CategoryVendorSelectorSkeletonProps) {
+export function CategoryVendorSelectorSkeleton({
+  region = true,
+  subcategories = 3,
+  className,
+}: CategoryVendorSelectorSkeletonProps) {
   return (
-    <div
+    <LoadingRegion
+      label="Loading categories"
+      announce={region}
       className={cn('rounded-lg border border-ods-border bg-ods-card p-6', className)}
-      role="status"
-      aria-label="Loading category section"
     >
       {/* Header */}
       <div className="mb-6 max-w-xl space-y-2">
@@ -35,6 +42,6 @@ export function CategoryVendorSelectorSkeleton({ subcategories = 3, className }:
           </div>
         ))}
       </div>
-    </div>
+    </LoadingRegion>
   );
 }