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

package/src/components/navigation/navigation-sidebar-item.tsx

@@ -4,6 +4,7 @@ import { cloneElement, memo, type ReactElement, type ReactNode, type MouseEvent
 import Link from '../../embed-shims/next-link';
 import type { NavigationSidebarItem } from '../../types/navigation';
 import { cn } from '../../utils';
+import { UnifiedSkeleton } from '../loading/unified-skeleton';
 import { NavigationItemBadge } from './navigation-item-badge';
 import { UnreadDot } from './unread-dot';
 
@@ -164,9 +165,9 @@ export function NavigationSidebarItemSkeleton({ showLabel }: { showLabel: boolea
   return (
     <div className="flex h-14 w-full items-center justify-start p-[var(--spacing-system-m)]" aria-hidden="true">
       <div className="relative flex flex-shrink-0 items-center justify-center">
-        <div className="h-6 w-6 animate-pulse rounded bg-ods-border" />
+        <UnifiedSkeleton className="h-6 w-6 rounded" />
       </div>
-      {showLabel && <div className="ml-[var(--spacing-system-xs)] h-4 flex-1 animate-pulse rounded bg-ods-border" />}
+      {showLabel && <UnifiedSkeleton className="ml-[var(--spacing-system-xs)] h-4 flex-1 rounded" />}
     </div>
   );
 }

package/src/components/onboarding-guides/onboarding-guides-catalog-skeleton.tsx

@@ -1,6 +1,8 @@
 'use client';
 
 import { OnboardingGuideCardSkeleton } from '../chat/entity-cards/onboarding-guide-card';
+import { LoadingRegion } from '../loading/loading-region';
+import { UnifiedSkeleton } from '../loading/unified-skeleton';
 
 /**
  * Loading skeleton for `/onboarding-guides` — CHROME-LESS, exactly like the
@@ -17,28 +19,33 @@ import { OnboardingGuideCardSkeleton } from '../chat/entity-cards/onboarding-gui
  * Wrapper mirrors the loaded view's `w-full flex flex-col gap-10`; per-card
  * height matches the loaded catalog card so resolve shifts are zero.
  */
-export function OnboardingGuidesCatalogSkeleton() {
+export function OnboardingGuidesCatalogSkeleton({
+  region = true,
+}: {
+  /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
+  region?: boolean;
+} = {}) {
   return (
-    <div className="flex w-full animate-pulse flex-col gap-10">
+    <LoadingRegion label="Loading onboarding guides" announce={region} className="flex w-full flex-col gap-10">
       {/* Search input placeholder — matches `<SearchInput>` h-12 — plus the
           section pill row (~74 px incl. padding), same as the loaded
           preControls block. */}
       <div className="space-y-4">
-        <div className="h-12 w-full rounded-md border border-ods-border bg-ods-card" />
+        <UnifiedSkeleton className="h-12 w-full rounded-md" />
         <div className="flex flex-wrap items-center gap-3 rounded-lg border border-ods-border bg-ods-card p-4">
-          <div className="h-4 w-14 rounded bg-ods-border/60" />
+          <UnifiedSkeleton className="h-4 w-14 rounded" />
           {[0, 1, 2, 3].map(i => (
-            <div key={i} className="h-10 w-24 rounded-md border border-ods-border bg-ods-card" />
+            <UnifiedSkeleton key={i} className="h-10 w-24 rounded-md" />
           ))}
         </div>
       </div>
       <div className="space-y-10">
         {[4, 3, 3].map((cardCount, sectionIdx) => (
           <section key={sectionIdx} className="space-y-4">
-            <h2 className="flex items-center gap-2 tracking-[-0.36px] text-ods-text-primary text-h3">
-              <span className="h-6 w-40 rounded bg-ods-border/70" />
-              <span className="h-5 w-8 rounded-full bg-ods-text-secondary/20" />
-            </h2>
+            <div className="flex items-center gap-2 tracking-[-0.36px] text-ods-text-primary text-h3">
+              <UnifiedSkeleton className="h-6 w-40 rounded" />
+              <UnifiedSkeleton className="h-5 w-8 rounded-full" />
+            </div>
             <ul className="flex flex-col gap-4">
               {Array.from({ length: cardCount }).map((_, cardIdx) => (
                 <li key={cardIdx}>
@@ -49,6 +56,6 @@ export function OnboardingGuidesCatalogSkeleton() {
           </section>
         ))}
       </div>
-    </div>
+    </LoadingRegion>
   );
 }

package/src/components/product-demo/product-screen.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import { lazy, type LazyExoticComponent, Suspense } from 'react';
+import { UnifiedSkeleton } from '../loading/unified-skeleton';
 import { ProductScreenFrame, type ProductScreenFrameProps } from '../ui/product-screen-frame';
-import { Skeleton } from '../ui/skeleton';
 import { PRODUCT_SCREEN_LOADERS } from './registry';
 import { PRODUCT_SCREEN_KEYS, PRODUCT_SCREEN_LABELS, type ProductScreenKey } from './screen-keys';
 import type { ProductScreenComponent } from './types';
@@ -59,9 +59,9 @@ export function ProductScreenSkeleton({
   className,
 }: Pick<ProductScreenProps, 'compact' | 'height' | 'className'>) {
   return (
-    <Skeleton
+    <UnifiedSkeleton
       className={className}
-      style={{ height: height ?? (compact ? PRODUCT_SCREEN_COMPACT_HEIGHT : PRODUCT_SCREEN_HEIGHT) }}
+      height={height ?? (compact ? PRODUCT_SCREEN_COMPACT_HEIGHT : PRODUCT_SCREEN_HEIGHT)}
     />
   );
 }
@@ -88,7 +88,7 @@ export function ProductScreen({ screen, compact = false, label, height, designWi
       label={label ?? PRODUCT_SCREEN_LABELS[screen]}
       height={frameHeight}
     >
-      <Suspense fallback={<Skeleton className="h-full w-full" />}>
+      <Suspense fallback={<UnifiedSkeleton className="h-full w-full" />}>
         <Screen compact={compact} />
       </Suspense>
     </ProductScreenFrame>

package/src/components/profile/ProfileLoadingSkeleton.tsx

@@ -1,27 +1,31 @@
 import { cn } from '../../utils/cn';
+import { LoadingRegion } from '../loading/loading-region';
+import { UnifiedSkeleton } from '../loading/unified-skeleton';
 
 interface ProfileLoadingSkeletonProps {
+  /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
+  region?: boolean;
   className?: string;
 }
 
-export function ProfileLoadingSkeleton({ className }: ProfileLoadingSkeletonProps) {
+export function ProfileLoadingSkeleton({ region = true, className }: ProfileLoadingSkeletonProps) {
   return (
-    <div className={cn('space-y-6', className)}>
+    <LoadingRegion label="Loading the profile" announce={region} className={cn('space-y-6', className)}>
       {/* Header skeleton */}
       <div className="flex items-center space-x-4">
-        <div className="h-16 w-16 animate-pulse rounded-full bg-ods-skeleton" />
+        <UnifiedSkeleton className="h-16 w-16 rounded-full" />
         <div className="space-y-2">
-          <div className="h-4 w-32 animate-pulse rounded bg-ods-skeleton" />
-          <div className="h-3 w-24 animate-pulse rounded bg-ods-skeleton" />
+          <UnifiedSkeleton className="h-4 w-32 rounded" />
+          <UnifiedSkeleton className="h-3 w-24 rounded" />
         </div>
       </div>
 
       {/* Content skeleton */}
       <div className="space-y-4">
-        <div className="h-4 w-full animate-pulse rounded bg-ods-skeleton" />
-        <div className="h-4 w-3/4 animate-pulse rounded bg-ods-skeleton" />
-        <div className="h-4 w-1/2 animate-pulse rounded bg-ods-skeleton" />
+        <UnifiedSkeleton className="h-4 w-full rounded" />
+        <UnifiedSkeleton className="h-4 w-3/4 rounded" />
+        <UnifiedSkeleton className="h-4 w-1/2 rounded" />
       </div>
-    </div>
+    </LoadingRegion>
   );
 }

package/src/components/related-content/related-content-section.tsx

@@ -66,6 +66,7 @@ import { buildSuggestionUrl } from '../../utils/suggestion-url';
 import type { ChatCardDispatchExtras } from '../chat/entity-cards/dispatch';
 import { decideNewTab } from '../chat/utils/decide-new-tab';
 import { accentSentenceMarks } from '../layout/page-heading';
+import { LoadingRegion } from '../loading/loading-region';
 import { Pagination } from '../pagination';
 // The per-type card dispatch — one registry entry per content type, each
 // carrying its OWN row type — plus the DEEP card imports that keep this
@@ -361,7 +362,7 @@ function ContentGroup({
       <div key={r.id}>{renderSkeletonForType(type, cardSize, adminCampaignCard)}</div>
     ));
     return (
-      <div className="space-y-4">
+      <LoadingRegion label="Loading related content" className="space-y-4">
         {heading}
         {isListLayout ? (
           <div className="space-y-4">{skeletons}</div>
@@ -369,7 +370,7 @@ function ContentGroup({
           <div className={gridClassFor(columns)}>{skeletons}</div>
         )}
         {groupPagination}
-      </div>
+      </LoadingRegion>
     );
   }
 
@@ -652,14 +653,14 @@ export function RelatedContentSection({
     if (isLoading) {
       const skeletonType = includeTypes?.[0] ?? entityType ?? 'blog_post_existing';
       return (
-        <div className="space-y-8">
+        <LoadingRegion label="Loading related content" className="space-y-8">
           <h2 className="text-ods-text-primary text-h2">{accentSentenceMarks(title)}</h2>
           <div className={gridClassFor(columns)}>
             {Array.from({ length: 3 }).map((_, i) => (
               <div key={i}>{renderSkeletonForType(skeletonType, 'default', adminCampaignCard)}</div>
             ))}
           </div>
-        </div>
+        </LoadingRegion>
       );
     }
     return (

package/src/components/shared/delivery/delivery-table.tsx

@@ -20,6 +20,7 @@
 import type { DeliveryItem } from '../../../types/delivery';
 import { devSectionAnchorId } from '../../../utils/dev-sections/dev-section-param-keys';
 import { CONTENT_CARD_SKELETON_FRAME_CLASS } from '../../chat/entity-cards/content-card-frame';
+import { UnifiedSkeleton } from '../../loading/unified-skeleton';
 import { DeliveryRow } from './delivery-row';
 
 interface DeliveryTableProps {
@@ -38,26 +39,26 @@ function SkeletonRow() {
         <div className="flex w-full min-w-0 flex-1 flex-col gap-[12px] content-md:w-auto content-md:gap-[16px]">
           {/* Title skeleton - responsive */}
           <div className="flex min-h-[24px] items-center">
-            <div className="h-[20px] w-full animate-pulse rounded bg-ods-border"></div>
+            <UnifiedSkeleton className="h-[20px] w-full rounded" />
           </div>
           {/* Subtitle skeleton - 1 line */}
           <div className="flex min-h-[20px] items-center">
-            <div className="h-[20px] w-1/2 animate-pulse rounded bg-ods-border"></div>
+            <UnifiedSkeleton className="h-[20px] w-1/2 rounded" />
           </div>
           {/* Description skeleton - 3 lines */}
           <div className="flex min-h-[72px] items-center">
             <div className="flex-1 space-y-1">
-              <div className="h-[20px] w-full animate-pulse rounded bg-ods-border"></div>
-              <div className="h-[20px] w-full animate-pulse rounded bg-ods-border"></div>
-              <div className="h-[20px] w-2/3 animate-pulse rounded bg-ods-border"></div>
+              <UnifiedSkeleton className="h-[20px] w-full rounded" />
+              <UnifiedSkeleton className="h-[20px] w-full rounded" />
+              <UnifiedSkeleton className="h-[20px] w-2/3 rounded" />
             </div>
           </div>
         </div>
 
         {/* Right: Badge skeleton - two stacked badges */}
         <div className="flex flex-shrink-0 flex-col gap-2 self-start">
-          <div className="h-[32px] w-[100px] animate-pulse rounded bg-ods-border"></div>
-          <div className="h-[32px] w-[120px] animate-pulse rounded bg-ods-border"></div>
+          <UnifiedSkeleton className="h-[32px] w-[100px] rounded" />
+          <UnifiedSkeleton className="h-[32px] w-[120px] rounded" />
         </div>
       </div>
     </div>

package/src/components/shared/detail-page-skeleton.tsx

@@ -1,6 +1,8 @@
 'use client';
 
 import { PageLayout } from '../layout/page-layout';
+import { LoadingRegion } from '../loading/loading-region';
+import { UnifiedSkeleton } from '../loading/unified-skeleton';
 
 export interface DetailPageSkeletonProps {
   metadataColumns?: number; // Number of metadata grid columns (default 4)
@@ -10,25 +12,31 @@ export interface DetailPageSkeletonProps {
    *  matches the loaded page's width, padding, and min-height. Default false
    *  (self-contained `<PageLayout>` at the hub article width). */
   bare?: boolean;
+  /** What is loading, read once by a screen reader. Default "Loading". */
+  label?: string;
+  /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
+  region?: boolean;
 }
 
 export function DetailPageSkeleton({
   metadataColumns = 4,
   showImageGallery = true,
   bare = false,
+  label = 'Loading',
+  region = true,
 }: DetailPageSkeletonProps = {}) {
   const content = (
-    <div className="animate-pulse space-y-6 content-md:space-y-10">
+    <LoadingRegion label={label} announce={region} className="space-y-6 content-md:space-y-10">
       {/* Title Block */}
       <div className="flex w-full flex-col gap-6">
-        <div className="h-16 w-full max-w-3xl rounded bg-ods-card content-md:h-20"></div>
+        <UnifiedSkeleton className="h-16 w-full max-w-3xl rounded content-md:h-20" />
       </div>
 
       {/* Category Tags Skeleton */}
       <div className="flex w-full flex-wrap gap-2">
-        <div className="h-8 w-32 rounded bg-ods-card"></div>
-        <div className="h-8 w-28 rounded bg-ods-card"></div>
-        <div className="h-8 w-36 rounded bg-ods-card"></div>
+        <UnifiedSkeleton className="h-8 w-32 rounded" />
+        <UnifiedSkeleton className="h-8 w-28 rounded" />
+        <UnifiedSkeleton className="h-8 w-36 rounded" />
       </div>
 
       {/* Metadata Grid Skeleton */}
@@ -40,8 +48,8 @@ export function DetailPageSkeleton({
             key={i}
             className="border-b border-ods-border bg-ods-card p-4 last:border-r-0 content-md:border-b-0 content-md:border-r"
           >
-            <div className="mb-2 h-6 w-24 rounded bg-ods-border"></div>
-            <div className="h-5 w-20 rounded bg-ods-border"></div>
+            <UnifiedSkeleton className="mb-2 h-6 w-24 rounded" />
+            <UnifiedSkeleton className="h-5 w-20 rounded" />
           </div>
         ))}
       </div>
@@ -50,26 +58,26 @@ export function DetailPageSkeleton({
       {showImageGallery && (
         <div className="flex w-full gap-6 overflow-x-auto">
           {[1, 2, 3, 4, 5].map(i => (
-            <div key={i} className="h-[200px] w-[240px] shrink-0 rounded-md border border-ods-border bg-ods-card"></div>
+            <UnifiedSkeleton key={i} className="h-[200px] w-[240px] shrink-0 rounded-md border border-ods-border" />
           ))}
         </div>
       )}
 
       {/* Featured Image Skeleton (for case studies) */}
-      {!showImageGallery && <div className="aspect-[2560/1366] w-full rounded-md bg-ods-card"></div>}
+      {!showImageGallery && <UnifiedSkeleton className="aspect-[2560/1366] w-full rounded-md" />}
 
       {/* Content Sections Skeleton */}
       {[1, 2, 3].map(section => (
         <div key={section} className="space-y-6">
-          <div className="h-16 w-64 rounded bg-ods-card"></div>
+          <UnifiedSkeleton className="h-16 w-64 rounded" />
           <div className="space-y-3">
-            <div className="h-6 w-full rounded bg-ods-card"></div>
-            <div className="h-6 w-full rounded bg-ods-card"></div>
-            <div className="h-6 w-4/5 rounded bg-ods-card"></div>
+            <UnifiedSkeleton className="h-6 w-full rounded" />
+            <UnifiedSkeleton className="h-6 w-full rounded" />
+            <UnifiedSkeleton className="h-6 w-4/5 rounded" />
           </div>
         </div>
       ))}
-    </div>
+    </LoadingRegion>
   );
   if (bare) return content;
   return (

package/src/components/shared/dev-section/dev-card-row.tsx

@@ -26,6 +26,8 @@
  */
 
 import type { ReactNode } from 'react';
+import { LoadingRegion } from '../../loading/loading-region';
+import { UnifiedSkeleton } from '../../loading/unified-skeleton';
 
 export interface DevCardRowContentProps {
   title: string;
@@ -78,22 +80,22 @@ export function DevCardRowSkeleton() {
       <div className="flex w-full flex-col items-start justify-between gap-[12px] content-md:flex-row content-md:gap-[16px]">
         <div className="flex w-full min-w-0 flex-1 flex-col gap-[12px] content-md:w-auto content-md:gap-[16px]">
           <div className="flex min-h-[24px] items-center">
-            <div className="h-[20px] w-full animate-pulse rounded bg-ods-border" />
+            <UnifiedSkeleton className="h-[20px] w-full rounded" />
           </div>
           <div className="flex min-h-[20px] items-center">
-            <div className="h-[20px] w-1/2 animate-pulse rounded bg-ods-border" />
+            <UnifiedSkeleton className="h-[20px] w-1/2 rounded" />
           </div>
           <div className="flex min-h-[72px] items-center">
             <div className="flex-1 space-y-1">
-              <div className="h-[20px] w-full animate-pulse rounded bg-ods-border" />
-              <div className="h-[20px] w-full animate-pulse rounded bg-ods-border" />
-              <div className="h-[20px] w-2/3 animate-pulse rounded bg-ods-border" />
+              <UnifiedSkeleton className="h-[20px] w-full rounded" />
+              <UnifiedSkeleton className="h-[20px] w-full rounded" />
+              <UnifiedSkeleton className="h-[20px] w-2/3 rounded" />
             </div>
           </div>
         </div>
         <div className="flex flex-shrink-0 flex-col gap-2 self-start">
-          <div className="h-[32px] w-[100px] animate-pulse rounded bg-ods-border" />
-          <div className="h-[32px] w-[120px] animate-pulse rounded bg-ods-border" />
+          <UnifiedSkeleton className="h-[32px] w-[100px] rounded" />
+          <UnifiedSkeleton className="h-[32px] w-[120px] rounded" />
         </div>
       </div>
     </div>
@@ -105,12 +107,23 @@ export function DevCardRowSkeleton() {
  * used by every list shell. Both delivery (`delivery-table.tsx`) and
  * tickets (`tickets-list.tsx`) mount this directly.
  */
-export function DevCardRowSkeletonList({ rows = 5 }: { rows?: number }) {
+export function DevCardRowSkeletonList({
+  region = true,
+  rows = 5,
+}: {
+  /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
+  region?: boolean;
+  rows?: number;
+}) {
   return (
-    <div className="w-full overflow-hidden rounded-[6px] border border-ods-border bg-ods-card">
+    <LoadingRegion
+      label="Loading"
+      announce={region}
+      className="w-full overflow-hidden rounded-[6px] border border-ods-border bg-ods-card"
+    >
       {Array.from({ length: rows }, (_, i) => (
         <DevCardRowSkeleton key={i} />
       ))}
-    </div>
+    </LoadingRegion>
   );
 }

package/src/components/shared/legal-document/legal-document-page.tsx

@@ -22,6 +22,7 @@ import Link from '../../../embed-shims/next-link';
 import { useRouter } from '../../../embed-shims/next-navigation';
 import { formatLegalDate } from '../../../utils/format';
 import { FaqSection, pageFaqProps, type PageFaqSlot } from '../../faq/faq-section';
+import { UnifiedSkeleton } from '../../loading/unified-skeleton';
 import { PageShell, PageLayout } from '../../ui';
 import { RichMarkdownRenderer } from '../../ui/markdown';
 import { useLegalDocs, type LegalDocument } from './use-legal-docs';
@@ -161,16 +162,16 @@ export function LegalDocumentPage({
               {isLoading ? (
                 // Loading skeleton matching Knowledge Hub pattern
                 <div className="space-y-6">
-                  <div className="h-10 w-3/4 animate-pulse rounded-lg bg-ods-skeleton"></div>
+                  <UnifiedSkeleton className="h-10 w-3/4 rounded-lg" />
                   <div className="space-y-4">
-                    <div className="h-4 w-full animate-pulse rounded bg-ods-skeleton"></div>
-                    <div className="h-4 w-full animate-pulse rounded bg-ods-skeleton"></div>
-                    <div className="h-4 w-5/6 animate-pulse rounded bg-ods-skeleton"></div>
+                    <UnifiedSkeleton className="h-4 w-full rounded" />
+                    <UnifiedSkeleton className="h-4 w-full rounded" />
+                    <UnifiedSkeleton className="h-4 w-5/6 rounded" />
                   </div>
-                  <div className="h-32 animate-pulse rounded-lg border border-ods-border bg-ods-card"></div>
+                  <UnifiedSkeleton className="h-32 rounded-lg border border-ods-border" />
                   <div className="space-y-4">
-                    <div className="h-4 w-full animate-pulse rounded bg-ods-skeleton"></div>
-                    <div className="h-4 w-4/5 animate-pulse rounded bg-ods-skeleton"></div>
+                    <UnifiedSkeleton className="h-4 w-full rounded" />
+                    <UnifiedSkeleton className="h-4 w-4/5 rounded" />
                   </div>
                 </div>
               ) : error ? (

package/src/components/shared/onboarding/onboarding-step-card.tsx

@@ -2,6 +2,7 @@
 
 import React from 'react';
 import { cn } from '../../../utils/cn';
+import { UnifiedSkeleton } from '../../loading/unified-skeleton';
 import { Button } from '../../ui/button';
 import { InteractiveCard } from '../../ui/interactive-card';
 import { StatusBadge } from '../../ui/status-badge';
@@ -81,8 +82,8 @@ export function OnboardingStepCard({
       >
         {isCheckingCompletion ? (
           <>
-            <div className="h-[32px] w-[100px] animate-pulse rounded-[6px] bg-ods-border" />
-            <div className="h-[32px] w-[120px] animate-pulse rounded-[6px] bg-ods-border" />
+            <UnifiedSkeleton className="h-[32px] w-[100px] rounded-[6px]" />
+            <UnifiedSkeleton className="h-[32px] w-[120px] rounded-[6px]" />
           </>
         ) : isCompleted ? (
           <>

package/src/components/shared/onboarding/onboarding-walkthrough.tsx

@@ -4,6 +4,7 @@ import React, { useRef, useCallback } from 'react';
 import { useOnboardingState, type OnboardingStepConfig } from '../../../hooks/ui/use-onboarding-state';
 import { cn } from '../../../utils/cn';
 import { accentSentenceMarks, SECTION_HEADING_CLASS } from '../../layout/page-heading';
+import { UnifiedSkeleton } from '../../loading/unified-skeleton';
 import { Button } from '../../ui/button';
 import { OnboardingStepCard } from './onboarding-step-card';
 
@@ -194,7 +195,7 @@ export function OnboardingWalkthrough({
         <h2 className={SECTION_HEADING_CLASS}>{accentSentenceMarks(title)}</h2>
 
         {isLoadingCompletion ? (
-          <div className="h-[48px] w-full animate-pulse rounded-[6px] bg-ods-border md:w-[160px]" />
+          <UnifiedSkeleton className="h-[48px] w-full rounded-[6px] md:w-[160px]" />
         ) : isAllComplete ? (
           <Button variant="accent" onClick={handleDismiss} className="w-full md:w-auto">
             Close Onboarding

package/src/components/shared/product-release/index.ts

@@ -28,4 +28,3 @@ export {
 // keeps resolving (hub's components/releases/release-detail-page.tsx
 // imports it through this barrel).
 export type { DeliveryResponse } from '../../../types/delivery';
-export { ReleaseDetailSkeleton } from './release-detail-skeleton';

package/src/components/shared/product-release/product-release-card-skeleton.tsx

@@ -2,6 +2,7 @@
 
 import { cn } from '../../../utils/cn';
 import { CONTENT_CARD_SKELETON_FRAME_CLASS } from '../../chat/entity-cards/content-card-frame';
+import { UnifiedSkeleton } from '../../loading/unified-skeleton';
 
 export interface ProductReleaseCardSkeletonProps {
   /** Additional CSS classes */
@@ -23,8 +24,8 @@ export function ProductReleaseCardSkeleton({ className, size = 'lg' }: ProductRe
   // skeleton's shape matches exactly with zero load-to-resolve reflow.
   if (size === 'lg') {
     return (
-      <div className={cn(CONTENT_CARD_SKELETON_FRAME_CLASS, 'flex flex-col gap-4 p-6', 'animate-pulse', className)}>
-        {/* HERO: placeholders are `bg-ods-border` bars on the page background.
+      <div className={cn(CONTENT_CARD_SKELETON_FRAME_CLASS, 'flex flex-col gap-4 p-6', className)}>
+        {/* HERO: placeholders are `UnifiedSkeleton` bars on the page background.
 
             CRITICAL: title + summary use the SAME min-h containers as
             the loaded card so total card height is byte-identical
@@ -32,30 +33,27 @@ export function ProductReleaseCardSkeleton({ className, size = 'lg' }: ProductRe
             individual placeholder heights underrun the loaded card's
             min-h reservations and the page jumps on resolve. */}
         <div className="flex flex-col gap-4 content-md:flex-row content-md:gap-6">
-          <div className="aspect-[1200/630] w-full flex-shrink-0 rounded-lg bg-ods-border content-md:w-[256px]" />
+          <UnifiedSkeleton className="aspect-[1200/630] w-full flex-shrink-0 rounded-lg content-md:w-[256px]" />
           <div className="flex min-w-0 flex-1 flex-col">
             {/* Version pill — mirrors `flex items-center gap-3 mb-3` in
                 the loaded card. The loaded `<span text-lg>` renders at
                 line-height 28 px (Tailwind text-lg = 18 px / 28 px LH);
                 placeholder uses `h-7` (28 px) to match exactly. */}
             <div className="mb-3 flex items-center gap-3">
-              <div className="h-7 w-20 rounded bg-ods-border" />
+              <UnifiedSkeleton className="h-7 w-20 rounded" />
             </div>
             {/* Title container — SAME min-h as the loaded card so the
                 card height contributed by this region matches exactly. */}
             <div className="mb-3 flex min-h-[60px] flex-col justify-start gap-1.5 content-md:min-h-[72px]">
-              <div className="h-[25px] w-3/4 rounded bg-ods-border content-md:h-[30px]" />
-              <div className="h-[25px] w-1/2 rounded bg-ods-border content-md:h-[30px]" />
+              <UnifiedSkeleton className="h-[25px] w-3/4 rounded content-md:h-[30px]" />
+              <UnifiedSkeleton className="h-[25px] w-1/2 rounded content-md:h-[30px]" />
             </div>
             {/* Summary container — SAME min-h as the loaded card. The
-                3 placeholder lines mirror the rendered 3-line clamp;
-                `bg-ods-border/70` keeps summary placeholders slightly
-                dimmer than title placeholders (primary vs secondary
-                text hierarchy). */}
+                3 placeholder lines mirror the rendered 3-line clamp. */}
             <div className="flex min-h-[68px] flex-col justify-start gap-2 content-md:min-h-[78px]">
-              <div className="h-3 w-full rounded bg-ods-border/70" />
-              <div className="h-3 w-11/12 rounded bg-ods-border/70" />
-              <div className="h-3 w-5/6 rounded bg-ods-border/70" />
+              <UnifiedSkeleton className="h-3 w-full rounded" />
+              <UnifiedSkeleton className="h-3 w-11/12 rounded" />
+              <UnifiedSkeleton className="h-3 w-5/6 rounded" />
             </div>
           </div>
         </div>
@@ -65,7 +63,7 @@ export function ProductReleaseCardSkeleton({ className, size = 'lg' }: ProductRe
             line-height (20 px) so total height is consistent with the
             loaded `border-t pt-3 + text content` (~32-33 px). */}
         <div className="border-t border-ods-border pt-3">
-          <div className="h-5 w-2/3 rounded bg-ods-border/70" />
+          <UnifiedSkeleton className="h-5 w-2/3 rounded" />
         </div>
 
         {/* METADATA GRID: 4-cell placeholder, the loaded cells' own boxes (no surface of
@@ -77,17 +75,17 @@ export function ProductReleaseCardSkeleton({ className, size = 'lg' }: ProductRe
               className="flex flex-col gap-3 border-b border-ods-border p-4 content-md:border-b-0 content-md:border-r"
             >
               <div className="flex flex-col gap-2">
-                <div className="h-7 w-24 rounded bg-ods-border" />
-                <div className="h-4 w-16 rounded bg-ods-border" />
+                <UnifiedSkeleton className="h-7 w-24 rounded" />
+                <UnifiedSkeleton className="h-4 w-16 rounded" />
               </div>
             </div>
           ))}
           {/* Author cell */}
           <div className="flex items-center gap-3 p-4">
-            <div className="h-10 w-10 shrink-0 rounded-full bg-ods-border" />
+            <UnifiedSkeleton className="h-10 w-10 shrink-0 rounded-full" />
             <div className="flex min-w-0 flex-1 flex-col gap-2">
-              <div className="h-5 w-3/4 rounded bg-ods-border" />
-              <div className="h-4 w-1/2 rounded bg-ods-border" />
+              <UnifiedSkeleton className="h-5 w-3/4 rounded" />
+              <UnifiedSkeleton className="h-4 w-1/2 rounded" />
             </div>
           </div>
         </div>
@@ -107,12 +105,12 @@ export function ProductReleaseCardSkeleton({ className, size = 'lg' }: ProductRe
     return (
       <span
         className={cn(
-          'my-1.5 flex w-full animate-pulse items-start gap-3',
+          'my-1.5 flex w-full items-start gap-3',
           'rounded-lg border border-ods-border bg-ods-card p-2',
           className,
         )}
       >
-        <span className="block aspect-square h-14 w-14 shrink-0 self-start rounded-md bg-ods-bg" />
+        <UnifiedSkeleton as="span" className="block aspect-square h-14 w-14 shrink-0 self-start rounded-md" />
         {/* Text column: 3 rows with FIXED heights matching the loaded
             card (h-5 title, h-4 + h-4 meta + summary). Skeleton bars
             sit centered inside each row container so a placeholder
@@ -120,14 +118,14 @@ export function ProductReleaseCardSkeleton({ className, size = 'lg' }: ProductRe
             on resolve. */}
         <span className="flex min-h-14 min-w-0 flex-1 flex-col gap-0.5">
           <span className="flex h-5 min-w-0 items-center gap-2">
-            <span className="h-3.5 w-3/5 rounded bg-ods-bg" />
-            <span className="h-4 w-12 shrink-0 rounded bg-ods-bg/70" />
+            <UnifiedSkeleton as="span" className="h-3.5 w-3/5 rounded" />
+            <UnifiedSkeleton as="span" className="h-4 w-12 shrink-0 rounded" />
           </span>
           <span className="flex h-4 min-w-0 items-center">
-            <span className="h-3 w-1/3 rounded bg-ods-bg/70" />
+            <UnifiedSkeleton as="span" className="h-3 w-1/3 rounded" />
           </span>
           <span className="flex h-4 min-w-0 items-center">
-            <span className="h-3 w-11/12 rounded bg-ods-bg/40" />
+            <UnifiedSkeleton as="span" className="h-3 w-11/12 rounded" />
           </span>
         </span>
       </span>

package/src/components/shared/product-release/product-releases-view.tsx

@@ -33,6 +33,7 @@ import { useEntityCardLink } from '../../chat/entity-cards/use-entity-card-link'
 import { isModifierClick } from '../../chat/utils/chat-nav-resolution';
 import { executeNavigationImperative } from '../../chat/utils/execute-navigation';
 import { ListEmptyState } from '../../list-empty-state';
+import { LoadingRegion } from '../../loading/loading-region';
 import { PersistentPaginationWrapper } from '../../persistent-pagination';
 import { LoadError } from '../../ui/error-state';
 import { ProductReleaseCard, type ProductReleaseCardProps } from './product-release-card';
@@ -209,7 +210,7 @@ export function ProductReleasesView({
           <>
             {/* ALWAYS render `itemsPerPage` slots — visibility toggles so the
                 list height is stable across loading ↔ loaded. */}
-            <div className="flex flex-col gap-6">
+            <LoadingRegion label="Loading releases" announce={isLoading} className="flex flex-col gap-6">
               {Array.from({ length: itemsPerPage }).map((_, i) => {
                 const release = releases[i];
                 const hasData = !!release;
@@ -228,7 +229,7 @@ export function ProductReleasesView({
                   </div>
                 );
               })}
-            </div>
+            </LoadingRegion>
 
             {/* Pagination — always present at the bottom for consistent spacing. */}
             <div className="mt-6 flex justify-center content-md:mt-8">