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

package/src/components/chat/entity-cards/program-card.tsx

@@ -38,6 +38,7 @@ import { isImageMedia } from '../../../utils/media-type';
 import { programMetaFormatters, programMetaLine } from '../../../utils/program-instant';
 import { PROGRAM_META_RENDERERS } from '../../../utils/program-meta-renderers';
 import { CardHoverPlay } from '../../features/video-center-badge';
+import { UnifiedSkeleton } from '../../loading/unified-skeleton';
 import { Button } from '../../ui/button/button';
 import { ImageGalleryModal } from '../../ui/image-gallery-modal';
 import { SquareAvatar } from '../../ui/square-avatar';
@@ -119,32 +120,32 @@ export function ProgramCardSkeleton({
   // that row's line height.
   if (size === 'row') {
     return (
-      <span className={cn(EDITORIAL_FRAME, EDITORIAL_ROW_GRID, 'animate-pulse')}>
-        <span className={cn(EDITORIAL_ROW_THUMB, 'bg-ods-border/20')} />
+      <span className={cn(EDITORIAL_FRAME, EDITORIAL_ROW_GRID)}>
+        <UnifiedSkeleton as="span" className={EDITORIAL_ROW_THUMB} />
         <span className={EDITORIAL_ROW_TEXT}>
-          <span className="block h-[2lh] w-full rounded bg-ods-border text-h3" />
+          <UnifiedSkeleton as="span" className="block h-[2lh] w-full rounded text-h3" />
           <span className={EDITORIAL_META_ROW}>
-            <span className="block h-[1lh] w-40 rounded bg-ods-border" />
+            <UnifiedSkeleton as="span" className="block h-[1lh] w-40 rounded" />
           </span>
-          <span className="block h-[2lh] w-full rounded bg-ods-border text-h6" />
+          <UnifiedSkeleton as="span" className="block h-[2lh] w-full rounded text-h6" />
         </span>
       </span>
     );
   }
   if (size === 'feature') {
     return (
-      <span className={cn(EDITORIAL_FRAME, 'flex animate-pulse flex-col')}>
-        <span className={cn(EDITORIAL_FEATURE_COVER, 'bg-ods-border/20')} />
+      <span className={cn(EDITORIAL_FRAME, 'flex flex-col')}>
+        <UnifiedSkeleton as="span" className={cn(EDITORIAL_FEATURE_COVER, 'rounded-none')} />
         <span className={EDITORIAL_FEATURE_BODY}>
-          {eyebrow && <span className="block h-[1lh] w-28 rounded bg-ods-border text-h5" />}
-          <span className="block h-[2lh] w-full rounded bg-ods-border text-h3" />
+          {eyebrow && <UnifiedSkeleton as="span" className="block h-[1lh] w-28 rounded text-h5" />}
+          <UnifiedSkeleton as="span" className="block h-[2lh] w-full rounded text-h3" />
           <span className={EDITORIAL_META_ROW}>
-            <span className="block h-[1lh] w-40 rounded bg-ods-border" />
+            <UnifiedSkeleton as="span" className="block h-[1lh] w-40 rounded" />
           </span>
-          <span className="block h-[3lh] w-full rounded bg-ods-border text-h4" />
+          <UnifiedSkeleton as="span" className="block h-[3lh] w-full rounded text-h4" />
           <span className={EDITORIAL_PERSON_ROW}>
-            <span className="block h-8 w-8 shrink-0 rounded-full bg-ods-border" />
-            <span className="block h-[1lh] w-40 rounded bg-ods-border text-h6" />
+            <UnifiedSkeleton as="span" className="block h-8 w-8 shrink-0 rounded-full" />
+            <UnifiedSkeleton as="span" className="block h-[1lh] w-40 rounded text-h6" />
           </span>
         </span>
       </span>
@@ -153,43 +154,43 @@ export function ProgramCardSkeleton({
   if (size === 'sm') {
     return (
       <span className={COMPACT_CARD_SKELETON_OUTER}>
-        <span className={COMPACT_CARD_SKELETON_IMAGE_SLOT} />
+        <UnifiedSkeleton as="span" className={COMPACT_CARD_SKELETON_IMAGE_SLOT} />
         <span className={COMPACT_CARD_TEXT_COL}>
           <span className={COMPACT_CARD_TITLE_ROW}>
-            <span className="h-3.5 w-3/5 rounded bg-ods-bg" />
+            <UnifiedSkeleton as="span" className="h-3.5 w-3/5 rounded" />
           </span>
           <span className={COMPACT_CARD_META_ROW_BOX}>
-            <span className="h-3 w-2/5 rounded bg-ods-bg/70" />
+            <UnifiedSkeleton as="span" className="h-3 w-2/5 rounded" />
           </span>
           <span className={COMPACT_CARD_META_ROW_BOX}>
-            <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 className="flex h-5 shrink-0 items-center self-start">
-          <span className="h-3.5 w-3.5 rounded bg-ods-bg" />
+          <UnifiedSkeleton as="span" className="h-3.5 w-3.5 rounded" />
         </span>
       </span>
     );
   }
   return (
-    <div className={cn(CONTENT_CARD_SKELETON_FRAME_CLASS, DEFAULT_BODY, 'animate-pulse')}>
+    <div className={cn(CONTENT_CARD_SKELETON_FRAME_CLASS, DEFAULT_BODY)}>
       <div className={DEFAULT_HEADER}>
-        <div className={`${DEFAULT_COVER_FRAME} bg-ods-border`} />
+        <UnifiedSkeleton className={DEFAULT_COVER_FRAME} />
         <div className={DEFAULT_TEXT}>
           <div className={DEFAULT_TITLE}>
-            <span className="block h-[2lh] w-3/4 rounded bg-ods-border" />
+            <UnifiedSkeleton as="span" className="block h-[2lh] w-3/4 rounded" />
           </div>
           <div className={DEFAULT_META_ROW}>
-            <span className="block h-[1lh] w-32 rounded bg-ods-border" />
-            <span className="block h-[1lh] w-40 rounded bg-ods-border" />
+            <UnifiedSkeleton as="span" className="block h-[1lh] w-32 rounded" />
+            <UnifiedSkeleton as="span" className="block h-[1lh] w-40 rounded" />
           </div>
           <div className={DEFAULT_DESCRIPTION}>
-            <span className="block h-[3lh] w-full rounded bg-ods-border" />
+            <UnifiedSkeleton as="span" className="block h-[3lh] w-full rounded" />
           </div>
           {tags && (
             <div className={DEFAULT_TAG_ROW}>
-              <span className="block h-8 w-24 rounded bg-ods-border" />
-              <span className="block h-8 w-24 rounded bg-ods-border" />
+              <UnifiedSkeleton as="span" className="block h-8 w-24 rounded" />
+              <UnifiedSkeleton as="span" className="block h-8 w-24 rounded" />
             </div>
           )}
         </div>
@@ -197,13 +198,13 @@ export function ProgramCardSkeleton({
       {media > 0 && (
         <div className={DEFAULT_GALLERY_ROW}>
           {Array.from({ length: media }, (_, i) => (
-            <div key={i} className={`${DEFAULT_GALLERY_THUMB} bg-ods-border`} />
+            <UnifiedSkeleton key={i} className={DEFAULT_GALLERY_THUMB} />
           ))}
         </div>
       )}
       <div className={DEFAULT_FOOTER}>
         {/* The action button's own height (44px, 48px from md). */}
-        <div className="h-11 w-40 rounded bg-ods-border md:h-12" />
+        <UnifiedSkeleton className="h-11 w-40 rounded md:h-12" />
       </div>
     </div>
   );

package/src/components/chat/entity-cards/roadmap-card.tsx

@@ -18,6 +18,7 @@ import { cn } from '../../../utils/cn';
 import { getProxiedImageUrl } from '../../../utils/image-proxy';
 import { ImageClassicIcon } from '../../icons-v2-generated/audio-and-visual/image-classic-icon';
 import { FigmaClassicIcon } from '../../icons-v2-generated/brand-logos/figma-classic-icon';
+import { UnifiedSkeleton } from '../../loading/unified-skeleton';
 import { AvatarStack, type AvatarStackPerson } from '../../ui/avatar-stack';
 import { Button } from '../../ui/button/button';
 import { ImageGalleryModal } from '../../ui/image-gallery-modal';
@@ -48,54 +49,52 @@ export function RoadmapCardSkeleton({ size = 'default' }: { size?: CardSize }) {
   if (size === 'sm') {
     return (
       <span className={COMPACT_CARD_SKELETON_OUTER}>
-        <span className="block aspect-square h-12 w-12 shrink-0 self-start rounded-md border border-ods-border bg-ods-bg p-1.5" />
+        <UnifiedSkeleton
+          as="span"
+          className="block aspect-square h-12 w-12 shrink-0 self-start rounded-md border border-ods-border p-1.5"
+        />
         <span className={COMPACT_CARD_TEXT_COL}>
           <span className={`${COMPACT_CARD_TITLE_ROW} flex-nowrap gap-2`}>
-            <span className="h-3.5 w-1/2 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-1/2 rounded" />
+            <UnifiedSkeleton as="span" className="h-4 w-12 shrink-0 rounded" />
           </span>
           <span className={`${COMPACT_CARD_META_ROW_BOX} flex-nowrap gap-2`}>
-            <span className="h-3 w-2/5 flex-1 rounded bg-ods-bg/60" />
-            <span className="h-3 w-10 shrink-0 rounded bg-ods-bg/40" />
+            <UnifiedSkeleton as="span" className="h-3 w-2/5 flex-1 rounded" />
+            <UnifiedSkeleton as="span" className="h-3 w-10 shrink-0 rounded" />
             {/* assignee-stack placeholder — mirrors the xs AvatarStack
                 slot so row width doesn't shift when assignees load */}
-            <span className="h-6 w-14 shrink-0 rounded-full bg-ods-bg/40" />
+            <UnifiedSkeleton as="span" className="h-6 w-14 shrink-0 rounded-full" />
           </span>
           <span className={COMPACT_CARD_META_ROW_BOX}>
-            <span className="h-3 w-5/6 rounded bg-ods-bg/40" />
+            <UnifiedSkeleton as="span" className="h-3 w-5/6 rounded" />
           </span>
         </span>
       </span>
     );
   }
   return (
-    <div
-      className={cn(
-        CONTENT_CARD_SKELETON_FRAME_CLASS,
-        'flex h-full animate-pulse flex-col gap-4 p-[var(--spacing-system-lf)]',
-      )}
-    >
+    <div className={cn(CONTENT_CARD_SKELETON_FRAME_CLASS, 'flex h-full flex-col gap-4 p-[var(--spacing-system-lf)]')}>
       <div className="flex items-center gap-4">
-        <div className="h-16 w-16 flex-shrink-0 rounded-lg bg-ods-border" />
+        <UnifiedSkeleton className="h-16 w-16 flex-shrink-0 rounded-lg" />
         <div className="flex-1 space-y-2">
-          <div className="h-5 w-3/4 rounded bg-ods-border" />
-          <div className="h-3 w-1/2 rounded bg-ods-border" />
+          <UnifiedSkeleton className="h-5 w-3/4 rounded" />
+          <UnifiedSkeleton className="h-3 w-1/2 rounded" />
         </div>
-        <div className="h-6 w-16 rounded bg-ods-border" />
+        <UnifiedSkeleton className="h-6 w-16 rounded" />
       </div>
       <div className="space-y-2">
-        <div className="h-3 w-full rounded bg-ods-border" />
-        <div className="h-3 w-5/6 rounded bg-ods-border" />
-        <div className="h-3 w-4/5 rounded bg-ods-border" />
+        <UnifiedSkeleton className="h-3 w-full rounded" />
+        <UnifiedSkeleton className="h-3 w-5/6 rounded" />
+        <UnifiedSkeleton className="h-3 w-4/5 rounded" />
       </div>
       <div className="flex-1" />
       <div className="flex items-center justify-between">
-        <div className="h-12 w-32 rounded bg-ods-border" />
+        <UnifiedSkeleton className="h-12 w-32 rounded" />
         <div className="flex items-center gap-2">
           {/* assignee-stack placeholder — matches the xs AvatarStack in
               the loaded card's action row */}
-          <div className="h-6 w-14 rounded-full bg-ods-border" />
-          <div className="h-8 w-20 rounded bg-ods-border" />
+          <UnifiedSkeleton className="h-6 w-14 rounded-full" />
+          <UnifiedSkeleton className="h-8 w-20 rounded" />
         </div>
       </div>
     </div>

package/src/components/chat/entity-cards/slack-message-card.tsx

@@ -14,6 +14,7 @@ import React from 'react';
 import Link from '../../../embed-shims/next-link';
 import { formatDateUTC as formatDate } from '../../../utils/format';
 import { SlackIcon } from '../../icons-v2-generated/brand-logos/slack-icon';
+import { UnifiedSkeleton } from '../../loading/unified-skeleton';
 import type { SlackMessageItem } from '../types/entities/slack-message';
 import {
   COMPACT_CARD_ICON_SLOT,
@@ -160,31 +161,31 @@ export function SlackMessageCardSkeleton({
 }) {
   if (variant === 'row') {
     return (
-      <div className={`flex min-w-0 animate-pulse items-center gap-3 ${className ?? ''}`}>
-        <div className="h-3.5 w-3.5 shrink-0 rounded bg-ods-bg" />
-        <div className="h-3 w-32 shrink-0 rounded bg-ods-bg" />
-        <div className="h-3 w-2/3 flex-1 rounded bg-ods-bg/60" />
-        <div className="h-3 w-24 shrink-0 rounded bg-ods-bg/60" />
-        <div className="h-3 w-20 shrink-0 rounded bg-ods-bg/60" />
+      <div className={`flex min-w-0 items-center gap-3 ${className ?? ''}`}>
+        <UnifiedSkeleton className="h-3.5 w-3.5 shrink-0 rounded" />
+        <UnifiedSkeleton className="h-3 w-32 shrink-0 rounded" />
+        <UnifiedSkeleton className="h-3 w-2/3 flex-1 rounded" />
+        <UnifiedSkeleton className="h-3 w-24 shrink-0 rounded" />
+        <UnifiedSkeleton className="h-3 w-20 shrink-0 rounded" />
       </div>
     );
   }
   return (
     <span className={`${COMPACT_CARD_SKELETON_OUTER} ${className ?? ''}`}>
-      <span className={COMPACT_CARD_SKELETON_IMAGE_SLOT} />
+      <UnifiedSkeleton as="span" className={COMPACT_CARD_SKELETON_IMAGE_SLOT} />
       <span className={COMPACT_CARD_TEXT_COL}>
         <span className={COMPACT_CARD_TITLE_ROW}>
-          <span className="h-3.5 w-2/3 rounded bg-ods-bg" />
+          <UnifiedSkeleton as="span" className="h-3.5 w-2/3 rounded" />
         </span>
         <span className={COMPACT_CARD_META_ROW_BOX}>
-          <span className="h-3 w-5/6 rounded bg-ods-bg/60" />
+          <UnifiedSkeleton as="span" className="h-3 w-5/6 rounded" />
         </span>
         <span className={COMPACT_CARD_META_ROW_BOX}>
-          <span className="h-3 w-1/3 rounded bg-ods-bg/70" />
+          <UnifiedSkeleton as="span" className="h-3 w-1/3 rounded" />
         </span>
       </span>
       <span className="flex h-5 shrink-0 items-center self-start">
-        <span className="h-3.5 w-3.5 rounded bg-ods-bg" />
+        <UnifiedSkeleton as="span" className="h-3.5 w-3.5 rounded" />
       </span>
     </span>
   );

package/src/components/chat/guide-welcome.tsx

@@ -4,8 +4,8 @@ import { type ReactNode, useMemo } from 'react';
 import { cn } from '../../utils/cn';
 import { AgentMark } from '../agent-mark';
 import { EntityIcon } from '../icon-display';
+import { UnifiedSkeleton } from '../loading/unified-skeleton';
 import { ScrollFadeOverlay, useScrollFade } from '../ui/scroll-fade';
-import { Skeleton } from '../ui/skeleton';
 import { accentFromIdentityIcon, type QuickActionAccent } from './quick-action-chip';
 import { QuickActionWall } from './quick-action-wall';
 
@@ -175,7 +175,7 @@ export function GuideWelcome({
                 <p className="text-ods-text-secondary text-h4">{subtitle}</p>
               ) : subtitleLoading ? (
                 <div className="flex w-full justify-center">
-                  <Skeleton className="h-5 w-3/4 max-w-80 rounded-sm" />
+                  <UnifiedSkeleton className="h-5 w-3/4 max-w-80 rounded-sm" />
                 </div>
               ) : null}
             </div>

package/src/components/chat/mingo-archive-list.tsx

@@ -3,6 +3,7 @@
 import { useEffect, useRef } from 'react';
 import { formatRelativeTime } from '../../utils/date-utils';
 import { BoxArchiveIcon } from '../icons-v2-generated';
+import { UnifiedSkeleton } from '../loading/unified-skeleton';
 import { SquareAvatar } from '../ui/square-avatar';
 import { ChatListEmptyState } from './chat-list-empty-state';
 import { ChatListItem } from './chat-nav-sidebar';
@@ -93,7 +94,7 @@ export function MingoArchiveList({
           </>
         ) : isLoading ? (
           Array.from({ length: 6 }, (_, i) => (
-            <div key={i} className="h-10 shrink-0 animate-pulse rounded-md bg-ods-skeleton" aria-hidden />
+            <UnifiedSkeleton key={i} aria-hidden className="h-10 shrink-0 rounded-md" />
           ))
         ) : (
           <ChatListEmptyState

package/src/components/chat/mingo-chat-history.tsx

@@ -3,6 +3,8 @@
 import { useState, useMemo, useRef, useEffect } from 'react';
 import { cn } from '../../utils/cn';
 import { Ellipsis01Icon, SearchXmarkIcon } from '../icons-v2-generated';
+import { LoadingRegion } from '../loading/loading-region';
+import { UnifiedSkeleton } from '../loading/unified-skeleton';
 import { ActionsMenuDropdown } from '../ui/actions-menu';
 import { Button } from '../ui/button';
 import { ScrollFadeOverlay, useScrollFade } from '../ui/scroll-fade';
@@ -250,22 +252,29 @@ function MingoChatHistoryRow({
  * above. Shown while the FIRST page of dialogs is in flight so the Mingo empty
  * state doesn't flash the new-user greeting+grid before the list arrives (the
  * two layouts are mutually exclusive — swapping between them mid-load reads as
- * a flicker). Pure ODS tokens, `animate-pulse`.
+ * a flicker). Built from `UnifiedSkeleton`.
  */
-export function MingoChatHistorySkeleton({ className }: { className?: string }) {
+export function MingoChatHistorySkeleton({
+  region = true,
+  className,
+}: {
+  /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
+  region?: boolean;
+  className?: string;
+}) {
   // Mirror the real grouped list exactly: a small group label, then a bordered
   // rounded container of `h-12` rows, each with a single title bar of varying
   // width (no unread-badge squares — the real rows currently never show one, so
-  // a badge placeholder would mis-promise the layout). `bg-ods-border` matches
-  // the kit's canonical `Skeleton` placeholder colour; `bg-ods-bg` rows read a
+  // a badge placeholder would mis-promise the layout). `bg-ods-bg` rows read a
   // touch darker than the `bg-ods-card` panel so the bars stay legible.
   const groups: ReadonlyArray<ReadonlyArray<string>> = [
     ['w-3/5', 'w-4/5', 'w-2/5', 'w-3/4'],
     ['w-1/2', 'w-2/3'],
   ];
   return (
-    <div
-      aria-hidden
+    <LoadingRegion
+      label="Loading conversations"
+      announce={region}
       // `overflow-hidden` clips the placeholder rows to the flex-1 box (the real
       // list scrolls; the skeleton just needs to stay within bounds).
       className={cn('flex min-h-0 flex-1 flex-col gap-[var(--spacing-system-m)] overflow-hidden', className)}
@@ -273,20 +282,20 @@ export function MingoChatHistorySkeleton({ className }: { className?: string })
       {groups.map((widths, g) => (
         <div key={g} className="flex shrink-0 flex-col gap-[var(--spacing-system-xxs)]">
           {/* Group label (Today / Older). */}
-          <div className="h-3 w-16 animate-pulse rounded bg-ods-border" />
+          <UnifiedSkeleton className="h-3 w-16 rounded" />
           <div className="overflow-hidden rounded-md border border-ods-border">
             {widths.map((w, i) => (
               <div
                 key={i}
                 className="flex h-12 items-center border-b border-ods-border bg-ods-bg px-[var(--spacing-system-s)] last:border-b-0"
               >
-                <div className={cn('h-4 animate-pulse rounded bg-ods-border', w)} />
+                <UnifiedSkeleton className={cn('h-4 rounded', w)} />
               </div>
             ))}
           </div>
         </div>
       ))}
-    </div>
+    </LoadingRegion>
   );
 }
 

package/src/components/chat/mingo-chat-rail.tsx

@@ -19,6 +19,7 @@ import {
   UserIcon,
   UsersIcon,
 } from '../icons-v2-generated';
+import { UnifiedSkeleton } from '../loading/unified-skeleton';
 import { ActionsMenuDropdown, type ActionsMenuItem } from '../ui/actions-menu';
 import { Button } from '../ui/button';
 import { chatDialogMenuItems } from './chat-dialog-menu-items';
@@ -209,7 +210,7 @@ export function MingoChatRail({
     );
   } else if (isLoadingHistory) {
     list = Array.from({ length: 6 }, (_, i) => (
-      <div key={i} className="h-10 shrink-0 animate-pulse rounded-md bg-ods-skeleton" aria-hidden />
+      <UnifiedSkeleton key={i} aria-hidden className="h-10 shrink-0 rounded-md" />
     ));
   } else if (dialogs.length === 0 && !draftTitle) {
     list = hasSearch ? (

package/src/components/chat/mingo-info-card.tsx

@@ -6,6 +6,7 @@ import Link from '../../embed-shims/next-link';
 import { cn } from '../../utils/cn';
 import { personInitials } from '../../utils/format';
 import { Ellipsis01Icon } from '../icons-v2-generated';
+import { UnifiedSkeleton } from '../loading/unified-skeleton';
 import { ActionsMenuDropdown, type ActionsMenuGroup } from '../ui/actions-menu';
 import { tagVariants, type TagProps } from '../ui/tag';
 
@@ -158,16 +159,16 @@ export function MingoInfoCardSkeleton({ className }: { className?: string }) {
   return (
     <span
       className={cn(
-        'flex w-full animate-pulse items-center gap-[var(--spacing-system-s)] overflow-hidden rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-s)]',
+        'flex w-full items-center gap-[var(--spacing-system-s)] overflow-hidden rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-s)]',
         className,
       )}
     >
-      <span className="block size-10 shrink-0 rounded-md border border-ods-border bg-ods-bg" />
+      <UnifiedSkeleton as="span" className="block size-10 shrink-0 rounded-md border border-ods-border" />
       <span className="flex min-w-0 flex-1 flex-col justify-center gap-1.5">
-        <span className="block h-4 w-1/2 rounded bg-ods-bg" />
-        <span className="block h-3 w-3/4 rounded bg-ods-bg/60" />
+        <UnifiedSkeleton as="span" className="block h-4 w-1/2 rounded" />
+        <UnifiedSkeleton as="span" className="block h-3 w-3/4 rounded" />
       </span>
-      <span className="block h-5 w-16 shrink-0 rounded bg-ods-bg/60" />
+      <UnifiedSkeleton as="span" className="block h-5 w-16 shrink-0 rounded" />
     </span>
   );
 }

package/src/components/chat/mingo-onboarding-card-skeleton.tsx

@@ -1,7 +1,8 @@
 'use client';
 
 import { cn } from '../../utils/cn';
-import { Skeleton } from '../ui/skeleton';
+import { LoadingRegion } from '../loading/loading-region';
+import { UnifiedSkeleton } from '../loading/unified-skeleton';
 
 export interface MingoOnboardingCardSkeletonProps {
   /** Title bar width — Tailwind width utility. Defaults to `w-32`. Vary
@@ -54,23 +55,23 @@ export function MingoOnboardingCardSkeleton({
       <div className="flex w-full flex-col gap-[var(--spacing-system-xxs)]">
         {/* Title row — icon + title bar + right-rail slash bar. */}
         <div className="flex w-full items-center gap-[var(--spacing-system-xxs)]">
-          <Skeleton className="size-4 shrink-0 rounded-sm" />
-          <Skeleton className={cn('h-3.5 rounded-sm', titleWidth)} />
+          <UnifiedSkeleton className="size-4 shrink-0 rounded-sm" />
+          <UnifiedSkeleton className={cn('h-3.5 rounded-sm', titleWidth)} />
           <span className="flex-1" />
-          <Skeleton className={cn('h-3.5 shrink-0 rounded-sm', slashWidth)} />
+          <UnifiedSkeleton className={cn('h-3.5 shrink-0 rounded-sm', slashWidth)} />
         </div>
         {/* Description — 1 or 2 lines; second line is 70% so the
          *  ragged edge mimics natural text wrapping. */}
         <div className="flex flex-col gap-[var(--spacing-system-xxs)]">
-          <Skeleton className="h-3.5 w-full rounded-sm" />
-          {descriptionLines === 2 ? <Skeleton className="h-3.5 w-[70%] rounded-sm" /> : null}
+          <UnifiedSkeleton className="h-3.5 w-full rounded-sm" />
+          {descriptionLines === 2 ? <UnifiedSkeleton className="h-3.5 w-[70%] rounded-sm" /> : null}
         </div>
         {/* Action chip row — `h-7` matches the live card's outline
          *  chips so the skeleton sits at exactly the same height. */}
         {hasChips ? (
           <div className="mt-[var(--spacing-system-xs)] flex flex-wrap items-center gap-[var(--spacing-system-xxs)]">
             {chipWidths.map((w, i) => (
-              <Skeleton key={i} className={cn('h-7 rounded-md', w)} />
+              <UnifiedSkeleton key={i} className={cn('h-7 rounded-md', w)} />
             ))}
           </div>
         ) : null}
@@ -80,6 +81,8 @@ export function MingoOnboardingCardSkeleton({
 }
 
 export interface MingoOnboardingListSkeletonProps {
+  /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
+  region?: boolean;
   /** Row count. Defaults to 6 — fills the typical empty-state
    *  viewport so the loader doesn't pop in shorter than the resolved
    *  list. */
@@ -120,12 +123,11 @@ const ROW_VARIANTS: ReadonlyArray<{
   { titleWidth: 'w-24', slashWidth: 'w-16', descriptionLines: 2 },
 ];
 
-export function MingoOnboardingListSkeleton({ rows = 6, className }: MingoOnboardingListSkeletonProps) {
+export function MingoOnboardingListSkeleton({ region = true, rows = 6, className }: MingoOnboardingListSkeletonProps) {
   return (
-    <div
-      role="status"
-      aria-label="Loading slash commands"
-      aria-busy="true"
+    <LoadingRegion
+      label="Loading slash commands"
+      announce={region}
       className={cn('overflow-hidden rounded-md border border-ods-border bg-ods-card', className)}
     >
       {Array.from({ length: rows }).map((_, i) => {
@@ -139,6 +141,6 @@ export function MingoOnboardingListSkeleton({ rows = 6, className }: MingoOnboar
           />
         );
       })}
-    </div>
+    </LoadingRegion>
   );
 }

package/src/components/chat/model-display.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import { cn } from '../../utils/cn';
 import { HoverCard, HoverCardContent, HoverCardTrigger } from '../hover-card';
 import { AnthropicLogoGreyIcon, GeminiLogoGreyIcon, OpenaiLogoGreyIcon } from '../icons-v2-generated';
-import { Skeleton } from '../ui/skeleton';
+import { UnifiedSkeleton } from '../loading/unified-skeleton';
 import { useChatAppearance } from './chat-appearance-context';
 import type { ModelDisplayProps, ModelUsageBreakdown } from './types';
 import { CHAT_APPEARANCE } from './types/chat.types';
@@ -185,11 +185,11 @@ const ModelDisplaySkeleton = React.forwardRef<HTMLDivElement, ModelDisplaySkelet
   ({ className, showTokens = false, ...props }, ref) => (
     <div ref={ref} aria-hidden className={cn('flex items-center gap-1 text-h6', className)} {...props}>
       {/* provider icon */}
-      <Skeleton className="h-5 w-4 shrink-0 rounded-sm" />
+      <UnifiedSkeleton className="h-5 w-4 shrink-0 rounded-sm" />
       {/* model name */}
-      <Skeleton className="h-5 w-24" />
+      <UnifiedSkeleton className="h-5 w-24" />
       {/* "X / Y tokens used" tail — only when tokens are expected */}
-      {showTokens && <Skeleton className="ml-auto h-3 w-32" />}
+      {showTokens && <UnifiedSkeleton className="ml-auto h-3 w-32" />}
     </div>
   ),
 );

package/src/components/chat/msp-organization-card-skeleton.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { cn } from '../../utils/cn';
-import { Skeleton } from '../ui/skeleton';
+import { UnifiedSkeleton } from '../loading/unified-skeleton';
 
 export interface MspOrganizationCardSkeletonProps {
   /** Appended to the root element. */
@@ -22,12 +22,12 @@ export function MspOrganizationCardSkeleton({ className }: MspOrganizationCardSk
         className,
       )}
     >
-      <Skeleton className="size-12 shrink-0 rounded-md" />
+      <UnifiedSkeleton className="size-12 shrink-0 rounded-md" />
       <div className="flex min-w-0 flex-1 flex-col justify-center gap-2 self-stretch">
-        <Skeleton className="h-5 w-3/5 rounded-md" />
-        <Skeleton className="h-4 w-2/5 rounded-md" />
+        <UnifiedSkeleton className="h-5 w-3/5 rounded-md" />
+        <UnifiedSkeleton className="h-4 w-2/5 rounded-md" />
       </div>
-      <Skeleton className="size-12 shrink-0 rounded-md" />
+      <UnifiedSkeleton className="size-12 shrink-0 rounded-md" />
     </div>
   );
 }

package/src/components/chat/quick-action-chip.tsx

@@ -1,8 +1,9 @@
 'use client';
 
-import { type CSSProperties, type ReactNode, isValidElement } from 'react';
+import { type ReactNode, isValidElement } from 'react';
 import { cn } from '../../utils/cn';
 import { EntityIcon, type EntityIconValue } from '../icon-display';
+import { UnifiedSkeleton } from '../loading/unified-skeleton';
 import { Tag } from '../ui/tag';
 
 // =============================================================================
@@ -201,18 +202,11 @@ export interface QuickActionChipSkeletonProps {
   className?: string;
 }
 
-/** Pulse bar inside the chip skeleton — the standard `ui/skeleton` treatment
- *  (`animate-pulse bg-ods-border`), as a SPAN so it stays valid phrasing
- *  content inside the Tag's label span. */
-function ChipSkelBar({ className, style }: { className?: string; style?: CSSProperties }) {
-  return <span aria-hidden className={cn('animate-pulse rounded-md bg-ods-border', className)} style={style} />;
-}
-
 /**
  * Loading placeholder for {@link QuickActionChipButton} — renders the REAL
- * `Tag` (same height, padding, border, radius, icon box) with standard
- * skeleton pulse bars (identical animation + token as `ui/skeleton`) in the
- * icon/lozenge/label slots, so a skeleton chip is 1:1 with a loaded chip by
+ * `Tag` (same height, padding, border, radius, icon box) with `UnifiedSkeleton`
+ * bars (as spans, so they stay valid phrasing content inside the Tag's label
+ * span) in the icon/lozenge/label slots, so a skeleton chip is 1:1 with a loaded chip by
  * construction. Use anywhere quick actions stream in (chat empty states,
  * marketing walls, deck panels).
  */
@@ -231,12 +225,21 @@ export function QuickActionChipSkeleton({
       size={question ? 'sentence' : size}
       className={cn(question && 'max-w-full', className)}
       icon={
-        icon && !question ? <ChipSkelBar className={size === 'large' ? 'block size-5' : 'block size-4'} /> : undefined
+        icon && !question ? (
+          <UnifiedSkeleton as="span" aria-hidden className={size === 'large' ? 'block size-5' : 'block size-4'} />
+        ) : undefined
       }
       label={
         <>
-          {lozenge && <ChipSkelBar className="mr-2 inline-block h-[16px] w-[26px] translate-y-[2px]" />}
-          <ChipSkelBar className="inline-block h-[0.9em] translate-y-[0.08em]" style={{ width: `${labelCh}ch` }} />
+          {lozenge && (
+            <UnifiedSkeleton as="span" aria-hidden className="mr-2 inline-block h-[16px] w-[26px] translate-y-[2px]" />
+          )}
+          <UnifiedSkeleton
+            as="span"
+            aria-hidden
+            className="inline-block h-[0.9em] translate-y-[0.08em]"
+            width={`${labelCh}ch`}
+          />
         </>
       }
     />

package/src/components/chat/utils/compact-card-classes.ts

@@ -26,17 +26,16 @@ export const COMPACT_CARD_OUTER =
 export const COMPACT_CARD_OUTER_STATIC =
   'my-1.5 flex items-start gap-3 w-full p-2 rounded-lg border border-ods-border bg-ods-card no-underline cursor-default';
 
-/** Skeleton outer frame — same dimensions as loaded, plus `animate-pulse`. */
+/** Skeleton outer frame: same dimensions as loaded. Static; its placeholders are `UnifiedSkeleton`s. */
 export const COMPACT_CARD_SKELETON_OUTER =
-  'my-1.5 flex w-full animate-pulse items-start gap-3 rounded-lg border border-ods-border bg-ods-card p-2';
+  'my-1.5 flex w-full items-start gap-3 rounded-lg border border-ods-border bg-ods-card p-2';
 
 /** 56×56 image slot — for cards with a cover image. */
 export const COMPACT_CARD_IMAGE_SLOT =
   'relative block shrink-0 self-start w-14 h-14 aspect-square overflow-hidden rounded-md bg-ods-bg';
 
-/** 56×56 placeholder slot for skeletons. */
-export const COMPACT_CARD_SKELETON_IMAGE_SLOT =
-  'block h-14 w-14 aspect-square shrink-0 self-start rounded-md bg-ods-bg';
+/** 56×56 placeholder slot for skeletons: the box of a `UnifiedSkeleton as="span"`, which draws the surface. */
+export const COMPACT_CARD_SKELETON_IMAGE_SLOT = 'block h-14 w-14 aspect-square shrink-0 self-start rounded-md';
 
 /** 56×56 icon slot — for cards without a cover image. */
 export const COMPACT_CARD_ICON_SLOT =