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

package/dist/{tickets-board-4MT6ZB4F.cjs → tickets-board-BNW4AYFL.cjs}

@@ -10,10 +10,10 @@ var _chunkDKOLQPE7cjs = require('./chunk-DKOLQPE7.cjs');
 
 
 
-var _chunkHNLI4OU5cjs = require('./chunk-HNLI4OU5.cjs');
+var _chunkC6LPOYDMcjs = require('./chunk-C6LPOYDM.cjs');
 require('./chunk-LU7TD6QS.cjs');
-require('./chunk-PSIKUDUV.cjs');
-require('./chunk-B27QEHYR.cjs');
+require('./chunk-LVO7FALW.cjs');
+require('./chunk-P6F6PHVK.cjs');
 require('./chunk-ZOZR3QI2.cjs');
 require('./chunk-OMV5S5PI.cjs');
 require('./chunk-KHPX3KU4.cjs');
@@ -1818,13 +1818,14 @@ require('./chunk-ASMNNSUQ.cjs');
 require('./chunk-KTPR66EE.cjs');
 require('./chunk-DGFDBPO7.cjs');
 require('./chunk-HOTM4UM6.cjs');
-require('./chunk-L2RMTGOK.cjs');
+require('./chunk-MGF3FUKD.cjs');
 require('./chunk-Z74QE57T.cjs');
 require('./chunk-XZJCBIYR.cjs');
 require('./chunk-2QMBXGMQ.cjs');
 require('./chunk-V45KLJQP.cjs');
 require('./chunk-3LU4UFPS.cjs');
-require('./chunk-5M5C6UV4.cjs');
+require('./chunk-RB6BSE3O.cjs');
+require('./chunk-2YXOD2KL.cjs');
 require('./chunk-3ATAYP36.cjs');
 
 // src/components/product-demo/screens/tickets-board.tsx
@@ -1839,7 +1840,7 @@ function buildTicketsBoardFixture(cast) {
   const dana = assignee(cast.person("dana"));
   const alex = assignee(cast.person("alex"));
   return [
-    _chunkHNLI4OU5cjs.columnFromTicketStatus.call(void 0, "ACTIVE", [
+    _chunkC6LPOYDMcjs.columnFromTicketStatus.call(void 0, "ACTIVE", [
       ticket("tk-1051", "Printer offline at the front desk", "ACTIVE", {
         ticketNumber: "1051",
         agent: "fae",
@@ -1857,7 +1858,7 @@ function buildTicketsBoardFixture(cast) {
         tags: ["onboarding"]
       })
     ]),
-    _chunkHNLI4OU5cjs.columnFromTicketStatus.call(void 0, "TECH_REQUIRED", [
+    _chunkC6LPOYDMcjs.columnFromTicketStatus.call(void 0, "TECH_REQUIRED", [
       ticket("tk-1049", "Acrobat Pro for Maya", "TECH_REQUIRED", {
         ticketNumber: "1049",
         agent: "fae",
@@ -1881,7 +1882,7 @@ function buildTicketsBoardFixture(cast) {
         escalatedByUser: true
       })
     ]),
-    _chunkHNLI4OU5cjs.columnFromTicketStatus.call(void 0, "ON_HOLD", [
+    _chunkC6LPOYDMcjs.columnFromTicketStatus.call(void 0, "ON_HOLD", [
       ticket("tk-1046", "Replace the conference room display", "ON_HOLD", {
         ticketNumber: "1046",
         organizationName: _chunkDKOLQPE7cjs.DEMO_ORGANIZATIONS.acme.name,
@@ -1890,7 +1891,7 @@ function buildTicketsBoardFixture(cast) {
         activity: { kind: "waiting-external" }
       })
     ]),
-    _chunkHNLI4OU5cjs.columnFromTicketStatus.call(void 0, 
+    _chunkC6LPOYDMcjs.columnFromTicketStatus.call(void 0, 
       "RESOLVED",
       [
         ticket("tk-1048", "Slow laptop", "RESOLVED", {
@@ -1926,7 +1927,7 @@ function TicketsBoardScreen({ compact = false }) {
   const cast = _chunkSTEJZPIOcjs.useProductDemoCast.call(void 0, );
   const board = _react.useMemo.call(void 0, () => buildTicketsBoardFixture(cast), [cast]);
   const columns = compact ? board.filter((column) => column.id !== "ON_HOLD") : board;
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full bg-ods-bg p-[var(--spacing-system-m)]", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHNLI4OU5cjs.Board, { columns, onChange: noop, initialCollapsed: compact ? void 0 : FOLDED }) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full bg-ods-bg p-[var(--spacing-system-m)]", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkC6LPOYDMcjs.Board, { columns, onChange: noop, initialCollapsed: compact ? void 0 : FOLDED }) });
 }
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.748",
+  "version": "0.0.749",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "sideEffects": [

package/src/components/categories-cart.tsx

@@ -3,6 +3,7 @@
 import { ChevronRight } from 'lucide-react';
 import Link from '../embed-shims/next-link';
 import type { RealCategoryCardProps } from '../types/category';
+import { UnifiedSkeleton } from './loading/unified-skeleton';
 import { VendorIcon } from './vendor-icon';
 
 // Component that receives vendor and subcategory data as props
@@ -26,10 +27,7 @@ export function CategoriesCart({
             {isLoading
               ? // Skeleton loading for vendor icons
                 Array.from({ length: 20 }).map((_, index) => (
-                  <div
-                    key={index}
-                    className="h-8 w-8 flex-shrink-0 animate-pulse rounded bg-ods-border md:h-10 md:w-10"
-                  />
+                  <UnifiedSkeleton key={index} className="h-8 w-8 flex-shrink-0 rounded md:h-10 md:w-10" />
                 ))
               : vendors && vendors.length > 0
                 ? vendors.map(vendor => (

package/src/components/chat/chat-container.tsx

@@ -3,8 +3,8 @@ import { cn } from '../../utils/cn';
 import { Chevron02LeftIcon } from '../icons-v2-generated';
 import { PlusCircleIcon } from '../icons-v2-generated/signs-and-symbols/plus-circle-icon';
 import { XmarkIcon } from '../icons-v2-generated/signs-and-symbols/xmark-icon';
+import { UnifiedSkeleton } from '../loading/unified-skeleton';
 import { Button } from '../ui/button';
-import { Skeleton } from '../ui/skeleton';
 import { SquareAvatar as Avatar } from '../ui/square-avatar';
 import { TicketStatusTag, resolveStatusTagProps } from '../ui/ticket-status-tag';
 import { MspOrganizationCard } from './msp-organization-card';
@@ -111,12 +111,12 @@ const ChatHeader = forwardRef<HTMLDivElement, ChatHeaderProps>(
               <div className="flex items-center gap-3">
                 {/* 64px round avatar placeholder — matches the `w-16 h-16`
                     rounded-full avatar / userIcon block below. */}
-                <Skeleton className="h-16 w-16 shrink-0 rounded-full" />
+                <UnifiedSkeleton className="h-16 w-16 shrink-0 rounded-full" />
                 <div className="flex flex-col gap-1">
                   {/* Name line — sized to the `text-h3` name. */}
-                  <Skeleton className="h-6 w-40" />
+                  <UnifiedSkeleton className="h-6 w-40" />
                   {/* Server line — sized to the `text-h4` secondary row. */}
-                  <Skeleton className="h-4 w-28" />
+                  <UnifiedSkeleton className="h-4 w-28" />
                 </div>
               </div>
             ) : (

package/src/components/chat/chat-context-picker.tsx

@@ -29,6 +29,7 @@ import { SearchIcon } from '../icons-v2-generated/interface/search-icon';
 import { Upload02Icon } from '../icons-v2-generated/interface/upload-02-icon';
 import { PlusIcon } from '../icons-v2-generated/signs-and-symbols/plus-icon';
 import { XmarkCircleIcon } from '../icons-v2-generated/signs-and-symbols/xmark-circle-icon';
+import { LoadingRegion } from '../loading/loading-region';
 import {
   CONTEXT_BACK_CLASS,
   CONTEXT_STATE_CLASS,
@@ -384,9 +385,9 @@ export function ChatContextPicker({
               >
                 <Suspense
                   fallback={
-                    <div className="max-h-[340px] overflow-hidden">
+                    <LoadingRegion label="Loading items" className="max-h-[340px] overflow-hidden">
                       <ContextItemsSkeleton count={ITEMS_SKELETON_ROWS} />
-                    </div>
+                    </LoadingRegion>
                   }
                 >
                   {config.renderItems({

package/src/components/chat/chat-message-row.tsx

@@ -22,6 +22,7 @@
 import { useState, type ReactNode } from 'react';
 import Image from '../../embed-shims/next-image';
 import { personInitials } from '../../utils/format';
+import { UnifiedSkeleton } from '../loading/unified-skeleton';
 import { useProxiedImageUrl } from './hooks/use-proxied-image-url';
 
 export interface ChatMessageRowProps {
@@ -104,20 +105,18 @@ export function ChatMessageRow({ displayName, avatarUrl, timeLabel, body, footer
  * name/time/body line-heights so the loading→loaded swap does not reflow.
  */
 export function ChatMessageRowSkeleton() {
-  // Bars use `bg-ods-border` (NOT `bg-ods-skeleton` — that token resolves to
-  // transparent in this build, leaving the box visually empty).
   return (
     <div className="flex w-full min-w-0 gap-2 md:gap-3">
-      <div className="h-8 w-8 flex-shrink-0 animate-pulse rounded-lg bg-ods-border md:h-10 md:w-10" />
+      <UnifiedSkeleton className="h-8 w-8 flex-shrink-0 rounded-lg md:h-10 md:w-10" />
       <div className="min-w-0 flex-1">
         {/* Header row — name + time bars, same mb-1 + gap-2 as the real header. */}
         <div className="mb-1 flex items-center gap-2">
-          <div className="h-[15px] w-24 animate-pulse rounded bg-ods-border md:h-[20px] md:w-32" />
-          <div className="h-[12px] w-12 animate-pulse rounded bg-ods-border md:h-[16px] md:w-16" />
+          <UnifiedSkeleton className="h-[15px] w-24 rounded md:h-[20px] md:w-32" />
+          <UnifiedSkeleton className="h-[12px] w-12 rounded md:h-[16px] md:w-16" />
         </div>
         {/* Two body lines — match the 12/14px body line-height. */}
-        <div className="h-[14px] w-full animate-pulse rounded bg-ods-border md:h-[18px]" />
-        <div className="mt-1 h-[14px] w-3/4 animate-pulse rounded bg-ods-border md:h-[18px]" />
+        <UnifiedSkeleton className="h-[14px] w-full rounded md:h-[18px]" />
+        <UnifiedSkeleton className="mt-1 h-[14px] w-3/4 rounded md:h-[18px]" />
       </div>
     </div>
   );

package/src/components/chat/chat-message-skeleton.tsx

@@ -1,6 +1,8 @@
 'use client';
 
 import { cn } from '../../utils/cn';
+import { LoadingRegion } from '../loading/loading-region';
+import { UnifiedSkeleton } from '../loading/unified-skeleton';
 
 interface ChatMessageSkeletonProps {
   className?: string;
@@ -40,15 +42,15 @@ export function ChatMessageSkeleton({
             `bg-ods-border` so the placeholders are actually visible (a tinted
             low-alpha fill reads as blank on the dark surface). */}
         <div className="flex items-center gap-[var(--spacing-system-xs)]">
-          {showAvatar && !isUser && <div className="h-8 w-8 flex-shrink-0 animate-pulse rounded-full bg-ods-border" />}
-          <div className="h-5 w-32 animate-pulse rounded bg-ods-border" />
-          <div className="ml-auto h-4 w-14 animate-pulse rounded bg-ods-border" />
+          {showAvatar && !isUser && <UnifiedSkeleton className="h-8 w-8 flex-shrink-0 rounded-full" />}
+          <UnifiedSkeleton className="h-5 w-32 rounded" />
+          <UnifiedSkeleton className="ml-auto h-4 w-14 rounded" />
         </div>
 
         {/* Body lines — percentage widths so they reflow on panel resize. */}
         <div className="flex flex-col gap-2 pt-[var(--spacing-system-xxs)]">
           {Array.from({ length: lines }, (_, i) => (
-            <div key={i} className={cn('h-4 animate-pulse rounded bg-ods-border', bodyLineWidth(i, lines))} />
+            <UnifiedSkeleton key={i} className={cn('h-4 rounded', bodyLineWidth(i, lines))} />
           ))}
         </div>
       </div>
@@ -57,6 +59,8 @@ export function ChatMessageSkeleton({
 }
 
 interface ChatMessageListSkeletonProps {
+  /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
+  region?: boolean;
   className?: string;
   messageCount?: number;
   showAvatars?: boolean;
@@ -85,6 +89,7 @@ interface ChatMessageListSkeletonProps {
 }
 
 export function ChatMessageListSkeleton({
+  region = true,
   className,
   messageCount = 6,
   showAvatars = true,
@@ -99,7 +104,7 @@ export function ChatMessageListSkeleton({
   }));
 
   return (
-    <div className="relative flex min-h-0 flex-1 flex-col">
+    <LoadingRegion label="Loading messages" announce={region} className="relative flex min-h-0 flex-1 flex-col">
       <div
         className={cn(
           'flex h-full w-full flex-1 flex-col',
@@ -131,6 +136,6 @@ export function ChatMessageListSkeleton({
           ))}
         </div>
       </div>
-    </div>
+    </LoadingRegion>
   );
 }

package/src/components/chat/chat-sidebar-skeleton.tsx

@@ -1,6 +1,7 @@
 import { forwardRef } from 'react';
 import { cn } from '../../utils/cn';
 import { ChatPlusIcon } from '../icons-v2-generated';
+import { UnifiedSkeleton } from '../loading/unified-skeleton';
 import { Button } from '../ui/button';
 
 interface DialogListItemSkeletonProps {
@@ -25,14 +26,14 @@ const DialogListItemSkeleton = forwardRef<HTMLDivElement, DialogListItemSkeleton
         <div className="flex flex-1 flex-col items-start justify-center gap-1">
           <div className="flex w-full items-center">
             {/* Title skeleton */}
-            <div className="h-6 w-full max-w-[200px] animate-pulse rounded bg-ods-border" />
+            <UnifiedSkeleton className="h-6 w-full max-w-[200px] rounded" />
           </div>
           {/* Timestamp skeleton */}
-          <div className="h-4 w-32 animate-pulse rounded bg-ods-border" />
+          <UnifiedSkeleton className="h-4 w-32 rounded" />
         </div>
 
         {/* Right side chevron skeleton */}
-        <div className="size-6 shrink-0 animate-pulse rounded bg-ods-border" />
+        <UnifiedSkeleton className="size-6 shrink-0 rounded" />
       </div>
     );
   },

package/src/components/chat/chat-top-navigation.tsx

@@ -3,7 +3,7 @@
 import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
 import { cn } from '../../utils/cn';
 import { Settings01Icon, SidebarIcon } from '../icons-v2-generated';
-import { Skeleton } from '../ui/skeleton';
+import { UnifiedSkeleton } from '../loading/unified-skeleton';
 import { SquareAvatar } from '../ui/square-avatar';
 
 export interface ChatTopNavigationProps extends HTMLAttributes<HTMLElement> {
@@ -72,10 +72,10 @@ const ChatTopNavigation = forwardRef<HTMLElement, ChatTopNavigationProps>(
         <div className="flex min-w-0 flex-1 items-center gap-[var(--spacing-system-m)] px-[var(--spacing-system-m)]">
           {isLoading ? (
             <>
-              <Skeleton className="size-10 shrink-0 rounded-full" />
+              <UnifiedSkeleton className="size-10 shrink-0 rounded-full" />
               <div className="flex min-w-0 flex-1 flex-col gap-[var(--spacing-system-xxs)]">
-                <Skeleton className="h-5 w-24" />
-                <Skeleton className="h-4 w-32" />
+                <UnifiedSkeleton className="h-5 w-24" />
+                <UnifiedSkeleton className="h-4 w-32" />
               </div>
             </>
           ) : (

package/src/components/chat/context-items-list.tsx

@@ -14,7 +14,8 @@
 import { Component, type ReactNode, type UIEvent, useCallback } from 'react';
 import { cn } from '../../utils/cn';
 import { CheckFillIcon } from '../icons-v2-generated/signs-and-symbols/check-fill-icon';
-import { Skeleton } from '../ui/skeleton';
+import { LoadingRegion } from '../loading/loading-region';
+import { UnifiedSkeleton } from '../loading/unified-skeleton';
 import type { ChatContextItem } from './types/context-item.types';
 
 const itemKey = (i: { type: string; id: string }) => `${i.type}:${i.id}`;
@@ -86,7 +87,7 @@ export function ContextItemsSkeleton({ count }: { count: number }) {
           key={`ctx-skeleton-${i}`}
           className="flex items-center border-b border-ods-border bg-ods-bg py-3 pl-4 pr-2 last:border-b-0"
         >
-          <Skeleton className="h-5 w-1/2" />
+          <UnifiedSkeleton className="h-5 w-1/2" />
         </div>
       ))}
     </>
@@ -164,7 +165,12 @@ export function ContextItemsList({
           />
         );
       })}
-      {loadingMore && <ContextItemsSkeleton count={3} />}
+      {loadingMore && (
+        // `contents`: the rows stay the list's own rows; the region only adds the one announcement.
+        <LoadingRegion label="Loading more items" className="contents">
+          <ContextItemsSkeleton count={3} />
+        </LoadingRegion>
+      )}
     </div>
   );
 }

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>