@flamingo-stack/openframe-frontend-core 0.0.765 → 0.0.766

package/src/components/ui/searchable-select.tsx

@@ -6,10 +6,21 @@ import { useKeyboardCollisionPadding } from '../../hooks/ui/use-keyboard-collisi
 import { cn } from '../../utils/cn';
 import { CheckIcon, SearchIcon } from '../icons-v2-generated';
 import { Chevron02DownIcon } from '../icons-v2-generated/arrows/chevron-02-down-icon';
+import { LoadingRegion } from '../loading/loading-region';
+import { TextLineSkeleton } from '../loading/unified-skeleton';
 import { FieldWrapper } from './field-wrapper';
 import { Input } from './input';
 import { usePortalContainer } from './portal-container';
 
+/** An option's frame (a list row, or a tile in the grid), read by the options and by their loading state. */
+const SELECT_ROW_CLASS =
+  'flex w-full items-center gap-[var(--spacing-system-xs)] px-[var(--spacing-system-sf)] py-[var(--spacing-system-xs)] text-left';
+const SELECT_TILE_CLASS =
+  'flex min-w-0 flex-col items-center justify-center gap-[var(--spacing-system-xxs)] border-b border-r border-ods-border p-[var(--spacing-system-xs)]';
+/** Options the loading state draws: the `max-h-80` (320px) list holds eight 40px rows, or about twelve tiles. */
+const SELECT_ROWS_FOLD = 8;
+const SELECT_TILES_FOLD = 12;
+
 export interface SearchableSelectOption {
   value: string;
   label: string;
@@ -87,7 +98,7 @@ export function SearchableSelect(allProps: SearchableSelectProps) {
     placeholder = 'Select...',
     searchPlaceholder = 'Search...',
     emptyText = 'No results found',
-    loadingText = 'Loading…',
+    loadingText = 'Loading options',
     isLoading = false,
     disabled = false,
     trigger,
@@ -229,10 +240,21 @@ export function SearchableSelect(allProps: SearchableSelectProps) {
               // bottom/right rule, so the grid needs no gap.
               isGrid ? 'grid grid-cols-[repeat(auto-fill,minmax(7rem,1fr))]' : 'py-[var(--spacing-system-xs)]',
             )}
-            role="listbox"
+            // A listbox owns options only: while they are read the box holds the loading region (a status and
+            // hidden rows), with no listbox role around it.
+            role={isLoading ? undefined : 'listbox'}
           >
             {isLoading ? (
-              <div className={statusClass}>{loadingText}</div>
+              // The options while they are read: the list's own rows (or tiles), a label bar each; `loadingText` is
+              // what a screen reader hears.
+              <LoadingRegion label={loadingText} className="contents">
+                {Array.from({ length: isGrid ? SELECT_TILES_FOLD : SELECT_ROWS_FOLD }, (_, i) => (
+                  // biome-ignore lint/suspicious/noArrayIndexKey: skeleton rows never reorder
+                  <div key={i} className={isGrid ? SELECT_TILE_CLASS : SELECT_ROW_CLASS} aria-hidden>
+                    <TextLineSkeleton type={isGrid ? 'h6' : 'h4'} className={isGrid ? 'w-full' : 'w-2/3'} />
+                  </div>
+                ))}
+              </LoadingRegion>
             ) : filtered.length === 0 ? (
               <div className={statusClass}>{emptyText}</div>
             ) : (
@@ -247,9 +269,7 @@ export function SearchableSelect(allProps: SearchableSelectProps) {
                     onClick={() => handleSelect(opt.value)}
                     className={cn(
                       'transition-colors hover:bg-ods-bg-hover',
-                      isGrid
-                        ? 'flex min-w-0 flex-col items-center justify-center gap-[var(--spacing-system-xxs)] border-b border-r border-ods-border p-[var(--spacing-system-xs)]'
-                        : 'flex w-full items-center gap-[var(--spacing-system-xs)] px-[var(--spacing-system-sf)] py-[var(--spacing-system-xs)] text-left',
+                      isGrid ? SELECT_TILE_CLASS : SELECT_ROW_CLASS,
                       isSelected && 'bg-ods-bg-hover',
                     )}
                   >

package/src/components/ui/skeleton-surface.ts

@@ -1,6 +1,18 @@
 /**
- * What a skeleton looks like: the pulsing surface every loading stand-in draws
- * (`UnifiedSkeleton` and its presets, `TextHold`'s bars). A plain module, with
- * no client directive, so a server component can read the string itself.
+ * THE two pulses of the library, and the only places `animate-pulse` is written (a test fails on any other).
+ * A plain module, with no client directive, so a server component can read the strings itself.
+ *
+ * - `SKELETON_SURFACE_CLASS`: what a skeleton looks like, the pulsing surface every loading shape draws
+ *   (`UnifiedSkeleton` and its presets, `TextHold`'s bars). Every surface carries the `ods-skeleton` marker, and
+ *   a surface stops the pulse of every surface inside it: a skeleton drawn inside another one pulses with its
+ *   parent, once, never twice over (two opacity animations multiplied read as a faster, harsher pulse).
+ * - `LIVE_PULSE_CLASS`: a live indicator that is not a loading state (a "working" status dot, a connecting
+ *   light, a busy mark). Same animation and timing as the skeleton, so the page has one rhythm.
  */
-export const SKELETON_SURFACE_CLASS = 'animate-pulse motion-reduce:animate-none bg-ods-skeleton';
+export const SKELETON_SURFACE_MARKER = 'ods-skeleton';
+
+// One literal (no interpolation), so a Tailwind scan of the built bundle sees every class.
+export const SKELETON_SURFACE_CLASS =
+  'ods-skeleton animate-pulse motion-reduce:animate-none bg-ods-skeleton [&_.ods-skeleton]:animate-none';
+
+export const LIVE_PULSE_CLASS = 'animate-pulse motion-reduce:animate-none';

package/src/components/ui/slack-channel-chip.tsx

@@ -1,6 +1,15 @@
+'use client';
+
 import Link from '../../embed-shims/next-link';
+import { ICON_SIZE } from '../../styles/component-sizes';
 import { cn } from '../../utils/cn';
 import { SlackIcon } from '../icons-v2-generated/brand-logos/slack-icon';
+import { TextLineSkeleton } from '../loading/unified-skeleton';
+import { useLoadingScope } from './loading-scope';
+
+/** The chip: Slack's mark, then the channel. Read by the chip and by its skeleton. */
+const CHIP_CLASS = 'inline-flex items-center gap-1 align-baseline text-ods-text-primary';
+const MARK_CLASS = `${ICON_SIZE.sm} flex-shrink-0`;
 
 export interface SlackChannelChipProps {
   /** Channel display name, no '#' prefix. Falls back to plain "Slack" when null. */
@@ -13,13 +22,14 @@ export interface SlackChannelChipProps {
 
 /**
  * Inline Slack-channel reference: the Slack icon + "#name", optionally linked
- * to the channel's web deep link. Server-component safe (no hooks/state).
+ * to the channel's web deep link. In a page's loading state the channel is read: the chip is its skeleton.
  * Degrades gracefully: no name renders plain "Slack", no href renders unlinked.
  */
 export function SlackChannelChip({ name, href, className }: SlackChannelChipProps) {
+  if (useLoadingScope()) return <SlackChannelChipSkeleton className={className} />;
   const inner = (
-    <span className={cn('inline-flex items-center gap-1 align-baseline text-ods-text-primary', className)}>
-      <SlackIcon className="h-4 w-4 flex-shrink-0" />
+    <span className={cn(CHIP_CLASS, className)}>
+      <SlackIcon className={MARK_CLASS} />
       {name ? `#${name}` : 'Slack'}
     </span>
   );
@@ -30,3 +40,13 @@ export function SlackChannelChip({ name, href, className }: SlackChannelChipProp
     </Link>
   );
 }
+
+/** A SlackChannelChip while its channel is read: Slack's mark (static), the channel's name a bar of its line. */
+export function SlackChannelChipSkeleton({ className }: { className?: string }) {
+  return (
+    <span className={cn(CHIP_CLASS, className)} aria-hidden>
+      <SlackIcon className={MARK_CLASS} />
+      <TextLineSkeleton type="inherit" as="span" className="inline-block w-24 align-bottom" />
+    </span>
+  );
+}

package/src/components/ui/snap-carousel.tsx

@@ -34,6 +34,9 @@ export interface SnapCarouselProps<T> {
   nextLabel?: string;
   /** A slide to bring into view whenever this value changes (a link that names it). Only the track moves, never the page. */
   focusIndex?: number;
+  /** The slides are read data (a list whose length is the record's): each slide is marked an item of ONE read list
+   *  (`data-loading-item`), so a loading state drawn with the same carousel has the same structure as the loaded one. */
+  readItems?: boolean;
   className?: string;
 }
 
@@ -90,6 +93,7 @@ export function SnapCarousel<T>({
   prevLabel = 'Previous',
   nextLabel = 'Next',
   focusIndex,
+  readItems = false,
   className,
 }: SnapCarouselProps<T>) {
   const trackRef = useRef<HTMLDivElement | null>(null);
@@ -174,6 +178,7 @@ export function SnapCarousel<T>({
             // Never `aria-hidden`: the neighbouring slides are on screen and their links take focus.
             aria-current={itemIndex === index ? 'true' : undefined}
             className={cn('flex shrink-0 grow-0 snap-start', slideClassName)}
+            data-loading-item={readItems || undefined}
           >
             <div className="min-w-0 flex-1">{renderItem(item, itemIndex)}</div>
           </div>

package/src/components/ui/square-avatar.tsx

@@ -3,12 +3,16 @@
 import { type HTMLAttributes, memo, forwardRef } from 'react';
 import Image from '../../embed-shims/next-image';
 import { useAuthedImageSrc } from '../../hooks/use-authed-image-src';
+import { AVATAR_SIZE, AVATAR_SIZE_PX } from '../../styles/component-sizes';
 import { cn } from '../../utils/cn';
 import { personInitials } from '../../utils/format';
+import { UnifiedSkeleton } from '../loading/unified-skeleton';
+import { useLoadingScope } from './loading-scope';
 
 interface SquareAvatarProps extends HTMLAttributes<HTMLDivElement> {
   src?: string;
   alt?: string;
+  /** A step of the shared avatar scale (`AVATAR_SIZE`). */
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
   /** Exact pixel size (width & height). Overrides the `size` bucket dimensions —
    *  for callers with a numeric-px API (e.g. UserDisplay/MSPDisplay). */
@@ -27,6 +31,12 @@ interface SquareAvatarProps extends HTMLAttributes<HTMLDivElement> {
   initialsClassName?: string;
 }
 
+/** The avatar's corner at each variant, read by the avatar and by its skeleton. */
+const SQUARE_AVATAR_VARIANT_CLASS = {
+  square: 'rounded-md',
+  round: 'rounded-full',
+} as const;
+
 const SquareAvatar = memo(
   forwardRef<HTMLDivElement, SquareAvatarProps>(
     (
@@ -45,30 +55,17 @@ const SquareAvatar = memo(
       },
       ref,
     ) => {
-      const resolvedSrc = useAuthedImageSrc(src);
-      const sizeClasses = {
-        // xs (24px): dense card meta rows — avatar stacks on delivery/
-        // roadmap cards. Part of the shared scale so no caller ever
-        // bypasses the buckets with raw sizePx for a standard size.
-        xs: 'h-6 w-6',
-        sm: 'h-8 w-8',
-        md: 'h-10 w-10',
-        lg: 'h-12 w-12',
-        xl: 'h-16 w-16',
-      };
-
-      const sizePxBySize = {
-        xs: 24,
-        sm: 32,
-        md: 40,
-        lg: 48,
-        xl: 64,
-      };
+      // In a loading scope the avatar is its skeleton, and its image is not fetched.
+      const held = useLoadingScope();
+      const authedSrc = useAuthedImageSrc(held ? undefined : src);
+      if (held) {
+        return <SquareAvatarSkeleton size={size} sizePx={sizePx} variant={variant} className={className} />;
+      }
+      const resolvedSrc = authedSrc;
+      const sizeClasses = AVATAR_SIZE;
+      const sizePxBySize = AVATAR_SIZE_PX;
 
-      const variantClasses = {
-        square: 'rounded-md',
-        round: 'rounded-full',
-      };
+      const variantClasses = SQUARE_AVATAR_VARIANT_CLASS;
 
       return (
         <div
@@ -136,3 +133,24 @@ const SquareAvatar = memo(
 SquareAvatar.displayName = 'SquareAvatar';
 
 export { SquareAvatar };
+
+/** A SquareAvatar while its person is read: a box of the avatar's own size and corner. */
+export function SquareAvatarSkeleton({
+  size = 'md',
+  sizePx,
+  variant = 'square',
+  className,
+}: Pick<SquareAvatarProps, 'size' | 'sizePx' | 'variant' | 'className'>) {
+  return (
+    <UnifiedSkeleton
+      className={cn(
+        'shrink-0',
+        sizePx === undefined && AVATAR_SIZE[size],
+        SQUARE_AVATAR_VARIANT_CLASS[variant],
+        className,
+      )}
+      width={sizePx}
+      height={sizePx}
+    />
+  );
+}

package/src/components/ui/stacked-rows-panel.tsx

@@ -3,6 +3,8 @@
 import type { ReactNode } from 'react';
 import Link from '../../embed-shims/next-link';
 import { cn } from '../../utils/cn';
+import { TextLineSkeleton } from '../loading/unified-skeleton';
+import { useLoadingScope } from './loading-scope';
 
 /**
  * StackedRowsPanel — a single bordered card that stacks rows inside it.
@@ -67,8 +69,28 @@ export interface StackedRowsPanelProps {
   /** Optional uppercase caption rendered above the card. */
   title?: string;
   className?: string;
+  /** The shape drawn while the rows are read (a page's loading state, where `rows` is empty). */
+  skeleton?: StackedRowsPanelSkeletonShape;
+  /**
+   * The rows are a read list (how many there are is the data's, and a loading state draws a fold of them): every
+   * row carries `data-loading-item`. Default false (a panel of fixed fields).
+   */
+  listItems?: boolean;
 }
 
+/** How many rows a loading panel draws, and how many value/label columns each carries. */
+export interface StackedRowsPanelSkeletonShape {
+  /** Rows drawn. Default {@link STACKED_ROWS_SKELETON_COUNT}. */
+  rows?: number;
+  /** Columns per row; one is a full-width title/caption row. Default 1. */
+  columns?: number;
+  /** Each cell carries a label under its value. Default `true`. */
+  labels?: boolean;
+}
+
+/** Rows a loading panel draws when its caller names no count. */
+export const STACKED_ROWS_SKELETON_COUNT = 3;
+
 const ALIGN_CLASS: Record<PanelColumnAlign, string> = {
   left: 'justify-start items-start',
   center: 'justify-center items-center',
@@ -93,6 +115,13 @@ const HIDE_CLASS: Record<PanelHideAt, string> = {
 // the joined-row pattern used across the detail layouts (56px mobile, 80px tablet+).
 const ROW_CLASS =
   'flex items-center gap-[var(--spacing-system-m)] px-[var(--spacing-system-m)] min-h-14 content-md:min-h-20 border-b border-ods-border last:border-b-0';
+// A single-column row is a full-width title/subtitle row, padded symmetrically.
+const FULL_WIDTH_ROW_CLASS =
+  'flex items-center gap-[var(--spacing-system-m)] border-b border-ods-border p-[var(--spacing-system-m)] last:border-b-0';
+const CARD_CLASS = 'flex flex-col overflow-clip rounded-md border border-ods-border bg-ods-card';
+const TITLED_CLASS = 'flex flex-col gap-[var(--spacing-system-xxs)]';
+const TITLE_CLASS = 'uppercase text-ods-text-secondary text-h5';
+const DEFAULT_WIDTH_CLASS = 'flex-[1_0_0] min-w-0';
 
 function CellValue({ column }: { column: PanelColumn }) {
   const valueNode = (
@@ -131,7 +160,7 @@ function CellValue({ column }: { column: PanelColumn }) {
 }
 
 function PanelCell({ column }: { column: PanelColumn }) {
-  const widthClass = column.width ?? 'flex-[1_0_0] min-w-0';
+  const widthClass = column.width ?? DEFAULT_WIDTH_CLASS;
   const hideClass = column.hideAt ? HIDE_CLASS[column.hideAt] : 'flex';
 
   if (column.content !== undefined) {
@@ -158,11 +187,16 @@ function PanelCell({ column }: { column: PanelColumn }) {
   );
 }
 
-function PanelRowView({ row }: { row: PanelRow }) {
+function PanelRowView({ row, listItem }: { row: PanelRow; listItem?: boolean }) {
+  const item = listItem ? { 'data-loading-item': '' } : undefined;
   // Arbitrary content (e.g. a nested table): keep it edge-to-edge unless the caller
   // overrides via `className`. No fixed height — let the content size itself.
   if (row.content !== undefined) {
-    return <div className={cn('border-b border-ods-border last:border-b-0', row.className)}>{row.content}</div>;
+    return (
+      <div className={cn('border-b border-ods-border last:border-b-0', row.className)} {...item}>
+        {row.content}
+      </div>
+    );
   }
 
   const columns = row.columns ?? [];
@@ -170,15 +204,10 @@ function PanelRowView({ row }: { row: PanelRow }) {
 
   // A single-column row is a full-width title/subtitle row: pad symmetrically
   // (ODS `m`) instead of using a fixed column-row height.
-  const rowClass = isFullWidth
-    ? cn(
-        'flex items-center gap-[var(--spacing-system-m)] border-b border-ods-border p-[var(--spacing-system-m)] last:border-b-0',
-        row.className,
-      )
-    : cn(ROW_CLASS, row.className);
+  const rowClass = isFullWidth ? cn(FULL_WIDTH_ROW_CLASS, row.className) : cn(ROW_CLASS, row.className);
 
   return (
-    <div className={rowClass}>
+    <div className={rowClass} {...item}>
       {columns.map(column => (
         <PanelCell key={column.key} column={column} />
       ))}
@@ -186,11 +215,16 @@ function PanelRowView({ row }: { row: PanelRow }) {
   );
 }
 
-export function StackedRowsPanel({ rows, title, className }: StackedRowsPanelProps) {
+export function StackedRowsPanel({ rows, title, className, skeleton, listItems = false }: StackedRowsPanelProps) {
+  // In a page's loading state with no rows yet (they are read) the panel is its skeleton; rows it is given there
+  // are the page's own copy and draw as they are.
+  const inScope = useLoadingScope();
+  if (inScope && rows.length === 0)
+    return <StackedRowsPanelSkeleton {...skeleton} title={title} className={className} listItems={listItems} />;
   const card = (
-    <div className="flex flex-col overflow-clip rounded-md border border-ods-border bg-ods-card">
+    <div className={CARD_CLASS}>
       {rows.map(row => (
-        <PanelRowView key={row.id} row={row} />
+        <PanelRowView key={row.id} row={row} listItem={listItems} />
       ))}
     </div>
   );
@@ -200,8 +234,47 @@ export function StackedRowsPanel({ rows, title, className }: StackedRowsPanelPro
   }
 
   return (
-    <div className={cn('flex flex-col gap-[var(--spacing-system-xxs)]', className)}>
-      <p className="uppercase text-ods-text-secondary text-h5">{title}</p>
+    <div className={cn(TITLED_CLASS, className)}>
+      <p className={TITLE_CLASS}>{title}</p>
+      {card}
+    </div>
+  );
+}
+
+/**
+ * A StackedRowsPanel while its rows are read: the same card and row heights, each cell's value a `text-h4` bar
+ * over its label's `text-h6` bar. The title above the card is the page's own and draws as it is.
+ */
+export function StackedRowsPanelSkeleton({
+  rows = STACKED_ROWS_SKELETON_COUNT,
+  columns = 1,
+  labels = true,
+  title,
+  className,
+  listItems = false,
+}: StackedRowsPanelSkeletonShape & Pick<StackedRowsPanelProps, 'title' | 'className' | 'listItems'>) {
+  const card = (
+    <div className={CARD_CLASS} aria-hidden>
+      {Array.from({ length: rows }, (_, row) => (
+        <div
+          key={row}
+          className={columns === 1 ? FULL_WIDTH_ROW_CLASS : ROW_CLASS}
+          {...(listItems ? { 'data-loading-item': '' } : undefined)}
+        >
+          {Array.from({ length: columns }, (_cell, column) => (
+            <div key={column} className={cn('flex flex-col justify-center', DEFAULT_WIDTH_CLASS)}>
+              <TextLineSkeleton type="h4" className="w-1/2" />
+              {labels && <TextLineSkeleton type="h6" className="w-3/4" />}
+            </div>
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+  if (!title) return <div className={className}>{card}</div>;
+  return (
+    <div className={cn(TITLED_CLASS, className)}>
+      <p className={TITLE_CLASS}>{title}</p>
       {card}
     </div>
   );

package/src/components/ui/status-badge.tsx

@@ -3,6 +3,8 @@
 import { cva, type VariantProps } from 'class-variance-authority';
 import type React from 'react';
 import { cn } from '../../utils/cn';
+import { UnifiedSkeleton } from '../loading/unified-skeleton';
+import { useLoadingScope } from './loading-scope';
 
 const statusBadgeVariants = cva('inline-flex items-center justify-center rounded', {
   variants: {
@@ -93,7 +95,22 @@ export interface StatusBadgeProps
   gen?: number;
 }
 
+/**
+ * A badge while its text is read: one skeleton box with the badge's own padding and type step, its content one line
+ * of that step (`box-content`: the padding adds to the line, as it does around the badge's text).
+ */
+function StatusBadgeSkeleton({ variant, className }: { variant?: 'card' | 'button' | null; className?: string }) {
+  return (
+    <UnifiedSkeleton
+      as="span"
+      className={cn(statusBadgeVariants({ variant, colorScheme: null }), 'box-content h-[1lh] w-12 border-transparent', className)}
+    />
+  );
+}
+
 function StatusBadge({ text, variant, colorScheme, className, singleLine, gen, style, ...props }: StatusBadgeProps) {
+  const loading = useLoadingScope();
+  if (loading) return <StatusBadgeSkeleton variant={variant} className={className} />;
   // Generation mode: constant full-accent text, progressive-opacity accent bg,
   // SSOT casing (textTransform:none overrides the base `uppercase`). Inline
   // style so it wins over any colorScheme class regardless of CSS source order.
@@ -143,4 +160,4 @@ function StatusBadge({ text, variant, colorScheme, className, singleLine, gen, s
   );
 }
 
-export { StatusBadge, statusBadgeVariants };
+export { StatusBadge, StatusBadgeSkeleton, statusBadgeVariants };

package/src/components/ui/status-indicator.tsx

@@ -1,6 +1,13 @@
 'use client';
 
 import Link from '../../embed-shims/next-link';
+import { DOT_SIZE } from '../../styles/component-sizes';
+import { TextLineSkeleton, UnifiedSkeleton } from '../loading/unified-skeleton';
+import { useLoadingScope } from './loading-scope';
+
+/** The indicator's row and dot, read by the indicator and by its skeleton. */
+const ROW_CLASS = 'flex items-center gap-1.5';
+const DOT_CLASS = `${DOT_SIZE.md} rounded-full`;
 
 interface StatusIndicatorProps {
   status: 'success' | 'pending' | 'error' | 'missing';
@@ -9,6 +16,8 @@ interface StatusIndicatorProps {
 }
 
 export function StatusIndicator({ status, label, href }: StatusIndicatorProps) {
+  // In a page's loading state the status is read: the indicator is its skeleton.
+  if (useLoadingScope()) return <StatusIndicatorSkeleton />;
   const getStatusColor = (kind: string) => {
     switch (kind) {
       case 'success':
@@ -28,8 +37,8 @@ export function StatusIndicator({ status, label, href }: StatusIndicatorProps) {
   const [dotColor, textColor] = colorClasses.split(' ');
 
   const content = (
-    <div className="flex items-center gap-1.5">
-      <div className={`h-3 w-3 rounded-full ${dotColor}`} />
+    <div className={ROW_CLASS}>
+      <div className={`${DOT_CLASS} ${dotColor}`} />
       <span className={`text-h6 ${textColor}`}>{label}</span>
     </div>
   );
@@ -44,3 +53,13 @@ export function StatusIndicator({ status, label, href }: StatusIndicatorProps) {
 
   return content;
 }
+
+/** A StatusIndicator while its status is read: the dot a circle of its size, the label a `text-h6` bar. */
+export function StatusIndicatorSkeleton({ className }: { className?: string }) {
+  return (
+    <div className={`${ROW_CLASS} ${className ?? ''}`} aria-hidden>
+      <UnifiedSkeleton variant="circular" className={DOT_CLASS} />
+      <TextLineSkeleton type="h6" className="w-24" />
+    </div>
+  );
+}

package/src/components/ui/status-line.tsx

@@ -1,6 +1,7 @@
 import { cn } from '../../utils/cn';
 import { CheckCircleIcon } from '../icons-v2-generated/signs-and-symbols/check-circle-icon';
 import { XmarkCircleIcon } from '../icons-v2-generated/signs-and-symbols/xmark-circle-icon';
+import { LIVE_PULSE_CLASS } from './skeleton-surface';
 
 /**
  * What a status line says about the thing above it:
@@ -41,7 +42,7 @@ export function StatusLine({ tone, label, className }: StatusLineProps) {
     >
       {tone === 'working' && (
         <span
-          className="h-2 w-2 shrink-0 animate-pulse rounded-full bg-ods-flamingo-cyan motion-reduce:animate-none"
+          className={cn('h-2 w-2 shrink-0 rounded-full bg-ods-flamingo-cyan', LIVE_PULSE_CLASS)}
           aria-hidden
         />
       )}

package/src/components/ui/strip-card.tsx

@@ -1,5 +1,9 @@
+'use client';
+
 import type { ReactNode } from 'react';
 import { cn } from '../../utils/cn';
+import { TextLineSkeleton } from '../loading/unified-skeleton';
+import { useLoadingScope } from './loading-scope';
 
 export interface StripCardProps {
   /** Before the title, at 24px (an icon, a step's number). */
@@ -16,6 +20,20 @@ export interface StripCardProps {
   bodyClassName?: string;
 }
 
+/** The card's frame, head and body, read by the card and by its skeleton. */
+const FRAME_CLASS = 'flex h-full min-w-0 flex-col overflow-hidden rounded-md border border-ods-border bg-ods-card';
+const HEAD_CLASS = 'flex items-center gap-[var(--spacing-system-mf)] border-b border-ods-border';
+const HEAD_TEXT_CLASS = 'flex min-w-0 flex-1 flex-col';
+const LEAD_CLASS = 'flex shrink-0 items-center';
+const headPadding = (roomy: boolean) => (roomy ? 'p-[var(--spacing-system-l)]' : 'p-[var(--spacing-system-m)]');
+const bodyClass = (roomy: boolean) =>
+  cn(
+    'flex min-w-0 flex-1 flex-col bg-ods-bg',
+    roomy
+      ? 'gap-[var(--spacing-system-l)] p-[var(--spacing-system-l)]'
+      : 'gap-[var(--spacing-system-m)] px-[var(--spacing-system-m)] pb-[var(--spacing-system-l)] pt-[var(--spacing-system-m)]',
+  );
+
 /**
  * THE card with a head strip (Figma "Info-card" with a `tag` head): a head on
  * the card surface holding a mark, a title and an optional caption, a hairline,
@@ -33,34 +51,66 @@ export function StripCard({
   bodyClassName,
 }: StripCardProps) {
   const roomy = density === 'roomy';
-  return (
-    <div
-      className={cn(
-        'flex h-full min-w-0 flex-col overflow-hidden rounded-md border border-ods-border bg-ods-card',
-        className,
-      )}
-    >
-      <div
-        className={cn(
-          'flex items-center gap-[var(--spacing-system-mf)] border-b border-ods-border',
-          roomy ? 'p-[var(--spacing-system-l)]' : 'p-[var(--spacing-system-m)]',
-        )}
+  // In a page's loading state a title still being read is empty: the head is its skeleton, the body (whose own
+  // components draw their skeletons) as it is.
+  const inScope = useLoadingScope();
+  if (inScope && !title) {
+    return (
+      <StripCardSkeleton
+        lead={lead}
+        caption={caption !== undefined}
+        density={density}
+        className={className}
+        bodyClassName={bodyClassName}
       >
-        {lead && <span className="flex shrink-0 items-center">{lead}</span>}
-        <div className="flex min-w-0 flex-1 flex-col">
+        {children}
+      </StripCardSkeleton>
+    );
+  }
+  return (
+    <div className={cn(FRAME_CLASS, className)}>
+      <div className={cn(HEAD_CLASS, headPadding(roomy))}>
+        {lead && <span className={LEAD_CLASS}>{lead}</span>}
+        <div className={HEAD_TEXT_CLASS}>
           <Title className="m-0 text-ods-text-primary text-h3">{title}</Title>
           {caption && <span className="text-ods-text-secondary text-h6">{caption}</span>}
         </div>
       </div>
-      <div
-        className={cn(
-          'flex min-w-0 flex-1 flex-col bg-ods-bg',
-          roomy
-            ? 'gap-[var(--spacing-system-l)] p-[var(--spacing-system-l)]'
-            : 'gap-[var(--spacing-system-m)] px-[var(--spacing-system-m)] pb-[var(--spacing-system-l)] pt-[var(--spacing-system-m)]',
-          bodyClassName,
-        )}
-      >
+      <div className={cn(bodyClass(roomy), bodyClassName)}>
+        {children}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * A StripCard while its head is read: the same frame, the lead as given (an icon is static, a picture draws its
+ * own box), the title a `text-h3` bar and the caption, when the card carries one, a `text-h6` bar. The body is
+ * the caller's: its components draw their own skeletons.
+ */
+export function StripCardSkeleton({
+  lead,
+  caption = false,
+  density = 'default',
+  children,
+  className,
+  bodyClassName,
+}: Pick<StripCardProps, 'lead' | 'density' | 'children' | 'className' | 'bodyClassName'> & {
+  /** The loaded card carries a caption under its title. */
+  caption?: boolean;
+}) {
+  const roomy = density === 'roomy';
+  return (
+    <div className={cn(FRAME_CLASS, className)}>
+      <div className={cn(HEAD_CLASS, headPadding(roomy))} aria-hidden>
+        {lead && <span className={LEAD_CLASS}>{lead}</span>}
+        <div className={HEAD_TEXT_CLASS}>
+          <TextLineSkeleton type="h3" className="w-3/4" />
+          {caption && <TextLineSkeleton type="h6" className="w-1/2" />}
+        </div>
+      </div>
+      {/* The body is the caller's, inert while the card is read (its components draw their own skeletons). */}
+      <div className={cn(bodyClass(roomy), bodyClassName)} inert>
         {children}
       </div>
     </div>