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

package/src/components/ui/cursor-pagination.tsx

@@ -2,6 +2,7 @@
 
 import { ChevronLeft, ChevronRight, RotateCcw, Home } from 'lucide-react';
 import { cn } from '../../utils/cn';
+import { TextLineSkeleton } from '../loading/unified-skeleton';
 import { Button } from './button';
 
 export interface CursorPaginationProps {
@@ -26,6 +27,8 @@ export interface CursorPaginationProps {
   compact?: boolean;
   resetButtonLabel?: string;
   resetButtonIcon?: 'home' | 'rotate';
+  /** @internal The skeleton's state: the count line a bar, the buttons drawn but inert. */
+  skeleton?: boolean;
 }
 
 export function CursorPagination({
@@ -46,6 +49,7 @@ export function CursorPagination({
   compact = false,
   resetButtonLabel = 'First',
   resetButtonIcon = 'home',
+  skeleton = false,
 }: CursorPaginationProps) {
   const handleNext = () => {
     if (hasNextPage && endCursor && onNext) {
@@ -84,10 +88,18 @@ export function CursorPagination({
   return (
     <div className={cn('flex items-center justify-between gap-4', compact ? 'py-2' : 'py-3', className)}>
       {/* Info text */}
-      {showInfo && <div className="text-ods-text-secondary text-h6">{displayText || <span>&nbsp;</span>}</div>}
+      {showInfo && (
+        <div className="text-ods-text-secondary text-h6">
+          {skeleton ? (
+            <TextLineSkeleton type="inherit" as="span" className="w-40" />
+          ) : (
+            displayText || <span>&nbsp;</span>
+          )}
+        </div>
+      )}
 
-      {/* Navigation buttons */}
-      <div className="flex items-center gap-2">
+      {/* Navigation buttons (in the skeleton: the real buttons, their labels the pager's own words, inert) */}
+      <div className="flex items-center gap-2" inert={skeleton || undefined} aria-hidden={skeleton || undefined}>
         {onReset ? (
           <Button
             variant="outline"
@@ -133,6 +145,19 @@ export function CursorPagination({
   );
 }
 
+/**
+ * The pager while its page is read: the same row, the count line as a bar, and the pager's own buttons (their labels
+ * are the pager's words) drawn inert. Takes the pager's configuration; its cursors and counts are not known yet.
+ */
+export function CursorPaginationSkeleton(
+  props: Pick<
+    CursorPaginationProps,
+    'hasPreviousPage' | 'onPrevious' | 'onReset' | 'className' | 'showInfo' | 'compact' | 'resetButtonLabel' | 'resetButtonIcon'
+  >,
+) {
+  return <CursorPagination {...props} hasNextPage={false} skeleton />;
+}
+
 export function CursorPaginationSimple({
   hasNextPage,
   hasPreviousPage,

package/src/components/ui/dashboard-info-card.tsx

@@ -1,10 +1,13 @@
+'use client';
+
 import type { ReactNode } from 'react';
 import Link from '../../embed-shims/next-link';
 import { cn } from '../../utils/cn';
 import { QuestionCircleIcon } from '../icons-v2-generated/signs-and-symbols/question-circle-icon';
-import { UnifiedSkeleton } from '../loading/unified-skeleton';
+import { TextLineSkeleton, UnifiedSkeleton } from '../loading/unified-skeleton';
 import { CircularProgress, type CircularProgressOverflow, type CircularProgressVariant } from './circular-progress';
 import { FloatingTooltip } from './floating-tooltip';
+import { useLoadingScope } from './loading-scope';
 import { Tag } from './tag';
 
 /**
@@ -123,10 +126,15 @@ export function DashboardInfoCard({
   valueClassName,
   subValue,
   caption,
-  loading = false,
+  loading: loadingProp = false,
   loadingShowsPercentage = false,
   loadingShowsSubValue = false,
 }: DashboardInfoCardProps) {
+  // In a page's loading state the figure is read: the card is its skeleton (`loading`).
+  const inScope = useLoadingScope();
+  const loading = loadingProp || inScope;
+  // A caption still being read is empty while loading: its two lines are kept whenever one is passed.
+  const hasCaption = loading ? caption != null : Boolean(caption);
   const formattedValue = typeof value === 'number' ? value.toLocaleString() : value;
 
   const percentageAsTag =
@@ -141,7 +149,7 @@ export function DashboardInfoCard({
         <UnifiedSkeleton className="h-8 w-12 shrink-0 rounded-md" />
       ) : (
         <p className="text-h4">
-          <UnifiedSkeleton as="span" className="block h-[1lh] w-12 rounded" />
+          <TextLineSkeleton type="inherit" as="span" className="w-12" />
         </p>
       );
     }
@@ -249,12 +257,13 @@ export function DashboardInfoCard({
         {/* Title row: caption and/or tag (Figma "status" variant) */}
         <div className="flex items-center gap-[var(--spacing-system-xxs)]">
           {titleSlot ??
-            (title !== undefined ? (
+            // A title still being read (empty while loading) is a bar of its line, like no title.
+            (title !== undefined && !(loading && !title) ? (
               <p className="truncate text-ods-text-secondary text-h5">{title}</p>
             ) : (
               loading && (
                 <p className="text-h5">
-                  <UnifiedSkeleton as="span" className="block h-[1lh] w-20 rounded" />
+                  <TextLineSkeleton type="inherit" as="span" className="w-20" />
                 </p>
               )
             ))}
@@ -264,12 +273,12 @@ export function DashboardInfoCard({
         {/* Value and percentage */}
         <div className="flex items-center gap-[var(--spacing-system-xs)]">
           <p className={cn('truncate text-ods-text-primary text-h3 content-md:text-h2', valueClassName)}>
-            {loading ? <UnifiedSkeleton as="span" className="block h-[1lh] w-24 rounded" /> : formattedValue}
+            {loading ? <TextLineSkeleton type="inherit" as="span" className="w-24" /> : formattedValue}
           </p>
           {loading
             ? loadingShowsSubValue && (
                 <p className="text-h6">
-                  <UnifiedSkeleton as="span" className="block h-[1lh] w-16 rounded" />
+                  <TextLineSkeleton type="inherit" as="span" className="w-16" />
                 </p>
               )
             : subValue && <p className="text-ods-text-secondary text-h6">{subValue}</p>}
@@ -284,9 +293,9 @@ export function DashboardInfoCard({
         </div>
 
         {/* Two lines kept for the caption, loading or loaded, so a narrow tile is one height. */}
-        {caption && (
+        {hasCaption && (
           <p className="line-clamp-2 min-h-[2lh] text-ods-text-secondary text-h6">
-            {loading ? <UnifiedSkeleton as="span" className="block h-[1lh] w-32 rounded" /> : caption}
+            {loading ? <TextLineSkeleton type="inherit" as="span" className="w-32" /> : caption}
           </p>
         )}
       </div>
@@ -304,9 +313,10 @@ export function DashboardInfoCard({
     'bg-ods-card border border-ods-border rounded-md p-[var(--spacing-system-xsf)] content-md:p-[var(--spacing-system-m)] h-16 content-md:h-[104px] flex gap-[var(--spacing-system-s)] content-md:gap-[var(--spacing-system-m)] items-center transition-all';
 
   // A caption is a third line: the fixed stat-tile height would clip it.
-  const captionClassName = caption ? 'h-auto content-md:h-auto' : undefined;
+  const captionClassName = hasCaption ? 'h-auto content-md:h-auto' : undefined;
 
-  if (href) {
+  // While loading the card is not yet a link: a skeleton is never focusable.
+  if (href && !loading) {
     return (
       <Link
         href={href}
@@ -332,3 +342,11 @@ export function DashboardInfoCard({
     </div>
   );
 }
+
+/**
+ * A DashboardInfoCard while its figure is read: the same card with `loading` set, so it is the loaded card's box.
+ * The title, title slot, tag and icon it is given are the page's own and draw as they are.
+ */
+export function DashboardInfoCardSkeleton(props: Omit<DashboardInfoCardProps, 'value' | 'loading'>) {
+  return <DashboardInfoCard {...props} value="" loading />;
+}

package/src/components/ui/data-attribution.tsx

@@ -1,10 +1,15 @@
+'use client';
+
 import type { ReactNode } from 'react';
 import { DATA_SYNC_SOURCES, type DataSync, type DataSyncSource } from '../../types/data-sync';
+import { cn } from '../../utils/cn';
 import { formatDate } from '../../utils/format';
 import { ClickupIcon } from '../icons-v2-generated/brand-logos/clickup-icon';
 import { GithubClassicIcon } from '../icons-v2-generated/brand-logos/github-classic-icon';
 import { HubspotIcon } from '../icons-v2-generated/brand-logos/hubspot-icon';
-import { TextSkeleton, UnifiedSkeleton } from '../loading/unified-skeleton';
+import { TextLineSkeleton, UnifiedSkeleton } from '../loading/unified-skeleton';
+import { TOOL_MARK_CLASS } from '../platform/tool-badge-mark';
+import { useLoadingScope } from './loading-scope';
 
 export interface DataAttributionProps {
   /** The source's mark, sized by the caller (e.g. `<CartaIcon className="h-4 w-4" />`). */
@@ -20,6 +25,10 @@ export interface DataAttributionProps {
 const LINE_CLASS =
   'flex shrink-0 flex-col gap-[var(--spacing-system-xsf)] text-ods-text-primary text-h6 content-sm:flex-row content-sm:items-center content-sm:gap-[var(--spacing-system-sf)]';
 const ITEM_CLASS = 'flex items-center gap-[var(--spacing-system-xsf)]';
+const ACTION_CLASS = 'flex content-sm:pl-[var(--spacing-system-xs)]';
+const UPDATED_CLASS = 'text-ods-text-secondary';
+/** A read word inside the line's own words: a bar of the line's height, on its baseline. */
+const WORD_BAR_CLASS = 'inline-block align-bottom';
 
 function Separator() {
   return (
@@ -36,6 +45,7 @@ function Separator() {
  * same text.
  */
 export function DataAttribution({ icon, source, lastUpdated, action }: DataAttributionProps) {
+  if (useLoadingScope()) return <DataAttributionSkeleton icon={icon} action={action} />;
   return (
     <div className={LINE_CLASS}>
       <div className={ITEM_CLASS}>
@@ -43,25 +53,36 @@ export function DataAttribution({ icon, source, lastUpdated, action }: DataAttri
         <span>Data synced from {source}</span>
       </div>
       <Separator />
-      <span className="text-ods-text-secondary">Last updated: {lastUpdated ? formatDate(lastUpdated) : 'Never'}</span>
-      {action ? <div className="flex content-sm:pl-[var(--spacing-system-xs)]">{action}</div> : null}
+      <span className={UPDATED_CLASS}>Last updated: {lastUpdated ? formatDate(lastUpdated) : 'Never'}</span>
+      {action ? <div className={ACTION_CLASS}>{action}</div> : null}
     </div>
   );
 }
 
 /**
- * `DataAttribution` while its date loads: the same line (two lines below
- * `content-sm`, one row above it) with text bars, so the line does not move
- * when it fills in.
+ * `DataAttribution` while it is read: the same line (two lines below `content-sm`, one row above it), its own
+ * words drawn for real, the source and the date bars of the line's height, so the line does not move when it
+ * fills in. The source's mark is the one given (a brand glyph is static), else a box of its size.
  */
-export function DataAttributionSkeleton() {
+export function DataAttributionSkeleton({ icon, action }: Pick<DataAttributionProps, 'icon' | 'action'> = {}) {
   return (
     <div className={LINE_CLASS} aria-hidden="true">
       <div className={ITEM_CLASS}>
-        <UnifiedSkeleton className="size-4 rounded" />
-        <TextSkeleton.Body className="w-40" />
+        {icon ?? <UnifiedSkeleton className={cn(TOOL_MARK_CLASS, 'rounded')} />}
+        <span>
+          Data synced from <TextLineSkeleton type="inherit" as="span" className={`${WORD_BAR_CLASS} w-20`} />
+        </span>
       </div>
-      <TextSkeleton.Body className="w-52" />
+      <Separator />
+      <span className={UPDATED_CLASS}>
+        Last updated: <TextLineSkeleton type="inherit" as="span" className={`${WORD_BAR_CLASS} w-24`} />
+      </span>
+      {/* The control is the page's own, drawn for real but inert while the line is read. */}
+      {action ? (
+        <div className={ACTION_CLASS} inert>
+          {action}
+        </div>
+      ) : null}
     </div>
   );
 }
@@ -81,20 +102,29 @@ const DATA_SYNC_ICONS: Record<DataSyncSource, typeof ClickupIcon> = {
  */
 export function DataSyncLine({
   sync,
-  loading = false,
+  loading: loadingProp = false,
+  stated = true,
   inline = false,
   action,
 }: {
   sync?: DataSync | null;
   loading?: boolean;
+  /**
+   * The host states a sync for this page (its source is a mirror). While the sync is read, the line's skeleton is
+   * drawn only then: a page whose host states none shows no line, loading or loaded. Default `true`.
+   */
+  stated?: boolean;
   inline?: boolean;
   action?: ReactNode;
 }) {
+  // While the sync is read (in a page's loading state, or `loading`), a host that states one holds its line.
+  const inScope = useLoadingScope();
+  const loading = (loadingProp || inScope) && stated;
   if (!loading && !(sync && sync.source in DATA_SYNC_ICONS)) return null;
   const Icon = sync ? DATA_SYNC_ICONS[sync.source] : null;
   const line =
     loading || !sync || !Icon ? (
-      <DataAttributionSkeleton />
+      <DataAttributionSkeleton action={action} />
     ) : (
       <DataAttribution
         icon={<Icon size={16} />}

package/src/components/ui/data-table/data-table-body.tsx

@@ -4,6 +4,7 @@ import { useSyncExternalStore, type ReactNode } from 'react';
 import { useIsomorphicLayoutEffect } from '../../../hooks/ui/use-isomorphic-layout-effect';
 import { cn } from '../../../utils/cn';
 import { LoadingRegion } from '../../loading/loading-region';
+import { useLoadingScope } from '../loading-scope';
 import type { NoDataProps } from '../no-data';
 import { useDataTableContext } from './data-table';
 import { DataTableEmpty } from './data-table-empty';
@@ -97,7 +98,7 @@ const getNoRows = () => 0;
  * in the consumer to get the full benefit.
  */
 export function DataTableBody<T = unknown>({
-  loading,
+  loading: loadingProp,
   emptyMessage,
   emptyState,
   skeletonRows = 10,
@@ -112,6 +113,9 @@ export function DataTableBody<T = unknown>({
   renderSubRow,
 }: DataTableBodyProps<T>) {
   const table = useDataTableContext<T>();
+  // In a page's loading state the body is loading: its rows are the row skeletons.
+  const inScope = useLoadingScope();
+  const loading = inScope || loadingProp;
   const rows = table.getRowModel().rows;
   const hasRows = rows.length > 0;
 
@@ -128,7 +132,12 @@ export function DataTableBody<T = unknown>({
 
   if (loading && !hasRows) {
     return (
-      <LoadingRegion label="Loading results" announce={loadingRegion} className={cn(ROW_STACK_CLASSES, className)}>
+      <LoadingRegion
+        label="Loading results"
+        // The page's loading region announces a loading state once.
+        announce={loadingRegion && !inScope}
+        className={cn(ROW_STACK_CLASSES, className)}
+      >
         <DataTableSkeleton
           rows={skeletonRows}
           className={skeletonRowClassName}

package/src/components/ui/data-table/data-table-row-count.tsx

@@ -1,6 +1,8 @@
 'use client';
 
 import { cn } from '../../../utils/cn';
+import { TextLineSkeleton } from '../../loading/unified-skeleton';
+import { useLoadingScope } from '../loading-scope';
 import { useDataTableContext } from './data-table';
 
 export interface DataTableRowCountProps {
@@ -19,6 +21,17 @@ export interface DataTableRowCountProps {
   className?: string;
 }
 
+const ROW_COUNT_CLASS = 'whitespace-nowrap text-ods-text-secondary text-h6';
+
+/** The row count while the rows are read: the same line, the number a bar and the (plural) item name real. */
+export function DataTableRowCountSkeleton({ label, className }: { label: string; className?: string }) {
+  return (
+    <span className={cn(ROW_COUNT_CLASS, className)} aria-hidden>
+      <TextLineSkeleton type="inherit" as="span" className="inline-block align-top w-6" /> {label}
+    </span>
+  );
+}
+
 /**
  * Renders "8 devices" (or your custom `itemName`) for the current row model.
  * Place wherever you want — above the table, in a toolbar, in a header right
@@ -40,14 +53,19 @@ export function DataTableRowCount({
   className,
 }: DataTableRowCountProps) {
   const table = useDataTableContext();
+  // While the page is read the count is not known: the number is a bar beside the item name.
+  const inScope = useLoadingScope();
   const count = totalCount ?? table.getRowModel().rows.length;
+  if (inScope) {
+    return <DataTableRowCountSkeleton label={pluralize?.(2, itemName) ?? `${itemName}s`} className={className} />;
+  }
 
   if (hideWhenEmpty && count === 0) return null;
 
   const label = pluralize?.(count, itemName) ?? (count === 1 ? itemName : `${itemName}s`);
 
   return (
-    <span className={cn('whitespace-nowrap text-ods-text-secondary text-h6', className)}>
+    <span className={cn(ROW_COUNT_CLASS, className)}>
       {count} {label}
     </span>
   );

package/src/components/ui/data-table/data-table-row.tsx

@@ -5,6 +5,7 @@ import type React from 'react';
 import { memo, useCallback, useRef, type ReactNode } from 'react';
 import Link from '../../../embed-shims/next-link';
 import { cn } from '../../../utils/cn';
+import { isOwnClick } from '../../../utils/own-click';
 import { ROW_HEIGHT_DESKTOP, ROW_SHELL_CLASSES } from './data-table-skeleton';
 import { alignJustify, getHideClasses } from './utils';
 
@@ -86,15 +87,9 @@ function DataTableRowImpl<T>({
 
   const handleClick = useCallback(
     (e: React.MouseEvent) => {
-      const target = e.target as HTMLElement;
-      // React-bubbled events from portaled descendants (tooltips, dropdowns, etc.)
-      // reach this handler even though their DOM target lives outside the row.
-      // Suppress them — and in link mode, preventDefault so `<Link>` does not navigate.
-      if (!containerRef.current?.contains(target)) {
-        if (isLinkMode) e.preventDefault();
-        return;
-      }
-      if (target.closest('[data-no-row-click]')) {
+      // Not the row's own click (a portalled descendant, a `data-no-row-click` element): suppressed,
+      // and in link mode `preventDefault` so `<Link>` does not navigate.
+      if (!isOwnClick(e.target, containerRef.current)) {
         if (isLinkMode) e.preventDefault();
         return;
       }

package/src/components/ui/data-table/data-table-skeleton.tsx

@@ -2,7 +2,7 @@
 
 import type { ReactNode } from 'react';
 import { cn } from '../../../utils/cn';
-import { UnifiedSkeleton } from '../../loading/unified-skeleton';
+import { TextLineSkeleton } from '../../loading/unified-skeleton';
 import { useDataTableContext } from './data-table';
 import { getHideClasses } from './utils';
 
@@ -94,10 +94,10 @@ export function DataTableSkeleton({ rows = 10, className, rowClassName, rowHeigh
                     getHideClasses(meta?.hideAt),
                   )}
                 >
-                  <UnifiedSkeleton className="mb-[var(--spacing-system-xxs)] h-5 w-3/4 rounded-sm" />
-                  {index % 2 === 0 && column.id === firstColumnId && (
-                    <UnifiedSkeleton className="h-4 w-1/2 rounded-sm opacity-60" />
-                  )}
+                  {/* A cell's text (the row's primary face), and on the first column every other row a second,
+                      secondary line (a description or an id under it). */}
+                  <TextLineSkeleton type="h4" className="w-3/4" />
+                  {index % 2 === 0 && column.id === firstColumnId && <TextLineSkeleton type="h6" className="w-1/2" />}
                 </div>
               );
             })}
@@ -111,8 +111,8 @@ export function DataTableSkeleton({ rows = 10, className, rowClassName, rowHeigh
             )}
           >
             <div className="flex min-w-0 flex-1 flex-col justify-center py-[var(--spacing-system-sf)]">
-              <UnifiedSkeleton className="mb-[var(--spacing-system-xsf)] h-4 w-3/4 rounded-sm" />
-              <UnifiedSkeleton className="h-3 w-1/2 rounded-sm opacity-60" />
+              <TextLineSkeleton type="h4" className="w-3/4" />
+              <TextLineSkeleton type="h6" className="w-1/2" />
             </div>
           </div>
         </div>

package/src/components/ui/data-table/index.ts

@@ -7,7 +7,7 @@ import { DataTableEmpty } from './data-table-empty';
 import { DataTableHeader } from './data-table-header';
 import { DataTableInfiniteFooter } from './data-table-infinite-footer';
 import { DataTableRow } from './data-table-row';
-import { DataTableRowCount } from './data-table-row-count';
+import { DataTableRowCount, DataTableRowCountSkeleton } from './data-table-row-count';
 import { DataTableSkeleton } from './data-table-skeleton';
 
 /**
@@ -45,6 +45,7 @@ export {
   DataTableInfiniteFooter,
   DataTableCursorFooter,
   DataTableRowCount,
+  DataTableRowCountSkeleton,
 };
 
 export { useDataTableContext } from './data-table';

package/src/components/ui/date-picker.tsx

@@ -1461,9 +1461,3 @@ export function DateFilterMenu({
     </Popover.Root>
   );
 }
-
-// ============================================================================
-// Exports
-// ============================================================================
-
-export { type DateRange };

package/src/components/ui/entity-image.tsx

@@ -3,11 +3,16 @@
 import React from 'react';
 import Image from '../../embed-shims/next-image';
 import { useAuthedImageSrc } from '../../hooks/use-authed-image-src';
+import { TILE_SIZE } 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';
 
 /** The design size, when a caller does not state one. */
-const ENTITY_IMAGE_SIZE = 'size-[52px] content-md:size-[60px]';
+export const ENTITY_IMAGE_SIZE = TILE_SIZE.entity;
+/** The image's corner, read by the image, its initials fallback and its skeleton. */
+const ENTITY_IMAGE_RADIUS_CLASS = 'rounded-md';
 
 export interface EntityImageProps {
   src?: string | null;
@@ -29,7 +34,10 @@ export interface EntityImageProps {
 }
 
 export function EntityImage({ src, alt, fallbackText, sizeClassName, className }: EntityImageProps) {
-  const resolvedSrc = useAuthedImageSrc(src);
+  // In a loading scope the image is its skeleton, and it is not fetched.
+  const held = useLoadingScope();
+  const authedSrc = useAuthedImageSrc(held ? undefined : src);
+  const resolvedSrc = authedSrc;
   // Which src failed, rather than a bare "failed" flag reset from an effect on
   // every src change. The reset is then implicit — a new src simply is not the
   // one that failed — so the fallback initials never survive into the render
@@ -37,6 +45,7 @@ export function EntityImage({ src, alt, fallbackText, sizeClassName, className }
   const [failedSrc, setFailedSrc] = React.useState<string | null>(null);
   const imageFailed = resolvedSrc !== undefined && failedSrc === resolvedSrc;
 
+  if (held) return <EntityImageSkeleton sizeClassName={sizeClassName} className={className} />;
   const showFallback = imageFailed || !resolvedSrc;
   const initials = personInitials(fallbackText ?? alt);
 
@@ -45,7 +54,8 @@ export function EntityImage({ src, alt, fallbackText, sizeClassName, className }
       <div
         aria-label={alt}
         className={cn(
-          'flex shrink-0 select-none items-center justify-center rounded-md border border-ods-border bg-ods-bg text-ods-text-secondary text-h4',
+          'flex shrink-0 select-none items-center justify-center border border-ods-border bg-ods-bg text-ods-text-secondary text-h4',
+          ENTITY_IMAGE_RADIUS_CLASS,
           sizeClassName ?? ENTITY_IMAGE_SIZE,
           className,
         )}
@@ -61,7 +71,8 @@ export function EntityImage({ src, alt, fallbackText, sizeClassName, className }
       alt={alt ?? ''}
       onError={() => setFailedSrc(resolvedSrc)}
       className={cn(
-        'shrink-0 rounded-md border border-ods-border object-contain',
+        'shrink-0 border border-ods-border object-contain',
+        ENTITY_IMAGE_RADIUS_CLASS,
         sizeClassName ?? ENTITY_IMAGE_SIZE,
         className,
       )}
@@ -74,3 +85,15 @@ export function EntityImage({ src, alt, fallbackText, sizeClassName, className }
     />
   );
 }
+
+/** An EntityImage while its record is read: a box of the image's own size and corner. */
+export function EntityImageSkeleton({
+  sizeClassName,
+  className,
+}: Pick<EntityImageProps, 'sizeClassName' | 'className'>) {
+  return (
+    <UnifiedSkeleton
+      className={cn('shrink-0', ENTITY_IMAGE_RADIUS_CLASS, sizeClassName ?? ENTITY_IMAGE_SIZE, className)}
+    />
+  );
+}

package/src/components/ui/error-state.tsx

@@ -2,7 +2,9 @@
 
 import { AlertTriangle, RefreshCw, Home } from 'lucide-react';
 import { cn } from '../../utils/cn';
+import { TextLineSkeleton } from '../loading/unified-skeleton';
 import { Button } from './button';
+import { useLoadingScope } from './loading-scope';
 
 interface ErrorStateProps {
   title?: string;
@@ -29,6 +31,9 @@ export function ErrorState({
   className,
   containerClassName,
 }: ErrorStateProps) {
+  // In a page's loading state the message is read: the title, icon and buttons are the page's own and stay real, the
+  // message's line is its skeleton.
+  const loading = useLoadingScope();
   const getVariantStyles = () => {
     switch (variant) {
       case 'error':
@@ -72,7 +77,9 @@ export function ErrorState({
           {showIcon && <AlertTriangle className={cn('mt-0.5 h-5 w-5 flex-shrink-0', styles.icon)} />}
           <div className="flex-1">
             <h3 className={cn('mb-1 font-semibold', styles.text)}>{title}</h3>
-            <p className={cn('text-h6', styles.text)}>{message}</p>
+            <p className={cn('text-h6', styles.text)}>
+              {loading ? <TextLineSkeleton type="inherit" as="span" className="w-2/3" /> : message}
+            </p>
             {(showRetry || showHome) && (
               <div className="mt-3 flex gap-2">
                 {showRetry && onRetry && (