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

package/src/components/shared/article-author-byline.tsx

@@ -21,16 +21,19 @@
  *     platform awareness; pass copy or leave it absent to render nothing.
  *
  * Render order: avatar → name + job title + date → bio (when present).
- * Returns null when `author` is empty (no card rendered).
+ * Returns null when `author` is empty (no card rendered); in a loading scope it is
+ * `ArticleAuthorBylineSkeleton`.
  */
 
 import { Calendar, User } from 'lucide-react';
-import { useChatRuntime } from '../../contexts/chat-runtime-context';
 import Image from '../../embed-shims/next-image';
 import Link from '../../embed-shims/next-link';
+import { AVATAR_SIZE, AVATAR_SIZE_PX } from '../../styles/component-sizes';
 import { cn } from '../../utils/cn';
 import { formatBioText, formatDateWithTimezone } from '../../utils/format';
-import { getProxiedImageUrl } from '../../utils/image-proxy';
+import { useProxiedImageUrl } from '../chat/hooks/use-proxied-image-url';
+import { TextLineSkeleton, UnifiedSkeleton } from '../loading/unified-skeleton';
+import { useLoadingScope } from '../ui/loading-scope';
 
 export interface ArticleAuthorBylineProps {
   /** Author display name. Required — block is hidden when null/empty. */
@@ -64,6 +67,20 @@ export interface ArticleAuthorBylineProps {
   className?: string;
 }
 
+/** The card's layout, read by the card and by its skeleton, so the skeleton is the card's size. */
+const BYLINE_FRAME_CLASS = cn(
+  'rounded-lg border border-ods-border bg-ods-card p-6',
+  'flex flex-col items-start gap-4 content-md:flex-row',
+);
+/** The byline's avatar at each density, on the shared avatar scale. */
+const BYLINE_AVATAR_SIZE = { md: 'byline', lg: 'xl' } as const;
+const AVATAR_BORDER_CLASS = 'rounded-full border-2 border-ods-border';
+const BODY_CLASS = 'min-w-0 flex-1';
+const NAME_ROW_CLASS = 'flex flex-wrap items-baseline gap-x-3 gap-y-1';
+const NAME_CLASS = 'text-ods-text-primary text-h5';
+const JOB_TITLE_CLASS = 'text-body-sm mt-0.5 font-body text-ods-text-secondary';
+const BIO_CLASS = 'text-body-md mt-2 font-body leading-relaxed text-ods-text-secondary';
+
 function formatDate(value: string | Date): string {
   // A published date is a content date: UTC-pinned through the one renderer, so
   // the server and every client agree on the day (React #418).
@@ -82,39 +99,24 @@ export function ArticleAuthorByline({
   proxyImageUrl,
   className,
 }: ArticleAuthorBylineProps) {
-  // Optional runtime — `useChatRuntime` returns null outside a provider, so
-  // the byline works in bare embeds (raw avatar URL) and proxies whenever the
-  // host mounted a runtime with `imageProxyUrlPrefix` (the hub always does).
-  const runtime = useChatRuntime();
+  // Before the early returns: a hook is called on every render.
+  const proxiedAvatar = useProxiedImageUrl(avatar, { proxyImageUrl });
+  const loading = useLoadingScope();
+  // ONE switch: in a loading scope with no author yet (it is read) the byline is its skeleton; an author it is given
+  // there is the page's own and is drawn as it is.
+  if (loading && !author) return <ArticleAuthorBylineSkeleton size={size} className={className} />;
   if (!author) return null;
 
-  const proxiedAvatar = avatar
-    ? proxyImageUrl
-      ? proxyImageUrl(avatar)
-      : (getProxiedImageUrl(avatar, {
-          proxyPrefix: runtime?.endpoints.imageProxyUrlPrefix,
-          skipDomains: runtime?.endpoints.imageProxySkipDomains,
-          directHttps: true,
-        }) ?? avatar)
-    : '';
-
-  // Class-driven sizing (md = 56px, lg = 64px). The numeric pair feeds only
-  // the Image element's intrinsic width/height attributes (required by the
-  // Next image shim) — layout comes from the classes.
-  const avatarSizeClass = size === 'lg' ? 'w-16 h-16' : 'w-14 h-14';
+  // Class-driven sizing from the shared avatar scale. The pixel size feeds only the Image element's intrinsic
+  // width/height attributes (required by the Next image shim): layout comes from the class.
+  const avatarSizeClass = AVATAR_SIZE[BYLINE_AVATAR_SIZE[size]];
   const avatarIconClass = size === 'lg' ? 'w-8 h-8' : 'w-7 h-7';
-  const avatarDim = size === 'lg' ? 64 : 56;
+  const avatarDim = AVATAR_SIZE_PX[BYLINE_AVATAR_SIZE[size]];
   const formattedBio = formatBioText(bio ?? null);
   const dateLabel = publishedAt ? formatDate(publishedAt) : '';
 
   return (
-    <div
-      className={cn(
-        'rounded-lg border border-ods-border bg-ods-card p-6',
-        'flex flex-col items-start gap-4 content-md:flex-row',
-        className,
-      )}
-    >
+    <div className={cn(BYLINE_FRAME_CLASS, className)}>
       {/* Avatar */}
       <div className="flex-shrink-0">
         {avatar ? (
@@ -123,24 +125,19 @@ export function ArticleAuthorByline({
             alt={author}
             width={avatarDim}
             height={avatarDim}
-            className={cn('rounded-full border-2 border-ods-border object-cover', avatarSizeClass)}
+            className={cn(AVATAR_BORDER_CLASS, 'object-cover', avatarSizeClass)}
           />
         ) : (
-          <div
-            className={cn(
-              'flex items-center justify-center rounded-full border-2 border-ods-border bg-ods-bg',
-              avatarSizeClass,
-            )}
-          >
+          <div className={cn('flex items-center justify-center bg-ods-bg', AVATAR_BORDER_CLASS, avatarSizeClass)}>
             <User className={cn('text-ods-text-secondary', avatarIconClass)} />
           </div>
         )}
       </div>
 
       {/* Name + meta + bio */}
-      <div className="min-w-0 flex-1">
-        <div className="flex flex-wrap items-baseline gap-x-3 gap-y-1">
-          <h3 className="text-ods-text-primary text-h5">
+      <div className={BODY_CLASS}>
+        <div className={NAME_ROW_CLASS}>
+          <h3 className={NAME_CLASS}>
             {href ? (
               <Link href={href} className="transition-colors hover:text-ods-accent">
                 {author}
@@ -156,9 +153,9 @@ export function ArticleAuthorByline({
             </span>
           )}
         </div>
-        {jobTitle && <p className="text-body-sm mt-0.5 font-body text-ods-text-secondary">{jobTitle}</p>}
+        {jobTitle && <p className={JOB_TITLE_CLASS}>{jobTitle}</p>}
         {formattedBio ? (
-          <p className="text-body-md mt-2 font-body leading-relaxed text-ods-text-secondary">{formattedBio}</p>
+          <p className={BIO_CLASS}>{formattedBio}</p>
         ) : fallbackBio ? (
           <p className="text-body-md mt-2 font-body italic text-ods-text-secondary">{fallbackBio}</p>
         ) : null}
@@ -166,3 +163,30 @@ export function ArticleAuthorByline({
     </div>
   );
 }
+
+/**
+ * The byline while its author is read: the card frame, the avatar circle at its size, and bars for the name (h5),
+ * the job title and three bio lines, each inside the loaded text's own element so it takes that line's height.
+ */
+export function ArticleAuthorBylineSkeleton({ size = 'md', className }: { size?: 'md' | 'lg'; className?: string }) {
+  return (
+    <div className={cn(BYLINE_FRAME_CLASS, className)} aria-hidden>
+      <div className="flex-shrink-0">
+        <UnifiedSkeleton variant="circular" className={AVATAR_SIZE[BYLINE_AVATAR_SIZE[size]]} />
+      </div>
+      <div className={cn(BODY_CLASS, 'w-full')}>
+        <div className={NAME_ROW_CLASS}>
+          <h3 className={NAME_CLASS}>
+            <TextLineSkeleton type="inherit" as="span" className="w-40" />
+          </h3>
+        </div>
+        <p className={JOB_TITLE_CLASS}>
+          <TextLineSkeleton type="inherit" as="span" className="w-32" />
+        </p>
+        <p className={BIO_CLASS}>
+          <TextLineSkeleton type="inherit" as="span" lines={3} className="w-full" />
+        </p>
+      </div>
+    </div>
+  );
+}

package/src/components/shared/delivery/delivery-lists.tsx

@@ -40,6 +40,7 @@ import { usePageDataSync } from '../../layout/page-data-sync';
 import { ListEmptyState } from '../../list-empty-state';
 import { DataSyncLine } from '../../ui/data-attribution';
 import { LoadError } from '../../ui/error-state';
+import { useLoadingScope } from '../../ui/loading-scope';
 import { DeliveryTable } from './delivery-table';
 
 const DEFAULT_COMPLETED_ENDPOINT = '/api/delivery/completed';
@@ -87,7 +88,10 @@ export function DeliveryLists({
   const pathname = usePathname();
 
   const [data, setData] = useState<DeliveryResponse | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
+  const [isFetching, setIsLoading] = useState(true);
+  // ONE switch: in a page's loading state nothing is fetched and the lists are their skeletons.
+  const inScope = useLoadingScope();
+  const isLoading = inScope || isFetching;
   const [error, setError] = useState<string | null>(null);
   const [sync, setSync] = useState<DataSync | null>(null);
 
@@ -100,6 +104,7 @@ export function DeliveryLists({
     // rewrites the query string re-runs this effect while the previous pair of
     // requests is still open. Without this guard a slower EARLIER response can
     // resolve last and paint results for a query the user already moved past.
+    if (inScope) return undefined;
     let cancelled = false;
 
     async function fetchDeliveryData() {
@@ -156,7 +161,15 @@ export function DeliveryLists({
     return () => {
       cancelled = true;
     };
-  }, [searchQuery, taskTypeFilter, completedApiEndpoint, inProgressApiEndpoint, searchParamKey, taskTypeParamKey]);
+  }, [
+    inScope,
+    searchQuery,
+    taskTypeFilter,
+    completedApiEndpoint,
+    inProgressApiEndpoint,
+    searchParamKey,
+    taskTypeParamKey,
+  ]);
 
   const filteredCompleted = data?.completed || [];
   const filteredInProgress = data?.inProgress || [];

package/src/components/shared/delivery/delivery-row.tsx

@@ -25,11 +25,14 @@
  */
 
 import Link from '../../../embed-shims/next-link';
+import { TEXT_LINES_MIN } from '../../../styles/component-sizes';
 import { type DeliveryItem, TASK_TYPE_LABELS, TASK_TYPE_TEXT_COLORS } from '../../../types/delivery';
 import { getStatusColorScheme } from '../../../utils';
 import { cn } from '../../../utils/cn';
+import { TextLineSkeleton } from '../../loading/unified-skeleton';
 import { AvatarStack } from '../../ui/avatar-stack';
-import { StatusBadge } from '../../ui/status-badge';
+import { useLoadingScope } from '../../ui/loading-scope';
+import { StatusBadge, StatusBadgeSkeleton } from '../../ui/status-badge';
 
 /** Same heuristic as DeliveryTable's local helper. Inlined so the row
  *  primitive owns its complete rendering contract. */
@@ -73,7 +76,21 @@ export interface DeliveryRowProps {
   className?: string;
 }
 
+/** The row's layout, read by the row and by its skeleton, so the skeleton is the row's size. */
+const ROW_INNER_CLASS =
+  'flex w-full flex-col items-start justify-between gap-[12px] content-md:flex-row content-md:gap-[16px]';
+const ROW_TEXT_COLUMN_CLASS = 'flex w-full min-w-0 flex-1 flex-col gap-[12px] content-md:w-auto content-md:gap-[16px]';
+const ROW_CAPTION_CLASS = 'text-ods-text-secondary text-h5';
+const ROW_TITLE_LINE_CLASS = `flex items-center text-h3 ${TEXT_LINES_MIN[1]}`;
+const ROW_SUBTITLE_LINE_CLASS = `flex items-center text-h5 ${TEXT_LINES_MIN[1]}`;
+const ROW_DESCRIPTION_LINE_CLASS = `flex items-center text-h4 ${TEXT_LINES_MIN[3]}`;
+const ROW_META_CLASS =
+  'flex w-full flex-shrink-0 flex-row items-center gap-2 self-stretch content-md:w-auto content-md:flex-col content-md:items-end content-md:self-start';
+const ROW_BASE_CLASS = 'block p-[12px] text-inherit no-underline transition-colors duration-150 content-md:p-[16px]';
+
 export function DeliveryRow({ item, href, target, caption, id, className }: DeliveryRowProps) {
+  // While the page is read the task is not known: the row is its skeleton.
+  if (useLoadingScope()) return <DeliveryRowSkeleton caption={caption} className={className} />;
   const taskType = item.taskType as keyof typeof TASK_TYPE_LABELS;
   const typeBadgeLabel = TASK_TYPE_LABELS[taskType] || 'TASK';
   const typeBadgeTextColor = TASK_TYPE_TEXT_COLORS[taskType] || '';
@@ -82,16 +99,16 @@ export function DeliveryRow({ item, href, target, caption, id, className }: Deli
   const subtitle = `ACTIVE ${relativeTime}${item.listNames.length > 0 ? `, ${item.listNames.join(', ')}` : ''}, ${item.id}`;
 
   const inner = (
-    <div className="flex w-full flex-col items-start justify-between gap-[12px] content-md:flex-row content-md:gap-[16px]">
+    <div className={ROW_INNER_CLASS}>
       {/* Left: caption (optional) + title + subtitle + description */}
-      <div className="flex w-full min-w-0 flex-1 flex-col gap-[12px] content-md:w-auto content-md:gap-[16px]">
-        {caption && <p className="text-ods-text-secondary text-h5">{caption}</p>}
-        <div className="flex min-h-[24px] items-center content-md:min-h-[24px]">
+      <div className={ROW_TEXT_COLUMN_CLASS}>
+        {caption && <p className={ROW_CAPTION_CLASS}>{caption}</p>}
+        <div className={ROW_TITLE_LINE_CLASS}>
           <h3 className="line-clamp-2 flex-1 break-words tracking-[-0.36px] text-ods-text-primary text-h3 content-md:truncate">
             {item.title}
           </h3>
         </div>
-        <div className="flex min-h-[20px] items-center">
+        <div className={ROW_SUBTITLE_LINE_CLASS}>
           {/* Relative time is wall-clock-derived: on an SSR host the server and
               client render different strings a moment apart — text-only, so
               suppress instead of forcing a client-only render. */}
@@ -99,7 +116,7 @@ export function DeliveryRow({ item, href, target, caption, id, className }: Deli
             {subtitle}
           </p>
         </div>
-        <div className="flex min-h-[72px] items-center">
+        <div className={ROW_DESCRIPTION_LINE_CLASS}>
           <p className="line-clamp-3 break-words text-ods-text-secondary text-h4">
             {item.description || 'No description provided'}
           </p>
@@ -112,7 +129,7 @@ export function DeliveryRow({ item, href, target, caption, id, className }: Deli
           assignee owns the trailing slot of the meta row; a column of
           right-aligned orphans under the description reads as clutter
           on small screens). */}
-      <div className="flex w-full flex-shrink-0 flex-row items-center gap-2 self-stretch content-md:w-auto content-md:flex-col content-md:items-end content-md:self-start">
+      <div className={ROW_META_CLASS}>
         <StatusBadge
           text={item.status.toUpperCase()}
           colorScheme={statusBadgeScheme}
@@ -140,7 +157,7 @@ export function DeliveryRow({ item, href, target, caption, id, className }: Deli
   );
 
   const baseClass = cn(
-    'block p-[12px] text-inherit no-underline transition-colors duration-150 content-md:p-[16px]',
+    ROW_BASE_CLASS,
     // `scroll-mt-24` is paid for whether `id` is set or not (it's a
     // single Tailwind utility, no runtime cost). Keeping it
     // unconditional means a future caller adding `id` doesn't also
@@ -178,3 +195,32 @@ export function DeliveryRow({ item, href, target, caption, id, className }: Deli
     </div>
   );
 }
+
+/**
+ * A delivery row while its task is read: the same row, its caption for real, the title, subtitle and description
+ * as bars at their type steps, and the two badges as their skeletons.
+ */
+export function DeliveryRowSkeleton({ caption, className }: Pick<DeliveryRowProps, 'caption' | 'className'>) {
+  return (
+    <div className={cn(ROW_BASE_CLASS, 'scroll-mt-24', className)} aria-hidden>
+      <div className={ROW_INNER_CLASS}>
+        <div className={ROW_TEXT_COLUMN_CLASS}>
+          {caption && <p className={ROW_CAPTION_CLASS}>{caption}</p>}
+          <div className={ROW_TITLE_LINE_CLASS}>
+            <TextLineSkeleton type="h3" className="w-3/5" />
+          </div>
+          <div className={ROW_SUBTITLE_LINE_CLASS}>
+            <TextLineSkeleton type="h5" className="w-2/5" />
+          </div>
+          <div className={ROW_DESCRIPTION_LINE_CLASS}>
+            <TextLineSkeleton type="h4" lines={2} className="w-full" />
+          </div>
+        </div>
+        <div className={ROW_META_CLASS}>
+          <StatusBadgeSkeleton variant="card" />
+          <StatusBadgeSkeleton variant="card" />
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/shared/delivery/delivery-table.tsx

@@ -20,46 +20,29 @@
 import type { DeliveryItem } from '../../../types/delivery';
 import { devSectionAnchorId } from '../../../utils/dev-sections/dev-section-param-keys';
 import { CONTENT_CARD_SKELETON_FRAME_CLASS } from '../../chat/entity-cards/content-card-frame';
-import { UnifiedSkeleton } from '../../loading/unified-skeleton';
-import { DeliveryRow } from './delivery-row';
+import { DeliveryRow, DeliveryRowSkeleton } from './delivery-row';
 
 interface DeliveryTableProps {
   items: DeliveryItem[];
   isLoading?: boolean;
 }
 
-/**
- * Skeleton loader for rows - matching responsive structure
- */
-function SkeletonRow() {
+/** The card's frame and a row's separator, read by the table and by its skeleton. */
+const TABLE_FRAME_CLASS = `w-full ${CONTENT_CARD_SKELETON_FRAME_CLASS}`;
+const ROW_SEPARATOR_CLASS = 'border-b border-ods-border last:border-b-0';
+/** How many rows the skeleton draws (the table's first fold). */
+export const DELIVERY_TABLE_SKELETON_ROWS = 5;
+
+/** The table while its tasks are read: the same card, `DELIVERY_TABLE_SKELETON_ROWS` row skeletons. */
+export function DeliveryTableSkeleton() {
   return (
-    <div className="border-b border-ods-border p-[12px] last:border-b-0 content-md:p-[16px]">
-      <div className="flex w-full flex-col items-start justify-between gap-[12px] content-md:flex-row content-md:gap-[16px]">
-        {/* Left: Title, subtitle, and description skeleton */}
-        <div className="flex w-full min-w-0 flex-1 flex-col gap-[12px] content-md:w-auto content-md:gap-[16px]">
-          {/* Title skeleton - responsive */}
-          <div className="flex min-h-[24px] items-center">
-            <UnifiedSkeleton className="h-[20px] w-full rounded" />
-          </div>
-          {/* Subtitle skeleton - 1 line */}
-          <div className="flex min-h-[20px] items-center">
-            <UnifiedSkeleton className="h-[20px] w-1/2 rounded" />
-          </div>
-          {/* Description skeleton - 3 lines */}
-          <div className="flex min-h-[72px] items-center">
-            <div className="flex-1 space-y-1">
-              <UnifiedSkeleton className="h-[20px] w-full rounded" />
-              <UnifiedSkeleton className="h-[20px] w-full rounded" />
-              <UnifiedSkeleton className="h-[20px] w-2/3 rounded" />
-            </div>
+    <div className={TABLE_FRAME_CLASS} aria-hidden>
+      <div className="w-full">
+        {Array.from({ length: DELIVERY_TABLE_SKELETON_ROWS }, (_, i) => (
+          <div key={i} className={ROW_SEPARATOR_CLASS}>
+            <DeliveryRowSkeleton />
           </div>
-        </div>
-
-        {/* Right: Badge skeleton - two stacked badges */}
-        <div className="flex flex-shrink-0 flex-col gap-2 self-start">
-          <UnifiedSkeleton className="h-[32px] w-[100px] rounded" />
-          <UnifiedSkeleton className="h-[32px] w-[120px] rounded" />
-        </div>
+        ))}
       </div>
     </div>
   );
@@ -71,29 +54,19 @@ function SkeletonRow() {
  */
 export function DeliveryTable({ items, isLoading = false }: DeliveryTableProps) {
   // Show skeletons while loading
-  if (isLoading) {
-    return (
-      <div className={`w-full ${CONTENT_CARD_SKELETON_FRAME_CLASS}`}>
-        <div className="w-full">
-          {[1, 2, 3, 4, 5].map(i => (
-            <SkeletonRow key={i} />
-          ))}
-        </div>
-      </div>
-    );
-  }
+  if (isLoading) return <DeliveryTableSkeleton />;
 
   // Empty state
   if (items.length === 0) {
     return (
-      <div className={`w-full ${CONTENT_CARD_SKELETON_FRAME_CLASS} p-[var(--spacing-system-xlf)] text-center`}>
+      <div className={`${TABLE_FRAME_CLASS} p-[var(--spacing-system-xlf)] text-center`}>
         <p className="text-ods-text-secondary text-h6">No tasks available</p>
       </div>
     );
   }
 
   return (
-    <div className={`w-full ${CONTENT_CARD_SKELETON_FRAME_CLASS}`}>
+    <div className={TABLE_FRAME_CLASS}>
       <div className="w-full">
         {items.map(item => (
           // DOM id lives on DeliveryRow's own outer element (no wrapper
@@ -101,7 +74,7 @@ export function DeliveryTable({ items, isLoading = false }: DeliveryTableProps)
           // → `#delivery-<external_id>`; `useScrollToHash` in
           // `delivery-lists.tsx` finds the row by id and scrolls. The
           // outer wrapper here ONLY exists for the row separators.
-          <div key={item.id} className="border-b border-ods-border last:border-b-0">
+          <div key={item.id} className={ROW_SEPARATOR_CLASS}>
             <DeliveryRow item={item} id={devSectionAnchorId('delivery', item.id)} />
           </div>
         ))}

package/src/components/shared/detail-page-skeleton.tsx

@@ -18,6 +18,20 @@ export interface DetailPageSkeletonProps {
   region?: boolean;
 }
 
+/** `content-md:grid-cols-N` as static classes the build can see (a class built from a number is never generated). */
+const METADATA_COLUMNS_CLASS: Record<number, string> = {
+  1: 'content-md:grid-cols-1',
+  2: 'content-md:grid-cols-2',
+  3: 'content-md:grid-cols-3',
+  4: 'content-md:grid-cols-4',
+  5: 'content-md:grid-cols-5',
+  6: 'content-md:grid-cols-6',
+};
+
+/**
+ * @deprecated Render the detail page itself inside a `LoadingScope` (e.g. `ArticleDetailLayout` with its sections): each part draws its own skeleton. Kept so hosts on an older release keep compiling; nothing in the lib uses it.
+ */
+// loading-standard-ok: deprecated re-export kept for external consumers
 export function DetailPageSkeleton({
   metadataColumns = 4,
   showImageGallery = true,
@@ -41,7 +55,7 @@ export function DetailPageSkeleton({
 
       {/* Metadata Grid Skeleton */}
       <div
-        className={`grid grid-cols-1 content-md:grid-cols-${metadataColumns} w-full overflow-hidden rounded-md border border-ods-border`}
+        className={`grid grid-cols-1 ${METADATA_COLUMNS_CLASS[metadataColumns] ?? METADATA_COLUMNS_CLASS[4]} w-full overflow-hidden rounded-md border border-ods-border`}
       >
         {Array.from({ length: metadataColumns }).map((_, i) => (
           <div

package/src/components/shared/dev-section/dev-card-row.tsx

@@ -26,8 +26,11 @@
  */
 
 import type { ReactNode } from 'react';
+import { TEXT_LINES_MIN } from '../../../styles/component-sizes';
 import { LoadingRegion } from '../../loading/loading-region';
-import { UnifiedSkeleton } from '../../loading/unified-skeleton';
+import { TextLineSkeleton } from '../../loading/unified-skeleton';
+import { useLoadingScope } from '../../ui/loading-scope';
+import { StatusBadgeSkeleton } from '../../ui/status-badge';
 
 export interface DevCardRowContentProps {
   title: string;
@@ -42,6 +45,15 @@ export interface DevCardRowContentProps {
   rightBadges: ReactNode;
 }
 
+/** The row's layout, read by the row and by its skeleton, so the skeleton is the row's size. */
+const ROW_INNER_CLASS =
+  'flex w-full flex-col items-start justify-between gap-[12px] content-md:flex-row content-md:gap-[16px]';
+const ROW_TEXT_COLUMN_CLASS = 'flex w-full min-w-0 flex-1 flex-col gap-[12px] content-md:w-auto content-md:gap-[16px]';
+const ROW_TITLE_LINE_CLASS = `flex items-center text-h3 ${TEXT_LINES_MIN[1]}`;
+const ROW_SUBTITLE_LINE_CLASS = `flex items-center text-h5 ${TEXT_LINES_MIN[1]}`;
+const ROW_DESCRIPTION_LINE_CLASS = `flex items-center text-h4 ${TEXT_LINES_MIN[3]}`;
+const ROW_BADGES_CLASS = 'flex flex-shrink-0 flex-col gap-2 self-start';
+
 export function DevCardRowContent({
   title,
   subtitle,
@@ -49,22 +61,47 @@ export function DevCardRowContent({
   emptyDescription = 'No description provided',
   rightBadges,
 }: DevCardRowContentProps) {
+  // While the page is read the record is not known: the row's content is its skeleton.
+  if (useLoadingScope()) return <DevCardRowContentSkeleton />;
   return (
-    <div className="flex w-full flex-col items-start justify-between gap-[12px] content-md:flex-row content-md:gap-[16px]">
-      <div className="flex w-full min-w-0 flex-1 flex-col gap-[12px] content-md:w-auto content-md:gap-[16px]">
-        <div className="flex min-h-[24px] items-center">
+    <div className={ROW_INNER_CLASS}>
+      <div className={ROW_TEXT_COLUMN_CLASS}>
+        <div className={ROW_TITLE_LINE_CLASS}>
           <h3 className="line-clamp-2 flex-1 break-words tracking-[-0.36px] text-ods-text-primary text-h3 content-md:truncate">
             {title}
           </h3>
         </div>
-        <div className="flex min-h-[20px] items-center">
+        <div className={ROW_SUBTITLE_LINE_CLASS}>
           <p className="truncate uppercase tracking-[-0.28px] text-ods-text-secondary text-h5">{subtitle}</p>
         </div>
-        <div className="flex min-h-[72px] items-center">
+        <div className={ROW_DESCRIPTION_LINE_CLASS}>
           <p className="line-clamp-3 break-words text-ods-text-secondary text-h4">{description || emptyDescription}</p>
         </div>
       </div>
-      <div className="flex flex-shrink-0 flex-col gap-2 self-start">{rightBadges}</div>
+      <div className={ROW_BADGES_CLASS}>{rightBadges}</div>
+    </div>
+  );
+}
+
+/** A row's content while its record is read: the title, subtitle and description as bars, two badge skeletons. */
+export function DevCardRowContentSkeleton() {
+  return (
+    <div className={ROW_INNER_CLASS} aria-hidden>
+      <div className={ROW_TEXT_COLUMN_CLASS}>
+        <div className={ROW_TITLE_LINE_CLASS}>
+          <TextLineSkeleton type="h3" className="w-full" />
+        </div>
+        <div className={ROW_SUBTITLE_LINE_CLASS}>
+          <TextLineSkeleton type="h5" className="w-1/2" />
+        </div>
+        <div className={ROW_DESCRIPTION_LINE_CLASS}>
+          <TextLineSkeleton type="h4" lines={3} className="w-full" />
+        </div>
+      </div>
+      <div className={ROW_BADGES_CLASS}>
+        <StatusBadgeSkeleton variant="card" />
+        <StatusBadgeSkeleton variant="card" />
+      </div>
     </div>
   );
 }
@@ -77,27 +114,7 @@ export function DevCardRowContent({
 export function DevCardRowSkeleton() {
   return (
     <div className="border-b border-ods-border p-[12px] last:border-b-0 content-md:p-[16px]">
-      <div className="flex w-full flex-col items-start justify-between gap-[12px] content-md:flex-row content-md:gap-[16px]">
-        <div className="flex w-full min-w-0 flex-1 flex-col gap-[12px] content-md:w-auto content-md:gap-[16px]">
-          <div className="flex min-h-[24px] items-center">
-            <UnifiedSkeleton className="h-[20px] w-full rounded" />
-          </div>
-          <div className="flex min-h-[20px] items-center">
-            <UnifiedSkeleton className="h-[20px] w-1/2 rounded" />
-          </div>
-          <div className="flex min-h-[72px] items-center">
-            <div className="flex-1 space-y-1">
-              <UnifiedSkeleton className="h-[20px] w-full rounded" />
-              <UnifiedSkeleton className="h-[20px] w-full rounded" />
-              <UnifiedSkeleton className="h-[20px] w-2/3 rounded" />
-            </div>
-          </div>
-        </div>
-        <div className="flex flex-shrink-0 flex-col gap-2 self-start">
-          <UnifiedSkeleton className="h-[32px] w-[100px] rounded" />
-          <UnifiedSkeleton className="h-[32px] w-[120px] rounded" />
-        </div>
-      </div>
+      <DevCardRowContentSkeleton />
     </div>
   );
 }

package/src/components/shared/dev-section/dev-section-view.tsx

@@ -115,7 +115,7 @@ export function DevSectionView({ sectionKey, preControls, children, showHeading
   // The list reports where its records are mirrored from; the line states it at the end of the section's heading row
   // (under the page's title when this view shows no heading of its own).
   return (
-    <PageDataSyncProvider>
+    <PageDataSyncProvider stated={section.mirrored}>
       <div className="flex w-full flex-col gap-10">
         {showHeading ? (
           <SectionHeading title={section.hero.title} punctuation=":" action={<PageDataSyncRow inline />} />

package/src/components/shared/doc-search/use-doc-search.ts

@@ -238,7 +238,7 @@ export function useDocSearch(config: UseDocSearchConfig) {
   }, [debouncedQuery, searchable, source, tableIdsKey, resolvedSearchEndpoint]);
 
   // Derived loading state — single source of truth for "should the
-  // dropdown show 'Loading...' instead of 'No results found'":
+  // dropdown draw its loading rows instead of 'No results found'":
   const isLoading = query.trim().length >= 2 && (query !== debouncedQuery || isFetching);
 
   // Track whether dropdown should stay open (external link opened in new tab).

package/src/components/shared/legal-document/index.ts

@@ -9,6 +9,8 @@
 export {
   LegalDocumentPage,
   legalDocumentStampLabel,
+  LegalDocumentSkeleton,
+  LEGAL_DOCUMENT_SKELETON_SECTIONS,
   type LegalDocumentPageProps,
   type LegalDocumentMarkdownRendererProps,
 } from './legal-document-page';