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

package/src/components/chat/entity-cards/investor-update-card.tsx

@@ -11,6 +11,7 @@
 import { Calendar } from 'lucide-react';
 import Image from '../../../embed-shims/next-image';
 import Link from '../../../embed-shims/next-link';
+import { UnifiedSkeleton } from '../../loading/unified-skeleton';
 import { formatInvestorUpdatePeriod, type InvestorUpdate } from '../types/entities/investor-update';
 import {
   COMPACT_CARD_IMAGE_SLOT,
@@ -52,30 +53,30 @@ export function InvestorUpdateCardSkeleton({ size = 'default' }: { size?: 'defau
   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} flex-nowrap gap-2`}>
-            <span className="h-3.5 w-1/2 rounded bg-ods-bg" />
-            <span className="h-4 w-8 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-8 shrink-0 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 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>
     );
   }
   return (
-    <div className={`h-full animate-pulse ${CONTENT_CARD_SKELETON_FRAME_CLASS}`}>
-      <div className="aspect-[1200/630] bg-ods-border" />
+    <div className={`h-full ${CONTENT_CARD_SKELETON_FRAME_CLASS}`}>
+      <UnifiedSkeleton className="aspect-[1200/630]" />
       <div className="space-y-3 p-4">
-        <div className="h-5 w-3/4 rounded bg-ods-border" />
-        <div className="h-3 w-full rounded bg-ods-border" />
-        <div className="h-3 w-4/5 rounded bg-ods-border" />
-        <div className="h-4 w-1/3 rounded bg-ods-border" />
+        <UnifiedSkeleton className="h-5 w-3/4 rounded" />
+        <UnifiedSkeleton className="h-3 w-full rounded" />
+        <UnifiedSkeleton className="h-3 w-4/5 rounded" />
+        <UnifiedSkeleton className="h-4 w-1/3 rounded" />
       </div>
     </div>
   );

package/src/components/chat/entity-cards/onboarding-guide-card.tsx

@@ -23,6 +23,7 @@ import Link from '../../../embed-shims/next-link';
 import { cn } from '../../../utils/cn';
 import { formatDurationMMSS } from '../../../utils/format';
 import { CardHoverPlay } from '../../features/video-center-badge';
+import { UnifiedSkeleton } from '../../loading/unified-skeleton';
 import type { OnboardingGuide } from '../types/entities/onboarding-guide';
 import {
   COMPACT_CARD_OUTER,
@@ -94,17 +95,17 @@ const HORIZONTAL_SIZE_TOKENS = {
 export function OnboardingGuideCardSkeleton({ size = 'default' }: { size?: 'catalog' | 'default' | 'sm' }) {
   if (size === 'catalog') {
     return (
-      <div className={cn(CONTENT_CARD_SKELETON_FRAME_CLASS, 'flex animate-pulse flex-col gap-4 p-6')}>
+      <div className={cn(CONTENT_CARD_SKELETON_FRAME_CLASS, 'flex flex-col gap-4 p-6')}>
         <div className="flex flex-col gap-4 md:flex-row md:gap-6">
-          <div className="aspect-[1200/630] w-full flex-shrink-0 rounded-lg bg-ods-border md:w-[256px]" />
+          <UnifiedSkeleton className="aspect-[1200/630] w-full flex-shrink-0 rounded-lg md:w-[256px]" />
           <div className="flex min-w-0 flex-1 flex-col">
             <div className="mb-3 flex min-h-[60px] flex-col justify-start gap-1.5 md:min-h-[72px]">
-              <div className="h-[25px] w-3/4 rounded bg-ods-border md:h-[30px]" />
-              <div className="h-[25px] w-1/2 rounded bg-ods-border md:h-[30px]" />
+              <UnifiedSkeleton className="h-[25px] w-3/4 rounded md:h-[30px]" />
+              <UnifiedSkeleton className="h-[25px] w-1/2 rounded md:h-[30px]" />
             </div>
             <div className="flex min-h-[46px] flex-col justify-start gap-2 md:min-h-[52px]">
-              <div className="h-3 w-full 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-5/6 rounded" />
             </div>
           </div>
         </div>
@@ -115,16 +116,16 @@ export function OnboardingGuideCardSkeleton({ size = 'default' }: { size?: 'cata
               className="flex flex-col gap-3 border-b border-ods-border p-4 md:border-b-0 md:border-r"
             >
               <div className="flex flex-col gap-2">
-                <div className="h-6 w-32 rounded bg-ods-border" />
-                <div className="h-3 w-20 rounded bg-ods-border" />
+                <UnifiedSkeleton className="h-6 w-32 rounded" />
+                <UnifiedSkeleton className="h-3 w-20 rounded" />
               </div>
             </div>
           ))}
           <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-4 w-3/4 rounded bg-ods-border" />
-              <div className="h-3 w-1/2 rounded bg-ods-border" />
+              <UnifiedSkeleton className="h-4 w-3/4 rounded" />
+              <UnifiedSkeleton className="h-3 w-1/2 rounded" />
             </div>
           </div>
         </div>
@@ -134,34 +135,32 @@ export function OnboardingGuideCardSkeleton({ size = 'default' }: { size?: 'cata
   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>
     );
   }
   const t = HORIZONTAL_SIZE_TOKENS.default;
   return (
-    <span
-      className={`flex items-start gap-3 rounded-md border border-ods-border bg-ods-card ${t.padding} animate-pulse`}
-    >
+    <span className={`flex items-start gap-3 rounded-md border border-ods-border bg-ods-card ${t.padding}`}>
       <span className={`inline-flex shrink-0 items-center justify-center rounded-full bg-ods-bg ${t.step}`} />
       <span className="flex min-w-0 flex-1 flex-col gap-2">
-        <span className="block h-4 w-2/3 rounded bg-ods-bg" />
-        <span className="block h-3 w-1/3 rounded bg-ods-bg/70" />
-        <span className="block h-3 w-full rounded bg-ods-bg/40" />
+        <UnifiedSkeleton as="span" className="block h-4 w-2/3 rounded" />
+        <UnifiedSkeleton as="span" className="block h-3 w-1/3 rounded" />
+        <UnifiedSkeleton as="span" className="block h-3 w-full rounded" />
       </span>
     </span>
   );

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