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

package/src/components/chat/entity-cards/admin-content-card-grid.tsx

@@ -2,6 +2,8 @@
 
 import type { ComponentType, ReactNode } from 'react';
 import { cn } from '../../../utils/cn';
+import { LoadingRegion } from '../../loading/loading-region';
+import { UnifiedSkeleton } from '../../loading/unified-skeleton';
 
 /** THE admin card grid: columns and gap shared by the live grid and its skeleton. */
 export const ADMIN_CONTENT_CARD_GRID_CLASS =
@@ -29,26 +31,26 @@ export function AdminContentCardSkeleton({
   return (
     <div
       className={cn(
-        'flex h-full animate-pulse flex-col overflow-hidden rounded-2xl border border-ods-border bg-transparent',
+        'flex h-full flex-col overflow-hidden rounded-2xl border border-ods-border bg-transparent',
         className,
       )}
     >
-      <div className="aspect-[3/2] w-full shrink-0 bg-ods-border/20" />
+      <UnifiedSkeleton className="aspect-[3/2] w-full shrink-0" />
       <div className="flex flex-1 flex-col gap-[var(--spacing-system-sf)] p-5">
-        <div className="h-[2lh] w-full rounded bg-ods-border text-h3" />
-        {subtitleRow && <div className="h-[1lh] w-1/2 rounded bg-ods-border text-h6" />}
-        <div className="h-[2lh] w-full rounded bg-ods-border text-h6" />
+        <UnifiedSkeleton className="h-[2lh] w-full rounded text-h3" />
+        {subtitleRow && <UnifiedSkeleton className="h-[1lh] w-1/2 rounded text-h6" />}
+        <UnifiedSkeleton className="h-[2lh] w-full rounded text-h6" />
         <div className="flex h-7 items-center gap-[var(--spacing-system-xsf)]">
-          <div className="h-5 w-20 rounded-full bg-ods-border" />
-          <div className="h-5 w-24 rounded-full bg-ods-border" />
+          <UnifiedSkeleton className="h-5 w-20 rounded-full" />
+          <UnifiedSkeleton className="h-5 w-24 rounded-full" />
         </div>
-        <div className="h-[1lh] w-32 rounded bg-ods-border text-h6" />
+        <UnifiedSkeleton className="h-[1lh] w-32 rounded text-h6" />
         {actions && (
           <div className="mt-auto flex items-center justify-between border-t border-ods-border pt-[var(--spacing-system-sf)]">
-            <div className="h-10 w-24 rounded bg-ods-border" />
+            <UnifiedSkeleton className="h-10 w-24 rounded" />
             <div className="flex gap-[var(--spacing-system-xsf)]">
-              <div className="h-10 w-20 rounded bg-ods-border" />
-              <div className="h-10 w-20 rounded bg-ods-border" />
+              <UnifiedSkeleton className="h-10 w-20 rounded" />
+              <UnifiedSkeleton className="h-10 w-20 rounded" />
             </div>
           </div>
         )}
@@ -57,6 +59,44 @@ export function AdminContentCardSkeleton({
   );
 }
 
+export interface AdminContentCardGridSkeletonProps {
+  /** How many placeholder cards: one page. */
+  count?: number;
+  /** The placeholder card. Default `AdminContentCardSkeleton`. */
+  Skeleton?: ComponentType<{ className?: string }>;
+  className?: string;
+  /** 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;
+}
+
+/**
+ * The grid's loading state on its own: one page of placeholder cards in the
+ * grid's columns. `AdminContentCardGrid` draws exactly this while it loads; a
+ * page that has no grid yet (a Suspense fallback) draws it directly.
+ */
+export function AdminContentCardGridSkeleton({
+  count = 12,
+  Skeleton = AdminContentCardSkeleton,
+  className,
+  label = 'Loading',
+  region = true,
+}: AdminContentCardGridSkeletonProps) {
+  return (
+    <LoadingRegion
+      label={label}
+      announce={region}
+      className={cn(ADMIN_CONTENT_CARD_GRID_CLASS, className)}
+      data-state="loading"
+    >
+      {Array.from({ length: count }, (_, i) => (
+        <Skeleton key={i} />
+      ))}
+    </LoadingRegion>
+  );
+}
+
 export interface AdminContentCardGridProps<T> {
   items: readonly T[];
   /** One page of cards: the loading skeleton count and the reserved slot count. */
@@ -73,6 +113,10 @@ export interface AdminContentCardGridProps<T> {
    */
   Skeleton?: ComponentType<{ className?: string }>;
   className?: string;
+  /** What is loading, read once by a screen reader while `loading`. Default "Loading". */
+  loadingLabel?: string;
+  /** The loading state announces itself. `false` inside another loading region. Default `true`. */
+  loadingRegion?: boolean;
 }
 
 /**
@@ -97,18 +141,21 @@ export function AdminContentCardGrid<T>({
   empty,
   Skeleton = AdminContentCardSkeleton,
   className,
+  loadingLabel,
+  loadingRegion,
 }: AdminContentCardGridProps<T>) {
   const gridClass = cn(ADMIN_CONTENT_CARD_GRID_CLASS, className);
 
-  if (loading) {
+  if (loading)
     return (
-      <div className={gridClass} data-state="loading">
-        {Array.from({ length: pageSize }, (_, i) => (
-          <Skeleton key={i} />
-        ))}
-      </div>
+      <AdminContentCardGridSkeleton
+        count={pageSize}
+        Skeleton={Skeleton}
+        className={className}
+        label={loadingLabel}
+        region={loadingRegion}
+      />
     );
-  }
 
   const slots = Array.from({ length: Math.max(0, pageSize - items.length) }, (_, i) => (
     <Skeleton key={`slot-${i}`} className="invisible" />

package/src/components/chat/entity-cards/admin-content-card.tsx

@@ -6,6 +6,7 @@ import Image from '../../../embed-shims/next-image';
 import { useImageEdgeColor } from '../../../hooks/ui/use-image-edge-color';
 import { cn } from '../../../utils/cn';
 import { PlatformBadge } from '../../features/platform-badge';
+import { UnifiedSkeleton } from '../../loading/unified-skeleton';
 import { CONTENT_CARD_FRAME_CLASS } from './content-card-frame';
 
 interface PlatformInfo {
@@ -84,7 +85,7 @@ export function AdminContentCard({
       <div className="relative aspect-[3/2] w-full shrink-0 overflow-hidden" style={{ backgroundColor: imageBgColor }}>
         {displayUrl ? (
           <>
-            {!imageLoaded && <div className="absolute inset-0 animate-pulse bg-ods-border/20" />}
+            {!imageLoaded && <UnifiedSkeleton className="absolute inset-0 h-full rounded-none" />}
             <Image
               src={displayUrl}
               alt={title}

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

@@ -24,6 +24,7 @@ import Link from '../../../embed-shims/next-link';
 import type { BlogPostSummary } from '../../../types/blog';
 import { cn } from '../../../utils/cn';
 import { formatDateWithTimezone } from '../../../utils/format';
+import { UnifiedSkeleton } from '../../loading/unified-skeleton';
 import { StatusBadge } from '../../ui/status-badge';
 import {
   COMPACT_CARD_IMAGE_SLOT,
@@ -76,32 +77,32 @@ export function BlogCardSkeleton({ size = 'default' }: { size?: 'default' | 'sm'
   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>
     );
   }
   return (
-    <article className={cn(CONTENT_CARD_SKELETON_FRAME_CLASS, 'group flex h-full animate-pulse flex-col')}>
-      <div className="aspect-[1200/630] bg-ods-border" />
+    <article className={cn(CONTENT_CARD_SKELETON_FRAME_CLASS, 'group flex h-full flex-col')}>
+      <UnifiedSkeleton className="aspect-[1200/630]" />
       <div className="flex flex-grow flex-col space-y-3 p-4">
-        <div className="h-5 w-3/4 rounded bg-ods-border" />
-        <div className="h-5 w-1/2 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" />
+        <UnifiedSkeleton className="h-5 w-3/4 rounded" />
+        <UnifiedSkeleton className="h-5 w-1/2 rounded" />
+        <UnifiedSkeleton className="h-3 w-full rounded" />
+        <UnifiedSkeleton className="h-3 w-4/5 rounded" />
         <div className="mt-auto flex items-center gap-2">
-          <div className="h-8 w-8 rounded-full bg-ods-border" />
-          <div className="h-3 w-24 rounded bg-ods-border" />
+          <UnifiedSkeleton className="h-8 w-8 rounded-full" />
+          <UnifiedSkeleton className="h-3 w-24 rounded" />
         </div>
       </div>
     </article>

package/src/components/chat/entity-cards/campaign-card-admin.tsx

@@ -13,6 +13,7 @@ import { Megaphone } from 'lucide-react';
 import type React from 'react';
 import Link from '../../../embed-shims/next-link';
 import { formatDateShort } from '../../../utils/date-formatters';
+import { UnifiedSkeleton } from '../../loading/unified-skeleton';
 import {
   COMPACT_CARD_ICON_SLOT,
   COMPACT_CARD_META_ROW_BOX,
@@ -96,16 +97,16 @@ export function CampaignCardAdmin({ campaign, className, anchorProps }: Campaign
 export function CampaignCardAdminSkeleton({ className }: { className?: string }) {
   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-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-1/2 rounded bg-ods-bg/70" />
+          <UnifiedSkeleton as="span" className="h-3 w-1/2 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>

package/src/components/chat/entity-cards/case-study-card.tsx

@@ -27,6 +27,7 @@ import { sortBitesByFeaturedAtDesc } from '../../features/video-bites-shared';
 import { CardHoverPlay } from '../../features/video-center-badge';
 import { VideoHoverPreviewSurface } from '../../features/video-hover-preview';
 import { EntityIcon } from '../../icon-display';
+import { UnifiedSkeleton } from '../../loading/unified-skeleton';
 import { Card } from '../../ui/card';
 import {
   COMPACT_CARD_IMAGE_SLOT,
@@ -138,20 +139,20 @@ function CaseStudyPersonRow({ study }: { study: CaseStudyCardData }) {
 export function CaseStudyCardSkeleton({ size = 'default' }: { size?: 'default' | 'sm' | 'portrait' | 'result' }) {
   if (size === 'result') {
     return (
-      <div className={cn(CONTENT_CARD_SKELETON_FRAME_CLASS, CASE_STUDY_RESULT_STACK, 'animate-pulse')}>
+      <div className={cn(CONTENT_CARD_SKELETON_FRAME_CLASS, CASE_STUDY_RESULT_STACK)}>
         <div className="flex h-[60px] shrink-0 items-center gap-3">
-          <div className="h-12 w-12 rounded-full bg-ods-border" />
+          <UnifiedSkeleton className="h-12 w-12 rounded-full" />
           <div className="flex-1 space-y-2">
-            <div className="h-4 w-2/3 rounded bg-ods-border" />
-            <div className="h-3 w-1/2 rounded bg-ods-border" />
+            <UnifiedSkeleton className="h-4 w-2/3 rounded" />
+            <UnifiedSkeleton className="h-3 w-1/2 rounded" />
           </div>
         </div>
         <div className={CASE_STUDY_RESULT_METRIC_BOX} data-testid="case-study-result-skeleton-metric">
-          <div className="h-10 w-1/3 rounded bg-ods-border" />
-          <div className="h-4 w-3/4 rounded bg-ods-border" />
+          <UnifiedSkeleton className="h-10 w-1/3 rounded" />
+          <UnifiedSkeleton className="h-4 w-3/4 rounded" />
         </div>
         <div className={CASE_STUDY_RESULT_FOOTER_BOX}>
-          <div className="h-4 w-2/3 rounded bg-ods-border" />
+          <UnifiedSkeleton className="h-4 w-2/3 rounded" />
         </div>
       </div>
     );
@@ -159,34 +160,34 @@ export function CaseStudyCardSkeleton({ size = 'default' }: { size?: 'default' |
   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-1/2 rounded bg-ods-bg/70" />
+            <UnifiedSkeleton as="span" className="h-3 w-1/2 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={cn(CONTENT_CARD_SKELETON_FRAME_CLASS, 'flex animate-pulse flex-col gap-6 p-6')}>
+    <div className={cn(CONTENT_CARD_SKELETON_FRAME_CLASS, 'flex flex-col gap-6 p-6')}>
       {/* Skeleton aspect matches the real card's image slot (OG 1200×630) */}
-      <div className="aspect-[1200/630] w-full rounded-sm bg-ods-border" />
+      <UnifiedSkeleton className="aspect-[1200/630] w-full rounded-sm" />
       <div className="flex h-[72px] flex-col gap-2">
-        <div className="h-5 w-3/4 rounded bg-ods-border" />
-        <div className="h-5 w-1/2 rounded bg-ods-border" />
+        <UnifiedSkeleton className="h-5 w-3/4 rounded" />
+        <UnifiedSkeleton className="h-5 w-1/2 rounded" />
       </div>
       <div className="flex h-[60px] items-center gap-3">
-        <div className="h-12 w-12 rounded-full bg-ods-border" />
+        <UnifiedSkeleton className="h-12 w-12 rounded-full" />
         <div className="flex-1 space-y-2">
-          <div className="h-4 w-2/3 rounded bg-ods-border" />
-          <div className="h-3 w-1/2 rounded bg-ods-border" />
+          <UnifiedSkeleton className="h-4 w-2/3 rounded" />
+          <UnifiedSkeleton className="h-3 w-1/2 rounded" />
         </div>
       </div>
     </div>

package/src/components/chat/entity-cards/chat-ticket-item.tsx

@@ -4,7 +4,7 @@ import { ChevronRight } from 'lucide-react';
 import { type ButtonHTMLAttributes, forwardRef } from 'react';
 import { cn } from '../../../utils/cn';
 import { WrenchIcon } from '../../icons-v2-generated/household/wrench-icon';
-import { Skeleton } from '../../ui/skeleton';
+import { UnifiedSkeleton } from '../../loading/unified-skeleton';
 import { Tag } from '../../ui/tag';
 import { TicketStatusTag, resolveStatusTagProps, resolveTicketStatus } from '../../ui/ticket-status-tag';
 
@@ -72,14 +72,14 @@ const ChatTicketItem = forwardRef<HTMLButtonElement, ChatTicketItemProps>(
         >
           <div className="flex min-w-0 flex-1 flex-col justify-center gap-1">
             {/* title line */}
-            <Skeleton className="h-5 w-1/2" />
+            <UnifiedSkeleton className="h-5 w-1/2" />
             {/* subtitle line */}
-            <Skeleton className="h-4 w-1/3" />
+            <UnifiedSkeleton className="h-4 w-1/3" />
           </div>
           {/* status tag */}
-          <Skeleton className="h-8 w-20 shrink-0 rounded-r-md" />
+          <UnifiedSkeleton className="h-8 w-20 shrink-0 rounded-r-md" />
           {/* chevron box */}
-          <Skeleton className="size-12 shrink-0 rounded-md" />
+          <UnifiedSkeleton className="size-12 shrink-0 rounded-md" />
         </div>
       );
     }

package/src/components/chat/entity-cards/customer-interview-card.tsx

@@ -13,6 +13,7 @@ import Image from '../../../embed-shims/next-image';
 import Link from '../../../embed-shims/next-link';
 import type { CustomerInterview } from '../../../types/customer-interview';
 import { cn } from '../../../utils/cn';
+import { UnifiedSkeleton } from '../../loading/unified-skeleton';
 import { Card } from '../../ui/card';
 import {
   COMPACT_CARD_IMAGE_SLOT,
@@ -54,39 +55,39 @@ export function CustomerInterviewCardSkeleton({ size = 'default' }: { size?: 'de
   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>
     );
   }
   return (
-    <div className={cn(CONTENT_CARD_SKELETON_FRAME_CLASS, 'flex animate-pulse flex-col gap-6 p-6')}>
+    <div className={cn(CONTENT_CARD_SKELETON_FRAME_CLASS, 'flex flex-col gap-6 p-6')}>
       {/* Aspect matches the loaded image slot (OG 1200×630) */}
-      <div className="aspect-[1200/630] w-full rounded-sm bg-ods-border" />
+      <UnifiedSkeleton className="aspect-[1200/630] w-full rounded-sm" />
       <div className="space-y-2">
-        <div className="h-5 w-3/4 rounded bg-ods-border" />
-        <div className="h-5 w-1/2 rounded bg-ods-border" />
+        <UnifiedSkeleton className="h-5 w-3/4 rounded" />
+        <UnifiedSkeleton className="h-5 w-1/2 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="mt-auto flex h-[60px] items-center gap-3">
-        <div className="h-12 w-12 rounded-full bg-ods-border" />
+        <UnifiedSkeleton className="h-12 w-12 rounded-full" />
         <div className="flex-1 space-y-2">
-          <div className="h-4 w-2/3 rounded bg-ods-border" />
-          <div className="h-3 w-1/2 rounded bg-ods-border" />
+          <UnifiedSkeleton className="h-4 w-2/3 rounded" />
+          <UnifiedSkeleton className="h-3 w-1/2 rounded" />
         </div>
       </div>
     </div>

package/src/components/chat/entity-cards/data-room-doc-card.tsx

@@ -16,6 +16,7 @@
 import { ExternalLink } from 'lucide-react';
 import type React from 'react';
 import Link from '../../../embed-shims/next-link';
+import { UnifiedSkeleton } from '../../loading/unified-skeleton';
 import { StatusBadge } from '../../ui/status-badge';
 import type { DataRoomDocCardItem } from '../types/entities/data-room-doc';
 import {
@@ -104,17 +105,17 @@ export function DataRoomDocCardSkeleton({ className }: { className?: string }) {
     <span className={`${COMPACT_CARD_SKELETON_OUTER} ${className ?? ''}`}>
       <span className={COMPACT_CARD_TEXT_COL}>
         <span className="flex min-w-0 items-center gap-1.5">
-          <span className="h-3.5 w-2/3 rounded bg-ods-bg" />
-          <span className="h-4 w-16 rounded-full bg-ods-bg/60" />
+          <UnifiedSkeleton as="span" className="h-3.5 w-2/3 rounded" />
+          <UnifiedSkeleton as="span" className="h-4 w-16 rounded-full" />
         </span>
-        <span className="h-4 w-1/2 rounded bg-ods-bg/60" />
+        <UnifiedSkeleton as="span" className="h-4 w-1/2 rounded" />
         <span className="flex min-w-0 flex-col gap-0">
-          <span className="h-5 w-5/6 rounded bg-ods-bg/60" />
-          <span className="h-5 w-3/4 rounded bg-ods-bg/60" />
+          <UnifiedSkeleton as="span" className="h-5 w-5/6 rounded" />
+          <UnifiedSkeleton as="span" className="h-5 w-3/4 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/entity-cards/design-doc-card.tsx

@@ -62,8 +62,6 @@ export function DesignDocCardSkeleton() {
         CONTENT_CARD_SKELETON_FRAME_CLASS,
         'flex h-full flex-col gap-[var(--spacing-system-mf)] p-[var(--spacing-system-lf)]',
       )}
-      role="status"
-      aria-label="Loading design doc"
     >
       <div className="flex w-full items-center gap-[16px]">
         <div className="flex min-w-0 flex-1 flex-col gap-2">

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

@@ -12,6 +12,7 @@ import { ExternalLink } from 'lucide-react';
 import type React from 'react';
 import Link from '../../../embed-shims/next-link';
 import { formatDateUTC as formatDate } from '../../../utils/format';
+import { UnifiedSkeleton } from '../../loading/unified-skeleton';
 import { StatusBadge } from '../../ui/status-badge';
 import {
   COMPACT_CARD_META_ROW,
@@ -127,18 +128,18 @@ export function GenericEntityCardSkeleton({ className }: { className?: string })
     <span className={`${COMPACT_CARD_SKELETON_OUTER} ${className ?? ''}`}>
       <span className={COMPACT_CARD_TEXT_COL}>
         <span className="flex min-w-0 items-center gap-1.5">
-          <span className="h-3.5 w-2/3 rounded bg-ods-bg" />
-          <span className="h-4 w-16 rounded-full bg-ods-bg/60" />
+          <UnifiedSkeleton as="span" className="h-3.5 w-2/3 rounded" />
+          <UnifiedSkeleton as="span" className="h-4 w-16 rounded-full" />
         </span>
-        <span className="h-4 w-1/2 rounded bg-ods-bg/60" />
+        <UnifiedSkeleton as="span" className="h-4 w-1/2 rounded" />
         <span className="flex min-w-0 flex-col gap-0">
-          <span className="h-5 w-5/6 rounded bg-ods-bg/60" />
-          <span className="h-5 w-3/4 rounded bg-ods-bg/60" />
+          <UnifiedSkeleton as="span" className="h-5 w-5/6 rounded" />
+          <UnifiedSkeleton as="span" className="h-5 w-3/4 rounded" />
         </span>
-        <span className="h-3 w-1/4 rounded bg-ods-bg/70" />
+        <UnifiedSkeleton as="span" className="h-3 w-1/4 rounded" />
       </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/entity-cards/github-activity-card.tsx

@@ -21,6 +21,7 @@ import React from 'react';
 import Link from '../../../embed-shims/next-link';
 import { formatDateUTC as formatDate } from '../../../utils/format';
 import { GithubClassicIcon } from '../../icons-v2-generated/brand-logos/github-classic-icon';
+import { UnifiedSkeleton } from '../../loading/unified-skeleton';
 import type { GitHubActivityItem, GitHubActivityKind, PrReviewState } from '../types/entities/github-activity';
 import {
   COMPACT_CARD_ICON_SLOT,
@@ -295,33 +296,33 @@ export function GitHubActivityCardSkeleton({
 }) {
   if (variant === 'row') {
     return (
-      <div className={`flex min-w-0 animate-pulse items-center gap-3 ${className ?? ''}`}>
+      <div className={`flex min-w-0 items-center gap-3 ${className ?? ''}`}>
         <div className="flex w-28 shrink-0 items-center gap-2">
-          <div className="h-3.5 w-3.5 rounded bg-ods-bg" />
-          <div className="h-3 w-16 rounded bg-ods-bg" />
+          <UnifiedSkeleton className="h-3.5 w-3.5 rounded" />
+          <UnifiedSkeleton className="h-3 w-16 rounded" />
         </div>
-        <div className="h-3 w-2/3 flex-1 rounded bg-ods-bg" />
-        <div className="h-3 w-40 shrink-0 rounded bg-ods-bg/60" />
-        <div className="h-3 w-20 shrink-0 rounded bg-ods-bg/60" />
+        <UnifiedSkeleton className="h-3 w-2/3 flex-1 rounded" />
+        <UnifiedSkeleton className="h-3 w-40 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-1/2 rounded bg-ods-bg/70" />
+          <UnifiedSkeleton as="span" className="h-3 w-1/2 rounded" />
         </span>
         <span className={COMPACT_CARD_META_ROW_BOX}>
           <span className={COMPACT_CARD_SUMMARY}>{COMPACT_CARD_ROW_FILLER}</span>
         </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/entity-cards/hubspot-ticket-card.tsx

@@ -13,6 +13,7 @@ import { ExternalLink } from 'lucide-react';
 import React from 'react';
 import Link from '../../../embed-shims/next-link';
 import { formatDateUTC as formatDate } from '../../../utils/format';
+import { UnifiedSkeleton } from '../../loading/unified-skeleton';
 import { StatusBadge } from '../../ui/status-badge';
 import type { HubspotTicketItem } from '../types/entities/hubspot-ticket';
 import {
@@ -177,11 +178,11 @@ export function HubspotTicketCardSkeleton({
 }) {
   if (variant === 'row') {
     return (
-      <div className={`flex min-w-0 animate-pulse items-center gap-3 ${className ?? ''}`}>
-        <div className="h-3 w-40 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-16 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 w-40 shrink-0 rounded" />
+        <UnifiedSkeleton className="h-3 w-2/3 flex-1 rounded" />
+        <UnifiedSkeleton className="h-3 w-16 shrink-0 rounded" />
+        <UnifiedSkeleton className="h-3 w-20 shrink-0 rounded" />
       </div>
     );
   }
@@ -189,23 +190,23 @@ export function HubspotTicketCardSkeleton({
     <span className={`${COMPACT_CARD_SKELETON_OUTER} ${className ?? ''}`}>
       <span className={COMPACT_CARD_TEXT_COL}>
         <span className="flex min-w-0 flex-wrap items-center gap-1.5">
-          <span className="h-3.5 w-2/3 rounded bg-ods-bg" />
-          <span className="h-4 w-12 rounded-full bg-ods-bg/60" />
-          <span className="h-4 w-16 rounded-full bg-ods-bg/60" />
+          <UnifiedSkeleton as="span" className="h-3.5 w-2/3 rounded" />
+          <UnifiedSkeleton as="span" className="h-4 w-12 rounded-full" />
+          <UnifiedSkeleton as="span" className="h-4 w-16 rounded-full" />
         </span>
-        <span className="h-4 w-1/2 rounded bg-ods-bg/60" />
+        <UnifiedSkeleton as="span" className="h-4 w-1/2 rounded" />
         <span className="flex min-w-0 flex-col gap-0">
-          <span className="h-5 w-5/6 rounded bg-ods-bg/60" />
-          <span className="h-5 w-4/6 rounded bg-ods-bg/60" />
-          <span className="h-5 w-3/4 rounded bg-ods-bg/60" />
-          <span className="h-5 w-2/5 rounded bg-ods-bg/60" />
+          <UnifiedSkeleton as="span" className="h-5 w-5/6 rounded" />
+          <UnifiedSkeleton as="span" className="h-5 w-4/6 rounded" />
+          <UnifiedSkeleton as="span" className="h-5 w-3/4 rounded" />
+          <UnifiedSkeleton as="span" className="h-5 w-2/5 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/entity-cards/index.ts

@@ -27,9 +27,11 @@ export {
 } from './content-card-frame';
 export {
   AdminContentCardGrid,
+  AdminContentCardGridSkeleton,
   AdminContentCardSkeleton,
   ADMIN_CONTENT_CARD_GRID_CLASS,
   type AdminContentCardGridProps,
+  type AdminContentCardGridSkeletonProps,
 } from './admin-content-card-grid';
 export { EmployeeEntryCard, EmployeeEntryCardSkeleton, EmployeeEntryBadge } from './employee-entry-card';
 export type { EmployeeEntryCardData, EmployeeEntryCardProps } from './employee-entry-card';