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

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

@@ -16,16 +16,16 @@
 import { ExternalLink } from 'lucide-react';
 import type React from 'react';
 import Link from '../../../embed-shims/next-link';
-import { UnifiedSkeleton } from '../../loading/unified-skeleton';
+import { useLoadingScope } from '../../ui/loading-scope';
 import { StatusBadge } from '../../ui/status-badge';
 import type { DataRoomDocCardItem } from '../types/entities/data-room-doc';
 import {
   COMPACT_CARD_OUTER,
   COMPACT_CARD_OUTER_STATIC,
-  COMPACT_CARD_SKELETON_OUTER,
   COMPACT_CARD_TEXT_COL,
   COMPACT_CARD_TITLE,
 } from '../utils/compact-card-classes';
+import { CompactCardSkeleton } from '../utils/compact-card-skeleton';
 
 export interface DataRoomDocCardAnchorProps {
   href: string;
@@ -58,6 +58,7 @@ export interface DataRoomDocCardProps {
 }
 
 export function DataRoomDocCard({ item, className, badgeText, anchorProps }: DataRoomDocCardProps) {
+  if (useLoadingScope()) return <DataRoomDocCardSkeleton className={className} />;
   const body = (
     <>
       <span className={COMPACT_CARD_TEXT_COL}>
@@ -102,21 +103,13 @@ export function DataRoomDocCard({ item, className, badgeText, anchorProps }: Dat
 
 export function DataRoomDocCardSkeleton({ className }: { className?: string }) {
   return (
-    <span className={`${COMPACT_CARD_SKELETON_OUTER} ${className ?? ''}`}>
-      <span className={COMPACT_CARD_TEXT_COL}>
-        <span className="flex min-w-0 items-center gap-1.5">
-          <UnifiedSkeleton as="span" className="h-3.5 w-2/3 rounded" />
-          <UnifiedSkeleton as="span" className="h-4 w-16 rounded-full" />
-        </span>
-        <UnifiedSkeleton as="span" className="h-4 w-1/2 rounded" />
-        <span className="flex min-w-0 flex-col gap-0">
-          <UnifiedSkeleton as="span" className="h-5 w-5/6 rounded" />
-          <UnifiedSkeleton as="span" className="h-5 w-3/4 rounded" />
-        </span>
-      </span>
-      <span className="flex h-5 shrink-0 items-center self-start">
-        <UnifiedSkeleton as="span" className="h-3.5 w-3.5 rounded" />
-      </span>
-    </span>
+    <CompactCardSkeleton
+      slot={false}
+      titleWidth="w-2/3"
+      titleBadges={['w-16']}
+      rows={[{ width: 'w-1/2' }, { width: 'w-5/6', lines: 2 }]}
+      trailingIcon
+      className={className}
+    />
   );
 }

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

@@ -8,6 +8,7 @@
  */
 
 import Link from '../../../embed-shims/next-link';
+import { TEXT_LINES_MIN } from '../../../styles/component-sizes';
 import type { DesignDoc } from '../../../types/design-doc';
 import { cn } from '../../../utils/cn';
 import { formatDateShort } from '../../../utils/date-formatters';
@@ -16,9 +17,10 @@ import {
   designDocReadiness,
   formatCompletionLabelWithBlockers,
 } from '../../../utils/design-doc-readiness';
-import { InteractiveSkeleton, MediaSkeleton, TextSkeleton } from '../../loading/unified-skeleton';
-import { AvatarStack, type AvatarStackPerson } from '../../ui/avatar-stack';
-import { StatusBadge } from '../../ui/status-badge';
+import { TextLineSkeleton } from '../../loading/unified-skeleton';
+import { AvatarStack, AvatarStackSkeleton, type AvatarStackPerson } from '../../ui/avatar-stack';
+import { useLoadingScope } from '../../ui/loading-scope';
+import { StatusBadge, StatusBadgeSkeleton } from '../../ui/status-badge';
 import { safeHref } from '../utils/compact-card-classes';
 import { CONTENT_CARD_FRAME_CLASS, CONTENT_CARD_SKELETON_FRAME_CLASS } from './content-card-frame';
 
@@ -54,31 +56,46 @@ export interface DesignDocCardProps {
   className?: string;
 }
 
-/** The card's loading state, built from the unified skeleton primitives inside the card's own frame. */
-export function DesignDocCardSkeleton() {
+// The card's boxes, read by the card AND its skeleton, so the two are one size at every width.
+const DESIGN_DOC_CARD_BODY = 'flex h-full flex-col gap-[var(--spacing-system-mf)] p-[var(--spacing-system-lf)]';
+const DESIGN_DOC_CARD_HEADER = 'flex w-full items-center gap-[16px]';
+const DESIGN_DOC_CARD_HEADING = 'flex min-w-0 flex-1 flex-col';
+/** Two `text-h3` lines. */
+const DESIGN_DOC_CARD_TITLE_ROW = `flex items-center text-h3 ${TEXT_LINES_MIN[2]}`;
+const DESIGN_DOC_CARD_META_ROW = `flex items-center text-h5 ${TEXT_LINES_MIN[1]}`;
+/** Three `text-h4` lines. */
+const DESIGN_DOC_CARD_SUMMARY_ROW = `flex items-center text-h4 ${TEXT_LINES_MIN[3]}`;
+const DESIGN_DOC_CARD_FOOTER = 'flex w-full items-center justify-between gap-2';
+
+/**
+ * The card while it is read, in the card's own boxes: the title as two `text-h3` lines, the meta as a `text-h5`
+ * line, the readiness badge's box (beside the title from md, its own row below), the summary as three `text-h4` lines,
+ * the sign-off caption as a `text-h6` line and the people as a 24px avatar.
+ */
+export function DesignDocCardSkeleton({ className }: { className?: string } = {}) {
   return (
-    <div
-      className={cn(
-        CONTENT_CARD_SKELETON_FRAME_CLASS,
-        'flex h-full flex-col gap-[var(--spacing-system-mf)] p-[var(--spacing-system-lf)]',
-      )}
-    >
-      <div className="flex w-full items-center gap-[16px]">
-        <div className="flex min-w-0 flex-1 flex-col gap-2">
-          <TextSkeleton.Subheading className="w-3/4" />
-          <TextSkeleton.Caption className="w-1/3" />
+    <div className={cn(CONTENT_CARD_SKELETON_FRAME_CLASS, DESIGN_DOC_CARD_BODY, className)} aria-hidden>
+      <div className={DESIGN_DOC_CARD_HEADER}>
+        <div className={DESIGN_DOC_CARD_HEADING}>
+          <div className={DESIGN_DOC_CARD_TITLE_ROW}>
+            <TextLineSkeleton type="h3" lines={2} className="w-3/4" />
+          </div>
+          <div className={DESIGN_DOC_CARD_META_ROW}>
+            <TextLineSkeleton type="h5" className="w-1/3" />
+          </div>
         </div>
-        <InteractiveSkeleton.Chip className="hidden w-24 md:block" />
+        <StatusBadgeSkeleton variant="button" className="hidden md:inline-flex" />
+      </div>
+      <div className="md:hidden">
+        <StatusBadgeSkeleton variant="button" />
       </div>
-      <div className="flex min-h-[72px] flex-col justify-center gap-2">
-        <TextSkeleton.Body />
-        <TextSkeleton.Body />
-        <TextSkeleton.Body className="w-5/6" />
+      <div className={DESIGN_DOC_CARD_SUMMARY_ROW}>
+        <TextLineSkeleton type="h4" lines={3} className="w-full" />
       </div>
       <div className="flex-1" />
-      <div className="flex w-full items-center justify-between gap-2">
-        <TextSkeleton.Caption className="w-1/3" />
-        <MediaSkeleton.Avatar size="sm" />
+      <div className={DESIGN_DOC_CARD_FOOTER}>
+        <TextLineSkeleton type="h6" className="w-1/3" />
+        <AvatarStackSkeleton count={1} size="xs" className="shrink-0" />
       </div>
     </div>
   );
@@ -88,14 +105,15 @@ export function DesignDocCard({ doc, href, target, rel, className }: DesignDocCa
   const readiness = DESIGN_DOC_READINESS_DISPLAY[designDocReadiness(doc.completion)];
   const people = designDocPeople(doc);
   const link = safeHref(href ?? null);
+  if (useLoadingScope()) return <DesignDocCardSkeleton className={className} />;
   const body = (
     <>
-      <div className="flex w-full items-center gap-[16px]">
-        <div className="flex min-w-0 flex-1 flex-col">
-          <div className="flex min-h-[48px] items-center">
+      <div className={DESIGN_DOC_CARD_HEADER}>
+        <div className={DESIGN_DOC_CARD_HEADING}>
+          <div className={DESIGN_DOC_CARD_TITLE_ROW}>
             <h3 className="line-clamp-2 flex-1 text-ods-text-primary text-h3">{doc.title || 'Untitled design doc'}</h3>
           </div>
-          <div className="flex min-h-[20px] items-center">
+          <div className={DESIGN_DOC_CARD_META_ROW}>
             <p className="truncate text-ods-text-secondary text-h5">{designDocMetaLine(doc)}</p>
           </div>
         </div>
@@ -110,11 +128,11 @@ export function DesignDocCard({ doc, href, target, rel, className }: DesignDocCa
       <div className="md:hidden">
         <StatusBadge text={readiness.label} colorScheme={readiness.scheme} variant="button" singleLine />
       </div>
-      <div className="flex min-h-[72px] items-center">
+      <div className={DESIGN_DOC_CARD_SUMMARY_ROW}>
         <p className="line-clamp-3 text-ods-text-secondary text-h4">{doc.summary || ''}</p>
       </div>
       <div className="flex-1" />
-      <div className="flex w-full items-center justify-between gap-2">
+      <div className={DESIGN_DOC_CARD_FOOTER}>
         <span className="truncate text-ods-text-secondary text-h6">
           {formatCompletionLabelWithBlockers(doc.completion)}
         </span>
@@ -122,11 +140,7 @@ export function DesignDocCard({ doc, href, target, rel, className }: DesignDocCa
       </div>
     </>
   );
-  const outer = cn(
-    CONTENT_CARD_FRAME_CLASS,
-    'flex h-full flex-col gap-[var(--spacing-system-mf)] p-[var(--spacing-system-lf)]',
-    className,
-  );
+  const outer = cn(CONTENT_CARD_FRAME_CLASS, DESIGN_DOC_CARD_BODY, className);
   return link ? (
     <Link href={link} target={target} rel={rel} className={outer}>
       {body}

package/src/components/chat/entity-cards/dispatch.tsx

@@ -56,6 +56,7 @@ import { faqItemAnchor } from '../../../utils/faq-anchor';
 import { formatDateUTC as formatDate } from '../../../utils/format';
 import { programMetaFormatters, programMetaLine } from '../../../utils/program-instant';
 import { PROGRAM_META_RENDERERS } from '../../../utils/program-meta-renderers';
+import { defaultTableIdForDocumentType, getSourceLabel, SOURCE_ICON_NAMES } from '../../../utils/source-icons';
 import { AgentMark } from '../../agent-mark';
 import { EntityIcon } from '../../icon-display';
 import { ArrowRightUpIcon } from '../../icons-v2-generated/arrows/arrow-right-up-icon';
@@ -82,13 +83,14 @@ import { QuestionCircleIcon } from '../../icons-v2-generated/signs-and-symbols/q
 import { TrophyIcon } from '../../icons-v2-generated/sport/trophy-icon';
 import { Rocket02Icon } from '../../icons-v2-generated/vehicles-and-delivery/rocket-02-icon';
 import { TruckFastIcon } from '../../icons-v2-generated/vehicles-and-delivery/truck-fast-icon';
+import type { ProductReleaseCardProps } from '../../shared/product-release/product-release-card';
+import { ProductReleaseCardSkeleton } from '../../shared/product-release/product-release-card-skeleton';
 import type { ActionsMenuGroup } from '../../ui/actions-menu';
 import { VendorIcon } from '../../vendor-icon';
 import { useChatPanel } from '../chat-panel-context';
 import type { ChatRef } from '../chat-ref.types';
 import { useChatCardItem } from '../hooks/use-chat-card-item';
 import { MingoInfoCard, MingoInfoCardSkeleton, type MingoInfoCardStatus } from '../mingo-info-card';
-import { NavLinkAnchorViaRuntime } from '../nav-link-anchor-via-runtime';
 import { SourceActionButton } from '../source-action-button';
 import type { PrReviewState, GitHubActivityKind } from '../types/entities/github-activity';
 import { formatInvestorUpdatePeriod } from '../types/entities/investor-update';
@@ -100,11 +102,9 @@ import { executeNavigation } from '../utils/execute-navigation';
 import { clickupTaskUrl } from '../utils/external-app-urls';
 import { computeIsNewTab, buildAnchorProps } from '../utils/nav-anchor-props';
 import { readFetchedCardTitle } from '../utils/resolve-fetched-card-href';
-import { defaultTableIdForDocumentType, getSourceLabel, SOURCE_ICON_NAMES } from '../utils/source-icons';
 import { resolveSourceIcon, sourceRowCtxFromRuntime } from '../utils/source-row-cta';
 import { BlockCard } from './block-card';
 import { BlogCardSkeleton } from './blog-card';
-import { CampaignCardAdminSkeleton } from './campaign-card-admin';
 import { CaseStudyCardSkeleton } from './case-study-card';
 import { ChatVideoEntityCard } from './chat-video-entity-card';
 import { CustomerInterviewCardSkeleton } from './customer-interview-card';
@@ -118,7 +118,6 @@ import {
 } from './github-activity-card';
 import { InvestorUpdateCardSkeleton } from './investor-update-card';
 import { OnboardingGuideCardSkeleton } from './onboarding-guide-card';
-import { ProductReleaseCardSkeleton, type ProductReleaseCardProps } from './product-release-card';
 import { defaultBuildProductReleaseCardProps } from './product-release-card-defaults';
 import { ProgramCardSkeleton } from './program-card';
 import { RoadmapCardSkeleton } from './roadmap-card';
@@ -894,6 +893,11 @@ function CampaignChatCard({
   );
 }
 
+/** `CampaignChatCard` while its campaign is fetched: the info card it draws (`MingoInfoCard`), as its skeleton. */
+function CampaignChatCardSkeleton() {
+  return <MingoInfoCardSkeleton />;
+}
+
 /**
  * Shared `MingoInfoCard` shell for fetch-mode entity cards. `cover` renders as
  * the 40px image when present; otherwise `fallbackIcon` shows. Anchor + menu +
@@ -1863,7 +1867,7 @@ export const CHAT_CARD_REGISTRY: Record<string, ChatCardRegistryEntry> = {
     label: 'Marketing campaign',
     contentRefType: 'marketing_campaign',
     bareInline: true,
-    skeleton: () => <CampaignCardAdminSkeleton />,
+    skeleton: () => <CampaignChatCardSkeleton />,
     // No public viewer — synthesize the hub-internal admin URL post-fetch
     // so the wrapper + isNewTab computation see the actual destination.
     fallbackHref: (item: ChatCardItem) => (item?.id ? `/admin/campaigns/${encodeURIComponent(String(item.id))}` : null),
@@ -2253,11 +2257,3 @@ export function renderChatInlineEntityCard(
 
   return loader;
 }
-
-// =============================================================================
-// NavLink wiring for callers that need to compose anchors (Task 2 + Task 3)
-// =============================================================================
-
-/** Re-export so call sites can wrap any subtree with chat-runtime
- *  routing in a single import. */
-export { NavLinkAnchorViaRuntime };

package/src/components/chat/entity-cards/employee-entry-card.tsx

@@ -1,10 +1,9 @@
 import type React from 'react';
 import Image from '../../../embed-shims/next-image';
 import Link from '../../../embed-shims/next-link';
-import { getProxiedImageUrl } from '../../../utils/image-proxy-stub';
 import { StatusBadge, type StatusBadgeProps } from '../../ui/status-badge';
-import { AdminContentCard } from './admin-content-card';
-import { AdminContentCardSkeleton } from './admin-content-card-grid';
+import { useProxiedImageUrl } from '../hooks/use-proxied-image-url';
+import { AdminContentCard, AdminContentCardSkeleton } from './admin-content-card';
 
 /** The fields every people-hub employee entry shares. Entity-specific bindings
  *  (`WhatIShippedCard`, `HowIWorkCard`) map their own date column to `dateLabel`
@@ -76,6 +75,7 @@ export function EmployeeEntryCard({
   anchorProps,
   className,
 }: EmployeeEntryCardProps) {
+  const authorAvatar = useProxiedImageUrl(entry.author?.avatar_url, { directHttps: false });
   const card = (
     <AdminContentCard
       imageUrl={entry.featured_image || entry.main_video_thumbnail}
@@ -100,9 +100,9 @@ export function EmployeeEntryCard({
       meta={
         <>
           <span className="flex min-w-0 items-center gap-2">
-            {entry.author?.avatar_url ? (
+            {authorAvatar ? (
               <Image
-                src={getProxiedImageUrl(entry.author.avatar_url) ?? entry.author.avatar_url}
+                src={authorAvatar}
                 alt=""
                 // One line of the meta row tall (16px on a phone, 20px from md), so the
                 // row is exactly the line the skeleton reserves.

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

@@ -1,7 +1,11 @@
 import type React from 'react';
 import Link from '../../../embed-shims/next-link';
+import { AVATAR_SIZE } from '../../../styles/component-sizes';
 import type { EntityAuthor } from '../../../types/entity-author';
+import { cn } from '../../../utils/cn';
 import { formatDate, nameInitials } from '../../../utils/format';
+import { TextLineSkeleton, UnifiedSkeleton } from '../../loading/unified-skeleton';
+import { useLoadingScope } from '../../ui/loading-scope';
 import { SquareAvatar } from '../../ui/square-avatar';
 
 /**
@@ -60,8 +64,11 @@ export interface EntityAuthorCardProps {
    * Use for entity-specific labels (e.g. onboarding-guide section/step,
    * webinar host, customer-interview customer). The grid auto-sizes via
    * `grid-cols-N`.
+   *
+   * `optional`: a cell only some records carry (a date a record may leave empty). It is not drawn in a loading scope
+   * (list the cells every record has there) and its loaded cell is marked `data-loading-optional`.
    */
-  extraCells?: Array<{ value: React.ReactNode; label: string; uppercase?: boolean }>;
+  extraCells?: Array<{ value: React.ReactNode; label: string; uppercase?: boolean; optional?: boolean }>;
   /** When true, render the author cell even when `author?.full_name` is
    *  missing — using the `EMPTY_AUTHOR_PLACEHOLDER` shape above. Used by
    *  catalog grids that must keep a fixed shape so skeleton alignment
@@ -75,26 +82,70 @@ export interface EntityAuthorCardProps {
  * `DM_Sans` 14px secondary label. A non-text value (a `DepartmentBadge`) renders
  * as given in the value slot.
  */
+/** The cells' layout, read by the cells and by their skeletons, so a skeleton is its cell's size. */
+const VALUE_CELL_CLASS = 'flex flex-col gap-3 p-4';
+const CELL_STACK_CLASS = 'flex flex-col gap-0';
+const VALUE_TEXT_CLASS = 'text-ods-text-primary text-h4';
+const VALUE_NODE_CLASS = 'flex min-h-6 items-center';
+const LABEL_TEXT_CLASS = 'text-ods-text-secondary text-h6';
+const AUTHOR_CELL_CLASS = 'flex items-center gap-3 p-4';
+const AUTHOR_TEXT_CLASS = 'flex min-w-0 flex-1 flex-col gap-0';
+const AUTHOR_NAME_CLASS = 'truncate text-ods-text-primary text-h3';
+const AUTHOR_AVATAR_SIZE = 'md';
+/** Every cell but the last: a divider below it on a phone, beside it from `md`. */
+const CELL_DIVIDER_CLASS = 'border-b md:border-b-0 md:border-r border-ods-border';
+const GRID_FRAME_CLASS = 'grid grid-cols-1 w-full overflow-hidden rounded-md border border-ods-border';
+
+/** `md:grid-cols-N` for a grid of `cells` cells, as static classes the build can see. */
+function gridColsClass(cells: number): string {
+  return cells >= 4
+    ? 'md:grid-cols-4'
+    : cells === 3
+      ? 'md:grid-cols-3'
+      : cells === 2
+        ? 'md:grid-cols-2'
+        : 'md:grid-cols-1';
+}
+
 export function EntityMetadataValueCell({
   value,
   label,
   className,
   uppercase = true,
+  optional = false,
 }: {
   value: React.ReactNode;
   label: string;
   className?: string;
   uppercase?: boolean;
+  /** A cell only some records carry: marked `data-loading-optional` (its loading state does not draw it). */
+  optional?: boolean;
 }) {
+  if (useLoadingScope()) return <EntityMetadataValueCellSkeleton label={label} className={className} />;
   return (
-    <div className={`flex flex-col gap-3 p-4 ${className ?? ''}`}>
-      <div className="flex flex-col gap-0">
+    <div className={cn(VALUE_CELL_CLASS, className)} data-loading-optional={optional || undefined}>
+      <div className={CELL_STACK_CLASS}>
         {typeof value === 'string' ? (
-          <p className="text-ods-text-primary text-h4">{uppercase ? value.toLocaleUpperCase() : value}</p>
+          <p className={VALUE_TEXT_CLASS}>{uppercase ? value.toLocaleUpperCase() : value}</p>
         ) : (
-          <div className="flex min-h-6 items-center">{value}</div>
+          <div className={VALUE_NODE_CLASS}>{value}</div>
         )}
-        <p className="text-ods-text-secondary text-h6">{label}</p>
+        <p className={LABEL_TEXT_CLASS}>{label}</p>
+      </div>
+    </div>
+  );
+}
+
+/** A value cell while its value is read: the label is the page's own words, the value a bar of its line. */
+export function EntityMetadataValueCellSkeleton({ label, className }: { label: string; className?: string }) {
+  return (
+    <div className={cn(VALUE_CELL_CLASS, className)}>
+      <div className={CELL_STACK_CLASS}>
+        {/* The value's own paragraph (a read value that wraps to more lines pairs with it line for line). */}
+        <p className={VALUE_TEXT_CLASS}>
+          <TextLineSkeleton as="span" type="inherit" className="w-24" />
+        </p>
+        <p className={LABEL_TEXT_CLASS}>{label}</p>
       </div>
     </div>
   );
@@ -115,24 +166,26 @@ export function EntityMetadataAuthorCell({
   authorHref?: string;
   className?: string;
 }) {
+  const loading = useLoadingScope();
+  if (loading) return <EntityMetadataAuthorCellSkeleton className={className} />;
   // Trimmed real name gates the LINK — a placeholder/unknown label must
   // never render as a clickable author (an authorHref passed alongside an
   // empty name would link "Unknown Author").
   const trimmedName = typeof author.full_name === 'string' ? author.full_name.trim() : '';
   const fullName = trimmedName || 'Unknown Author';
   return (
-    <div className={`flex items-center gap-3 p-4 ${className ?? ''}`}>
+    <div className={cn(AUTHOR_CELL_CLASS, className)}>
       <SquareAvatar
         src={author.avatar_url || ''}
         alt={fullName}
         fallback={nameInitials(fullName, '')}
-        size="md"
+        size={AUTHOR_AVATAR_SIZE}
         variant="round"
       />
-      <div className="flex min-w-0 flex-1 flex-col gap-0">
+      <div className={AUTHOR_TEXT_CLASS}>
         {/* title = full-name tooltip on truncation (carried over from the
             release page's cell when it adopted this shared one). */}
-        <p className="truncate text-ods-text-primary text-h3" title={fullName}>
+        <p className={AUTHOR_NAME_CLASS} title={fullName}>
           {authorHref && trimmedName ? (
             <Link href={authorHref} className="transition-colors hover:text-ods-accent">
               {fullName}
@@ -141,12 +194,62 @@ export function EntityMetadataAuthorCell({
             fullName
           )}
         </p>
-        <p className="text-ods-text-secondary text-h6">{author.job_title || roleLabel}</p>
+        <p className={LABEL_TEXT_CLASS}>{author.job_title || roleLabel}</p>
       </div>
     </div>
   );
 }
 
+/** The author cell while it is read: the avatar's box and a bar for the name and the role (both read data). */
+export function EntityMetadataAuthorCellSkeleton({ className }: { className?: string }) {
+  return (
+    <div className={cn(AUTHOR_CELL_CLASS, className)}>
+      <UnifiedSkeleton variant="circular" className={cn('shrink-0', AVATAR_SIZE[AUTHOR_AVATAR_SIZE])} />
+      <div className={AUTHOR_TEXT_CLASS}>
+        <TextLineSkeleton type="h3" className="w-32" />
+        <TextLineSkeleton type="h6" className="w-20" />
+      </div>
+    </div>
+  );
+}
+
+export interface EntityAuthorCardSkeletonProps {
+  /** The labels of the extra cells, in order (the page's own words: "Section", "Customer"). */
+  extraCellLabels?: string[];
+  /** The Published cell's label, or `null` when the card has no Published cell. Defaults to "Published". */
+  publishedLabel?: string | null;
+  /**
+   * How many optional cells the loaded card may add (cells only some records carry). They are not drawn, but they
+   * count in the grid's columns, so every drawn cell is as wide as on the loaded card. Default 0.
+   */
+  optionalCells?: number;
+  className?: string;
+}
+
+/**
+ * The card while it is read: the same grid, every label real, every value a bar, the author cell an avatar box and
+ * two bars. `EntityAuthorCard` draws it in a loading scope.
+ */
+export function EntityAuthorCardSkeleton({
+  extraCellLabels = [],
+  publishedLabel = 'Published',
+  optionalCells = 0,
+  className,
+}: EntityAuthorCardSkeletonProps) {
+  const totalCells = extraCellLabels.length + optionalCells + (publishedLabel === null ? 0 : 1) + 1;
+  return (
+    <div className={cn(GRID_FRAME_CLASS, gridColsClass(totalCells), className)}>
+      {extraCellLabels.map((label, i) => (
+        <EntityMetadataValueCellSkeleton key={`${label}-${i}`} label={label} className={CELL_DIVIDER_CLASS} />
+      ))}
+      {publishedLabel !== null && (
+        <EntityMetadataValueCellSkeleton label={publishedLabel} className={CELL_DIVIDER_CLASS} />
+      )}
+      <EntityMetadataAuthorCellSkeleton />
+    </div>
+  );
+}
+
 export function EntityAuthorCard({
   author,
   roleLabel = 'Author',
@@ -157,6 +260,19 @@ export function EntityAuthorCard({
   renderEmptyAuthor = false,
   className,
 }: EntityAuthorCardProps) {
+  const loading = useLoadingScope();
+  // In a loading scope the card is its skeleton: its cells are the ones the caller asked for (a Published cell
+  // when it passed `publishedAt` at all), never decided by data that is not read yet.
+  if (loading) {
+    return (
+      <EntityAuthorCardSkeleton
+        extraCellLabels={(extraCells ?? []).filter(cell => !cell.optional).map(cell => cell.label)}
+        optionalCells={(extraCells ?? []).filter(cell => cell.optional).length}
+        publishedLabel={publishedAt === undefined ? null : publishedLabel}
+        className={className}
+      />
+    );
+  }
   const hasAuthor = !!author?.full_name;
   if (!hasAuthor && !renderEmptyAuthor) return null;
   const effectiveAuthor = hasAuthor ? author : EMPTY_AUTHOR_PLACEHOLDER;
@@ -169,39 +285,29 @@ export function EntityAuthorCard({
 
   const showDateCell = !!dateLabel;
   const extras = extraCells ?? [];
-  // Total cell count = extras + (optional Published) + Author. Map to
-  // an explicit tailwind `md:grid-cols-N` class string so JIT picks it
-  // up at build time.
+  // Total cell count = extras + (optional Published) + Author. The last cell (Author) closes the grid without a
+  // trailing divider so the rounded corner stays clean.
   const totalCells = extras.length + (showDateCell ? 1 : 0) + 1;
-  const gridColsClass =
-    totalCells >= 4
-      ? 'md:grid-cols-4'
-      : totalCells === 3
-        ? 'md:grid-cols-3'
-        : totalCells === 2
-          ? 'md:grid-cols-2'
-          : 'md:grid-cols-1';
-
-  // Helper — every cell EXCEPT the last needs the dividers (bottom on
-  // mobile, right on desktop). The last cell (Author) closes the grid
-  // without a trailing divider so the rounded corner stays clean.
-  const dividerClass = 'border-b md:border-b-0 md:border-r border-ods-border';
 
   return (
-    <div
-      className={`grid grid-cols-1 ${gridColsClass} w-full overflow-hidden rounded-md border border-ods-border ${className ?? ''}`}
-    >
+    <div className={cn(GRID_FRAME_CLASS, gridColsClass(totalCells), className)}>
       {extras.map((cell, i) => (
         <EntityMetadataValueCell
           key={`${cell.label}-${i}`}
           value={cell.value}
           label={cell.label}
           uppercase={cell.uppercase ?? true}
-          className={dividerClass}
+          optional={cell.optional}
+          className={CELL_DIVIDER_CLASS}
         />
       ))}
       {showDateCell && (
-        <EntityMetadataValueCell value={dateLabel} label={publishedLabel} uppercase={false} className={dividerClass} />
+        <EntityMetadataValueCell
+          value={dateLabel}
+          label={publishedLabel}
+          uppercase={false}
+          className={CELL_DIVIDER_CLASS}
+        />
       )}
       <EntityMetadataAuthorCell author={effectiveAuthor} roleLabel={roleLabel} authorHref={authorHref} />
     </div>