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

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>
   );
 }

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

@@ -1,68 +1,66 @@
 import { cn } from '../../utils/cn';
-import { OrganizationIconSkeleton } from './organization-icon-skeleton';
+import { LoadingRegion } from './loading-region';
+import { UnifiedSkeleton } from './unified-skeleton';
 
 export interface DeviceCardSkeletonProps {
   /**
    * Additional CSS classes
    */
   className?: string;
+  /** Hold `DeviceCard`'s "more" button (its `actions.moreButton`). Default `true`. */
+  moreButton?: boolean;
+  /**
+   * Hold the box of `DeviceCard`'s `actions.detailsButton.component` with these size classes
+   * (e.g. `'h-12 w-[88px]'`). Omit when the card has no details button.
+   */
+  detailsButtonClassName?: string;
 }
 
 /**
- * DeviceCardSkeleton - Loading skeleton matching DeviceCard exact layout
+ * DeviceCardSkeleton: the loading box of `DeviceCard` (`ui/device-card.tsx`), box for box:
+ * the same container classes, then
+ * - Row 1: the bordered device-icon box, the OS icon and name line (`text-h4`) over the
+ *   organization line (`text-h6`), the bordered "more" button (`moreButton`) and/or the details
+ *   button's box (`detailsButtonClassName`);
+ * - Row 2: the status tag (`Tag`'s `h-8`) and the "Last seen" line (`text-h6`).
  *
- * Matches the structure of DeviceCard:
- * - Row 1: Device icon + Device name + More button
- * - Row 2: OS badge + Organization icon + Organization name
- * - Row 3: Status badge + Last seen
- *
- * Prevents layout jumps by matching exact dimensions.
+ * The loaded card replaces it with no movement.
  */
-export function DeviceCardSkeleton({ className }: DeviceCardSkeletonProps) {
+export function DeviceCardSkeleton({ className, moreButton = true, detailsButtonClassName }: DeviceCardSkeletonProps) {
   return (
     <div
-      className={cn('h-full rounded-[6px] border border-ods-border bg-ods-card', className)}
-      role="status"
-      aria-label="Loading device card"
+      className={cn(
+        'overflow-clip rounded-[6px] border border-ods-border bg-ods-card',
+        'flex flex-col gap-4 p-4',
+        className,
+      )}
     >
-      {/* Row 1: Device icon + Device name + More button */}
-      <div className="flex items-center gap-4 px-4 py-3">
-        {/* Device type icon (8x8 container) */}
-        <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-[6px] border border-ods-border bg-ods-bg">
-          <div className="h-4 w-4 animate-pulse rounded bg-ods-border" />
+      {/* Row 1: device icon | name over organization | more button */}
+      <div className="flex w-full items-center gap-4">
+        <div className="flex shrink-0 items-center justify-center rounded-[6px] border border-ods-border p-2">
+          <UnifiedSkeleton className="size-4 rounded" />
         </div>
-
-        {/* Device name */}
-        <div className="min-w-0 flex-1">
-          <div className="h-6 w-3/4 animate-pulse rounded bg-ods-border" />
-        </div>
-
-        {/* More button */}
-        <div className="h-12 w-12 flex-shrink-0 animate-pulse rounded-[6px] bg-ods-border" />
-      </div>
-
-      {/* Row 2: OS badge + Organization */}
-      <div className="flex items-center gap-4 px-4 py-2">
-        {/* OS badge */}
-        <div className="h-6 w-24 flex-shrink-0 animate-pulse rounded bg-ods-border" />
-
-        {/* Organization icon */}
-        <OrganizationIconSkeleton size="sm" />
-
-        {/* Organization name */}
-        <div className="min-w-0 flex-1">
-          <div className="h-5 w-1/2 animate-pulse rounded bg-ods-border" />
+        <div className="flex min-w-0 flex-1 flex-col justify-center">
+          {/* OS icon (16px) + name, one `text-h4` line */}
+          <div className="flex items-center gap-1 text-h4">
+            <UnifiedSkeleton className="size-4 shrink-0 rounded" />
+            <UnifiedSkeleton className="h-[1lh] w-3/4 rounded" />
+          </div>
+          <UnifiedSkeleton className="h-[1lh] w-1/2 rounded text-h6" />
         </div>
+        {moreButton && (
+          <div className="flex shrink-0 items-center justify-center rounded-[6px] border border-ods-border p-3">
+            <UnifiedSkeleton className="size-6 rounded" />
+          </div>
+        )}
+        {detailsButtonClassName && <UnifiedSkeleton className={cn('shrink-0 rounded-[6px]', detailsButtonClassName)} />}
       </div>
 
-      {/* Row 3: Status badge + Last seen */}
-      <div className="flex items-center gap-4 px-4 py-2">
-        {/* Status badge */}
-        <div className="h-6 w-20 flex-shrink-0 animate-pulse rounded-full bg-ods-border" />
-
-        {/* Last seen */}
-        <div className="flex-1">
-          <div className="h-5 w-40 animate-pulse rounded bg-ods-border" />
+      {/* Row 2: status tag | last seen */}
+      <div className="flex w-full items-center gap-2">
+        <UnifiedSkeleton className="h-8 w-20 shrink-0 rounded-md" />
+        <div className="min-w-0 flex-1 text-h6">
+          <UnifiedSkeleton className="h-[1lh] w-40 max-w-full rounded" />
         </div>
       </div>
     </div>
@@ -78,16 +76,25 @@ export function DeviceCardSkeleton({ className }: DeviceCardSkeletonProps) {
  * - Desktop (lg): 3 columns
  * - Large (xl): 4 columns
  */
-export function DeviceCardSkeletonGrid({ count = 12, className }: { count?: number; className?: string }) {
+export function DeviceCardSkeletonGrid({
+  region = true,
+  count = 12,
+  className,
+}: {
+  /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
+  region?: boolean;
+  count?: number;
+  className?: string;
+}) {
   return (
-    <div
+    <LoadingRegion
+      label="Loading devices"
+      announce={region}
       className={cn('grid grid-cols-1 gap-4 content-md:grid-cols-2 content-lg:grid-cols-4', className)}
-      role="status"
-      aria-label={`Loading ${count} device cards`}
     >
       {Array.from({ length: count }, (_, index) => (
         <DeviceCardSkeleton key={index} />
       ))}
-    </div>
+    </LoadingRegion>
   );
 }

package/src/components/loading/index.ts

@@ -7,6 +7,7 @@ export {
   SearchContainerSkeleton,
   CategorySidebarSkeleton,
   BreadcrumbSkeleton,
+  BreadcrumbLinkSkeleton,
   ResultsHeaderSkeleton,
   TwoColumnLayoutSkeleton,
   ArticleLayoutSkeleton,
@@ -26,25 +27,13 @@ export { UnifiedSkeleton, TextSkeleton, MediaSkeleton, InteractiveSkeleton } fro
 // New unified loading components
 export { ContentLoadingContainer, useContentLoading } from '../content-loading-container';
 
-// Content skeleton components
-export {
-  ParagraphSkeleton,
-  ListSkeleton,
-  TableSkeleton,
-  FormSkeleton,
-  NavigationSkeleton,
-  ProfileSkeleton,
-  CommentSkeleton,
-  FeatureListSkeleton,
-  TimelineSkeleton,
-  PricingSkeleton,
-} from './content-skeleton';
-
 // Profile system loading skeleton
 export { ProfileLoadingSkeleton } from '../profile/ProfileLoadingSkeleton';
 
 export { MspProfileFormSkeleton } from './msp-profile-form-skeleton';
 
+export { SettingsFormSkeleton, type SettingsFormSkeletonProps } from './settings-form-skeleton';
+
 export { CategoryCardSkeleton } from './category-card-skeleton';
 
 export { CategoryVendorSelectorSkeleton } from './category-vendor-selector-skeleton';
@@ -56,12 +45,9 @@ export { WizardLayoutSkeleton } from './wizard-layout-skeleton';
 // export it here, otherwise server components that import this index will
 // break due to client-only code.
 
-export { MarginReportSkeleton } from './margin-report-skeleton';
-
-export { UsersGridSkeleton } from './users-grid-skeleton';
+export { LoadingRegion, type LoadingRegionProps } from './loading-region';
 
-// Dynamic ODS-aware skeleton components
-export { DynamicSkeleton, SkeletonPresets, PlatformSkeletonContainer, ProgressiveSkeleton } from '../dynamic-skeleton';
+export { MarginReportSkeleton } from './margin-report-skeleton';
 
 // Organization & Device skeleton components
 export { OrganizationIconSkeleton } from './organization-icon-skeleton';

package/src/components/loading/loading-region.tsx

@@ -0,0 +1,60 @@
+import type { ElementType, HTMLAttributes, ReactNode } from 'react';
+
+/**
+ * THE container of a loading state: the one thing a screen reader hears while it loads.
+ *
+ * Skeleton bars (`UnifiedSkeleton`, `TextHold`) are decoration and are hidden from assistive technology;
+ * a page with forty bars must not announce "loading" forty times. The region around them says it ONCE:
+ * `aria-busy` on the container, and one polite status with the label. Few screen readers honour
+ * `aria-busy` alone, so the status is what is actually read. When the content replaces the region, the
+ * status goes with it.
+ *
+ * Put it on the top of a loading state (a page's skeleton, a card grid's, a Suspense fallback), never on
+ * every card inside it: nested regions would announce again.
+ */
+export interface LoadingRegionProps extends HTMLAttributes<HTMLElement> {
+  /** What is loading, read once by a screen reader. */
+  label?: string;
+  /** The container element, so the region keeps the layout element it replaces (a `section`, a `li`, a `span` in text). */
+  as?: ElementType;
+  /**
+   * `false`: only the container is drawn (no `aria-busy`, no status), for a loading state rendered inside
+   * another region, which announces for both. Components expose it as their `region` / `loadingRegion` prop.
+   * Default `true`.
+   */
+  announce?: boolean;
+  /**
+   * `false`: `aria-busy` without a status of its own, for a container whose loading is already announced by a
+   * status elsewhere (a table footer's "Loading more results"). Default `true`.
+   */
+  status?: boolean;
+  children?: ReactNode;
+}
+
+export function LoadingRegion({
+  label = 'Loading',
+  as: Tag = 'div',
+  announce = true,
+  status = true,
+  className,
+  children,
+  ...props
+}: LoadingRegionProps) {
+  if (!announce) {
+    return (
+      <Tag className={className} {...props}>
+        {children}
+      </Tag>
+    );
+  }
+  return (
+    <Tag aria-busy="true" className={className} {...props}>
+      {status && (
+        <span role="status" aria-live="polite" className="sr-only">
+          {label}
+        </span>
+      )}
+      {children}
+    </Tag>
+  );
+}

package/src/components/loading/margin-report-skeleton.tsx

@@ -1,6 +1,10 @@
 import type React from 'react';
+import { LoadingRegion } from './loading-region';
+import { UnifiedSkeleton } from './unified-skeleton';
 
 interface MarginReportSkeletonProps {
+  /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
+  region?: boolean;
   /** Enable pulse animation (default: true) */
   animate?: boolean;
   /** Optional explanation text shown above overlay content */
@@ -9,63 +13,70 @@ interface MarginReportSkeletonProps {
   overlayContent?: React.ReactNode;
 }
 
-export function MarginReportSkeleton({ animate = true, description, overlayContent }: MarginReportSkeletonProps) {
+export function MarginReportSkeleton({
+  region = true,
+  animate = true,
+  description,
+  overlayContent,
+}: MarginReportSkeletonProps) {
   return (
-    <main className={`bg-ods-bg ${animate ? 'animate-pulse' : ''} relative min-h-screen`}>
+    <LoadingRegion
+      label="Loading the report"
+      as="main"
+      announce={region && !overlayContent}
+      className="relative min-h-screen bg-ods-bg"
+    >
       <div className="mx-auto max-w-[1920px] space-y-10 px-6 py-6 content-md:px-20 content-md:py-10">
         {/* Header */}
         <div className="space-y-3">
-          <div className="h-10 w-72 rounded bg-ods-skeleton" />
-          <div className="h-4 w-80 rounded bg-ods-skeleton" />
+          <UnifiedSkeleton className="h-10 w-72 rounded" animate={animate} />
+          <UnifiedSkeleton className="h-4 w-80 rounded" animate={animate} />
         </div>
 
         {/* Summary cards */}
         <div className="grid grid-cols-1 gap-6 content-md:grid-cols-3">
           {Array.from({ length: 3 }).map((_, i) => (
-            <div key={i} className="h-32 rounded border border-ods-border bg-ods-card" />
+            <UnifiedSkeleton key={i} className="h-32 rounded border border-ods-border" animate={animate} />
           ))}
         </div>
 
         {/* MSP Profile & Report Info cards */}
         <div className="grid grid-cols-1 gap-6 content-md:grid-cols-2">
           {/* MSP profile skeleton */}
-          <div className="flex animate-pulse items-center gap-4 rounded-lg border border-ods-border bg-ods-card p-6">
-            <div className="h-14 w-14 rounded-lg bg-ods-skeleton" />
+          <div className="flex items-center gap-4 rounded-lg border border-ods-border bg-ods-card p-6">
+            <UnifiedSkeleton className="h-14 w-14 rounded-lg" animate={animate} />
             <div className="flex-1 space-y-2">
-              <div className="h-4 w-3/4 rounded bg-ods-skeleton" />
-              <div className="h-3 w-1/2 rounded bg-ods-skeleton" />
+              <UnifiedSkeleton className="h-4 w-3/4 rounded" animate={animate} />
+              <UnifiedSkeleton className="h-3 w-1/2 rounded" animate={animate} />
             </div>
           </div>
 
           {/* Report info skeleton */}
-          <div className="flex animate-pulse flex-col gap-4 rounded-lg border border-ods-border bg-ods-card p-6">
+          <div className="flex flex-col gap-4 rounded-lg border border-ods-border bg-ods-card p-6">
             <div className="flex items-center justify-between gap-4">
               <div className="flex items-center gap-2">
-                <div className="h-10 w-10 rounded-lg bg-ods-skeleton" />
+                <UnifiedSkeleton className="h-10 w-10 rounded-lg" animate={animate} />
                 <div className="space-y-1">
-                  <div className="h-4 w-32 rounded bg-ods-skeleton" />
-                  <div className="h-3 w-20 rounded bg-ods-skeleton" />
+                  <UnifiedSkeleton className="h-4 w-32 rounded" animate={animate} />
+                  <UnifiedSkeleton className="h-3 w-20 rounded" animate={animate} />
                 </div>
               </div>
-              <div className="h-6 w-36 rounded bg-ods-skeleton" />
+              <UnifiedSkeleton className="h-6 w-36 rounded" animate={animate} />
             </div>
-            <div className="mt-4 h-4 w-40 rounded bg-ods-skeleton" />
+            <UnifiedSkeleton className="mt-4 h-4 w-40 rounded" animate={animate} />
           </div>
         </div>
 
         {/* Vendor solution lists (Commercial & Open-Source) */}
         <div className="grid grid-cols-1 gap-6 content-md:grid-cols-2">
           {['Commercial Stack', 'Open-Source Stack'].map((label, idx) => (
-            <div
-              key={idx}
-              className="flex animate-pulse flex-col overflow-hidden rounded-lg border border-ods-border bg-ods-card"
-            >
+            <div key={idx} className="flex flex-col overflow-hidden rounded-lg border border-ods-border bg-ods-card">
               {/* list header */}
               <div className="flex items-center justify-between px-6 py-4">
-                <div className="h-6 w-40 rounded bg-ods-skeleton" />
+                <UnifiedSkeleton className="h-6 w-40 rounded" animate={animate} />
                 <div className="flex items-center gap-2">
-                  <div className="h-5 w-20 rounded bg-ods-skeleton" />
-                  <div className="h-4 w-10 rounded bg-ods-skeleton" />
+                  <UnifiedSkeleton className="h-5 w-20 rounded" animate={animate} />
+                  <UnifiedSkeleton className="h-4 w-10 rounded" animate={animate} />
                 </div>
               </div>
 
@@ -78,16 +89,16 @@ export function MarginReportSkeleton({ animate = true, description, overlayConte
                   >
                     {/* left section: icon + text */}
                     <div className="flex min-w-0 items-center gap-3">
-                      <div className="h-12 w-12 flex-shrink-0 rounded-lg bg-ods-skeleton" />
+                      <UnifiedSkeleton className="h-12 w-12 flex-shrink-0 rounded-lg" animate={animate} />
                       <div className="flex min-w-0 flex-col">
-                        <div className="h-4 w-32 rounded bg-ods-skeleton" />
-                        <div className="mt-1 hidden h-3 w-24 rounded bg-ods-skeleton content-md:block" />
+                        <UnifiedSkeleton className="h-4 w-32 rounded" animate={animate} />
+                        <UnifiedSkeleton className="mt-1 hidden h-3 w-24 rounded content-md:block" animate={animate} />
                       </div>
                     </div>
                     {/* right addon: cost text */}
                     <div className="flex flex-shrink-0 items-center gap-1">
-                      <div className="h-4 w-16 rounded bg-ods-skeleton" />
-                      <div className="h-3 w-8 rounded bg-ods-skeleton" />
+                      <UnifiedSkeleton className="h-4 w-16 rounded" animate={animate} />
+                      <UnifiedSkeleton className="h-3 w-8 rounded" animate={animate} />
                     </div>
                   </div>
                 ))}
@@ -97,12 +108,12 @@ export function MarginReportSkeleton({ animate = true, description, overlayConte
         </div>
 
         {/* Strategic Recommendations header placeholder */}
-        <div className="h-6 w-60 rounded bg-ods-skeleton" />
+        <UnifiedSkeleton className="h-6 w-60 rounded" animate={animate} />
 
         {/* Recommendations grid */}
         <div className="grid grid-cols-1 gap-6 content-md:grid-cols-2 content-lg:grid-cols-3">
           {Array.from({ length: 3 }).map((_, i) => (
-            <div key={i} className="h-48 rounded border border-ods-border bg-ods-card" />
+            <UnifiedSkeleton key={i} className="h-48 rounded border border-ods-border" animate={animate} />
           ))}
         </div>
 
@@ -111,17 +122,17 @@ export function MarginReportSkeleton({ animate = true, description, overlayConte
           {/* Section header */}
           <div className="flex items-start gap-6">
             <div className="min-w-0 flex-1 space-y-2">
-              <div className="h-8 w-72 rounded bg-ods-skeleton" />
-              <div className="h-4 w-3/4 rounded bg-ods-skeleton" />
+              <UnifiedSkeleton className="h-8 w-72 rounded" animate={animate} />
+              <UnifiedSkeleton className="h-4 w-3/4 rounded" animate={animate} />
             </div>
             {/* Logo placeholder */}
-            <div className="h-12 w-12 shrink-0 rounded-md bg-ods-skeleton" />
+            <UnifiedSkeleton className="h-12 w-12 shrink-0 rounded-md" animate={animate} />
           </div>
 
           {/* Value cards grid */}
           <div className="grid grid-cols-1 gap-6 content-md:grid-cols-2 content-lg:grid-cols-3">
             {Array.from({ length: 3 }).map((_, i) => (
-              <div key={i} className="h-32 rounded border border-ods-border bg-ods-card" />
+              <UnifiedSkeleton key={i} className="h-32 rounded border border-ods-border" animate={animate} />
             ))}
           </div>
         </div>
@@ -137,6 +148,6 @@ export function MarginReportSkeleton({ animate = true, description, overlayConte
           </div>
         </div>
       )}
-    </main>
+    </LoadingRegion>
   );
 }