@flamingo-stack/openframe-frontend-core 0.0.777 → 0.0.781

package/src/components/chat/entity-cards/customer-interview-card.tsx

@@ -30,12 +30,12 @@ import {
 } from '../utils/compact-card-classes';
 import { CompactCardSkeleton } from '../utils/compact-card-skeleton';
 import { CONTENT_CARD_FRAME_CLASS, CONTENT_CARD_SKELETON_FRAME_CLASS } from './content-card-frame';
-import { EntityPortraitCard, EntityPortraitCardSkeleton } from './entity-portrait-card';
+import { EntityPortraitCard } from './entity-portrait-card';
 import { hideOnError } from './use-cover-image-fallback';
 import { useEntityCardLink } from './use-entity-card-link';
 import { useEntityCardPlaceholder } from './use-entity-card-placeholder';
 
-export interface CustomerInterviewCardProps {
+interface LoadedCustomerInterviewCardProps {
   interview: CustomerInterview;
   href: string;
   /** When `_blank`, opens in a new tab. Set by chat dispatch via
@@ -51,6 +51,14 @@ export interface CustomerInterviewCardProps {
   className?: string;
 }
 
+/**
+ * The record and its link, or `loading` while the host reads it: the card then draws its own loading form, as it
+ * does in a loading scope.
+ */
+export type CustomerInterviewCardProps =
+  | (LoadedCustomerInterviewCardProps & { loading?: boolean })
+  | (Partial<LoadedCustomerInterviewCardProps> & { loading: true });
+
 // The default card's boxes, read by the card AND its skeleton, so the two are one size at every width.
 const INTERVIEW_CARD_BODY = 'flex flex-col gap-6 p-6';
 const INTERVIEW_CARD_COVER = `relative ${MEDIA_ASPECT.og} w-full shrink-0 overflow-hidden rounded-sm`;
@@ -65,7 +73,7 @@ const INTERVIEW_TYPE_LABEL = 'Customer Interview';
  * summary as three `text-h6` lines, and the person row (48px portrait, name and job-title lines). `portrait` is the
  * shared portrait skeleton with the static chip.
  */
-export function CustomerInterviewCardSkeleton({
+function CustomerInterviewCardSkeleton({
   size = 'default',
   showTypeBadge = true,
   className,
@@ -77,7 +85,14 @@ export function CustomerInterviewCardSkeleton({
 }) {
   if (size === 'portrait') {
     return (
-      <EntityPortraitCardSkeleton typeLabel={showTypeBadge ? INTERVIEW_TYPE_LABEL : undefined} className={className} />
+      <EntityPortraitCard
+        loading
+        href=""
+        imageAlt=""
+        title=""
+        typeLabel={showTypeBadge ? INTERVIEW_TYPE_LABEL : undefined}
+        className={className}
+      />
     );
   }
   if (size === 'sm') {
@@ -107,7 +122,21 @@ export function CustomerInterviewCardSkeleton({
   );
 }
 
-export function CustomerInterviewCard({
+/** ONE switch: in a loading scope (or `loading`) the card is its own loading form. */
+export function CustomerInterviewCard(props: CustomerInterviewCardProps) {
+  if (useLoadingScope() || props.loading) {
+    return (
+      <CustomerInterviewCardSkeleton
+        size={props.size}
+        showTypeBadge={props.showTypeBadge}
+        className={props.className}
+      />
+    );
+  }
+  return <LoadedCustomerInterviewCard {...props} />;
+}
+
+function LoadedCustomerInterviewCard({
   interview,
   href,
   target: targetProp,
@@ -117,7 +146,7 @@ export function CustomerInterviewCard({
   size = 'default',
   showTypeBadge = true,
   className,
-}: CustomerInterviewCardProps) {
+}: LoadedCustomerInterviewCardProps) {
   const { target, rel } = useEntityCardLink({
     href,
     targetPlatform,
@@ -130,9 +159,6 @@ export function CustomerInterviewCard({
     aspect: size === 'sm' ? 'square' : 'wide',
   });
   const thumbnailUrl = interview.featured_image || placeholderUrl || null;
-  if (useLoadingScope()) {
-    return <CustomerInterviewCardSkeleton size={size} showTypeBadge={showTypeBadge} className={className} />;
-  }
 
   if (size === 'sm') {
     return (
@@ -150,7 +176,7 @@ export function CustomerInterviewCard({
             />
           ) : null}
           {interview.main_video_url ? (
-            <span className="absolute inset-0 flex items-center justify-center bg-black/30">
+            <span data-loading-optional className="absolute inset-0 flex items-center justify-center bg-black/30">
               <Video className="h-4 w-4 text-ods-text-on-dark" />
             </span>
           ) : null}
@@ -214,7 +240,7 @@ export function CustomerInterviewCard({
                 onError={hideOnError}
               />
               {interview.main_video_url && (
-                <div className="absolute inset-0 flex items-center justify-center bg-black/40">
+                <div data-loading-optional className="absolute inset-0 flex items-center justify-center bg-black/40">
                   <div className="flex h-16 w-16 items-center justify-center rounded-full bg-ods-accent/90">
                     <Video className="h-8 w-8 text-ods-text-on-accent" />
                   </div>
@@ -258,7 +284,10 @@ export function CustomerInterviewCard({
                 </div>
               )}
               {interview.msp?.icon_url && (
-                <div className="absolute -bottom-1 -right-1 flex h-6 w-6 items-center justify-center overflow-hidden rounded-full bg-ods-text-primary ring-1 ring-ods-bg">
+                <div
+                  data-loading-optional
+                  className="absolute -bottom-1 -right-1 flex h-6 w-6 items-center justify-center overflow-hidden rounded-full bg-ods-text-primary ring-1 ring-ods-bg"
+                >
                   <Image
                     src={interview.msp.icon_url}
                     alt={interview.msp.name || 'MSP'}
@@ -273,7 +302,12 @@ export function CustomerInterviewCard({
             <div className={INTERVIEW_CARD_PERSON_TEXT}>
               <p className="truncate text-ods-text-primary text-h6">
                 {interview.user?.full_name || 'Anonymous'}
-                {interview.msp?.name && <span className="text-ods-text-secondary"> • {interview.msp.name}</span>}
+                {interview.msp?.name && (
+                  <span data-loading-optional className="text-ods-text-secondary">
+                    {' '}
+                    • {interview.msp.name}
+                  </span>
+                )}
               </p>
               <p className="truncate text-ods-text-secondary text-h6">{interview.user?.job_title || ' '}</p>
             </div>

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

@@ -101,7 +101,7 @@ export function DataRoomDocCard({ item, className, badgeText, anchorProps }: Dat
   );
 }
 
-export function DataRoomDocCardSkeleton({ className }: { className?: string }) {
+function DataRoomDocCardSkeleton({ className }: { className?: string }) {
   return (
     <CompactCardSkeleton
       slot={false}

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

@@ -18,9 +18,9 @@ import {
   formatCompletionLabelWithBlockers,
 } from '../../../utils/design-doc-readiness';
 import { TextLineSkeleton } from '../../loading/unified-skeleton';
-import { AvatarStack, AvatarStackSkeleton, type AvatarStackPerson } from '../../ui/avatar-stack';
+import { AvatarStack, type AvatarStackPerson } from '../../ui/avatar-stack';
 import { useLoadingScope } from '../../ui/loading-scope';
-import { StatusBadge, StatusBadgeSkeleton } from '../../ui/status-badge';
+import { StatusBadge } 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';
 
@@ -72,7 +72,7 @@ const DESIGN_DOC_CARD_FOOTER = 'flex w-full items-center justify-between gap-2';
  * 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 } = {}) {
+function DesignDocCardSkeleton({ className }: { className?: string } = {}) {
   return (
     <div className={cn(CONTENT_CARD_SKELETON_FRAME_CLASS, DESIGN_DOC_CARD_BODY, className)} aria-hidden>
       <div className={DESIGN_DOC_CARD_HEADER}>
@@ -84,10 +84,10 @@ export function DesignDocCardSkeleton({ className }: { className?: string } = {}
             <TextLineSkeleton type="h5" className="w-1/3" />
           </div>
         </div>
-        <StatusBadgeSkeleton variant="button" className="hidden md:inline-flex" />
+        <StatusBadge loading text="" variant="button" className="hidden md:inline-flex" />
       </div>
       <div className="md:hidden">
-        <StatusBadgeSkeleton variant="button" />
+        <StatusBadge loading text="" variant="button" />
       </div>
       <div className={DESIGN_DOC_CARD_SUMMARY_ROW}>
         <TextLineSkeleton type="h4" lines={3} className="w-full" />
@@ -95,7 +95,7 @@ export function DesignDocCardSkeleton({ className }: { className?: string } = {}
       <div className="flex-1" />
       <div className={DESIGN_DOC_CARD_FOOTER}>
         <TextLineSkeleton type="h6" className="w-1/3" />
-        <AvatarStackSkeleton count={1} size="xs" className="shrink-0" />
+        <AvatarStack loading people={[]} max={1} size="xs" className="shrink-0" />
       </div>
     </div>
   );

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

@@ -83,14 +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 { LoadedProductReleaseCardProps } from '../../shared/product-release/product-release-card';
+import { ProductReleaseCard } from '../../shared/product-release/product-release-card';
 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 { MingoInfoCard, type MingoInfoCardStatus } from '../mingo-info-card';
 import { SourceActionButton } from '../source-action-button';
 import type { PrReviewState, GitHubActivityKind } from '../types/entities/github-activity';
 import { formatInvestorUpdatePeriod } from '../types/entities/investor-update';
@@ -104,10 +104,10 @@ import { computeIsNewTab, buildAnchorProps } from '../utils/nav-anchor-props';
 import { readFetchedCardTitle } from '../utils/resolve-fetched-card-href';
 import { resolveSourceIcon, sourceRowCtxFromRuntime } from '../utils/source-row-cta';
 import { BlockCard } from './block-card';
-import { BlogCardSkeleton } from './blog-card';
-import { CaseStudyCardSkeleton } from './case-study-card';
+import { BlogCard } from './blog-card';
+import { CaseStudyCard } from './case-study-card';
 import { ChatVideoEntityCard } from './chat-video-entity-card';
-import { CustomerInterviewCardSkeleton } from './customer-interview-card';
+import { CustomerInterviewCard } from './customer-interview-card';
 import { DeletedDataCard } from './deleted-data-card';
 import { designDocMetaLine } from './design-doc-card';
 import {
@@ -116,11 +116,11 @@ import {
   kindLabel as githubKindLabel,
   reviewStateLabel,
 } from './github-activity-card';
-import { InvestorUpdateCardSkeleton } from './investor-update-card';
-import { OnboardingGuideCardSkeleton } from './onboarding-guide-card';
+import { InvestorUpdateCard } from './investor-update-card';
+import { OnboardingGuideCard } from './onboarding-guide-card';
 import { defaultBuildProductReleaseCardProps } from './product-release-card-defaults';
-import { ProgramCardSkeleton } from './program-card';
-import { RoadmapCardSkeleton } from './roadmap-card';
+import { ProgramCard } from './program-card';
+import { RoadmapCard } from './roadmap-card';
 import { TaskTypeIcon } from './task-type-icon';
 
 // =============================================================================
@@ -217,7 +217,7 @@ export interface ChatCardDispatchExtras {
    *  `lib/utils/product-release-card-props.ts`. */
   buildProductReleaseCardProps?: (
     release: unknown,
-  ) => Omit<ProductReleaseCardProps, 'size' | 'title' | 'summary' | 'version' | 'anchorProps'>;
+  ) => Omit<LoadedProductReleaseCardProps, 'size' | 'title' | 'summary' | 'version' | 'anchorProps'>;
   /** Build a branded OG placeholder URL from an entity title. Compact chat-
    *  inline cards (`size='sm'` for blog/case-study/customer-interview/
    *  investor-update/onboarding-guide) pass the result as `placeholderUrl`
@@ -893,11 +893,6 @@ 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 +
@@ -1376,7 +1371,7 @@ function refHydratedEntry(
     contentRefType: docType,
     noComposedHref: true,
     fallbackHref: (item: { url?: string | null }) => item?.url ?? null,
-    skeleton: () => <MingoInfoCardSkeleton />,
+    skeleton: () => <MingoInfoCard loading title="" />,
     render: (item, chatRef, opts) => renderRef(fetchedItemDisplayRef(item, chatRef), opts),
   };
 }
@@ -1560,7 +1555,7 @@ function employeeEntryRegistryEntries(): Record<string, ChatCardRegistryEntry> {
     label: cfg.label,
     bareInline: true,
     contentRefType: docType,
-    skeleton: () => <MingoInfoCardSkeleton />,
+    skeleton: () => <MingoInfoCard loading title="" />,
     render: (item, chatRef, opts) => (
       <GlyphChatCard
         chatRef={fetchedEmployeeEntryDisplayRef(item, chatRef)}
@@ -1596,7 +1591,7 @@ function programRegistryEntries(): Record<string, ChatCardRegistryEntry> {
     label: cfg.label,
     contentRefType: cfg.contentRefType,
     bareInline: true,
-    skeleton: () => <ProgramCardSkeleton size="sm" />,
+    skeleton: () => <ProgramCard loading size="sm" />,
     render: (item, chatRef, opts) => (
       <ProgramChatCard
         item={item}
@@ -1647,7 +1642,7 @@ function roadmapRegistryEntries(): Record<string, ChatCardRegistryEntry> {
     bareInline: true,
     ...(cfg.noComposedHref ? { noComposedHref: true } : {}),
     ...(cfg.fallbackHref ? { fallbackHref: cfg.fallbackHref } : {}),
-    skeleton: () => <RoadmapCardSkeleton size="sm" />,
+    skeleton: () => <RoadmapCard loading size="sm" />,
     render: (item, chatRef, opts) => (
       <RoadmapChatCard
         item={item}
@@ -1700,7 +1695,7 @@ export const CHAT_CARD_REGISTRY: Record<string, ChatCardRegistryEntry> = {
     contentRefType: 'faq',
     noComposedHref: true,
     fallbackHref: (item: ChatCardItem) => (item?.id != null ? `/faqs#${faqItemAnchor(item.id)}` : null),
-    skeleton: () => <MingoInfoCardSkeleton />,
+    skeleton: () => <MingoInfoCard loading title="" />,
     render: (item, chatRef, opts) => (
       <FaqChatCard chatRef={fetchedFaqDisplayRef(item, chatRef)} isNewTab={opts.isNewTab} discuss={opts.discuss} />
     ),
@@ -1715,7 +1710,7 @@ export const CHAT_CARD_REGISTRY: Record<string, ChatCardRegistryEntry> = {
     contentRefType: TRUST_CENTER_DOCUMENT_TYPE,
     noComposedHref: true,
     fallbackHref: () => TRUST_CENTER_PAGE_PATH,
-    skeleton: () => <MingoInfoCardSkeleton />,
+    skeleton: () => <MingoInfoCard loading title="" />,
     render: (item, chatRef, opts) => (
       <TrustCenterChatCard item={item} chatRef={chatRef} isNewTab={opts.isNewTab} discuss={opts.discuss} />
     ),
@@ -1753,7 +1748,7 @@ export const CHAT_CARD_REGISTRY: Record<string, ChatCardRegistryEntry> = {
     label: 'Blog post',
     contentRefType: 'blog_post_existing',
     bareInline: true,
-    skeleton: () => <BlogCardSkeleton size="sm" />,
+    skeleton: () => <BlogCard loading size="sm" />,
     render: (item, chatRef, opts) => (
       <BlogChatCard
         item={item}
@@ -1769,7 +1764,7 @@ export const CHAT_CARD_REGISTRY: Record<string, ChatCardRegistryEntry> = {
     label: 'Case study',
     contentRefType: 'case_study',
     bareInline: true,
-    skeleton: () => <CaseStudyCardSkeleton size="sm" />,
+    skeleton: () => <CaseStudyCard loading size="sm" />,
     render: (item, chatRef, opts) => (
       <CaseStudyChatCard
         item={item}
@@ -1786,7 +1781,7 @@ export const CHAT_CARD_REGISTRY: Record<string, ChatCardRegistryEntry> = {
     bareInline: true,
     noComposedHref: true,
     fallbackHref: (item: { url?: string | null }) => item?.url ?? null,
-    skeleton: () => <MingoInfoCardSkeleton />,
+    skeleton: () => <MingoInfoCard loading title="" />,
     render: (item, chatRef, opts) => (
       <DesignDocChatCard item={item} chatRef={chatRef} isNewTab={opts.isNewTab} discuss={opts.discuss} />
     ),
@@ -1795,7 +1790,7 @@ export const CHAT_CARD_REGISTRY: Record<string, ChatCardRegistryEntry> = {
     label: 'Customer interview',
     contentRefType: 'customer_interview',
     bareInline: true,
-    skeleton: () => <CustomerInterviewCardSkeleton size="sm" />,
+    skeleton: () => <CustomerInterviewCard loading size="sm" />,
     render: (item, chatRef, opts) => (
       <CustomerInterviewChatCard
         item={item}
@@ -1810,7 +1805,7 @@ export const CHAT_CARD_REGISTRY: Record<string, ChatCardRegistryEntry> = {
     label: 'Product release',
     contentRefType: 'product_release',
     bareInline: true,
-    skeleton: () => <ProductReleaseCardSkeleton size="sm" />,
+    skeleton: () => <ProductReleaseCard loading size="sm" />,
     render: (item, chatRef, opts) => {
       // Embedder-provided builder wins; lib default fills in otherwise
       // (covers `coverImage`, `hasVideoCover`, `formattedDate` — the
@@ -1835,7 +1830,7 @@ export const CHAT_CARD_REGISTRY: Record<string, ChatCardRegistryEntry> = {
     label: 'Investor update',
     contentRefType: 'investor_update',
     bareInline: true,
-    skeleton: () => <InvestorUpdateCardSkeleton size="sm" />,
+    skeleton: () => <InvestorUpdateCard loading size="sm" />,
     render: (item, chatRef, opts) => (
       <InvestorUpdateChatCard
         item={item}
@@ -1852,7 +1847,7 @@ export const CHAT_CARD_REGISTRY: Record<string, ChatCardRegistryEntry> = {
     bareInline: true,
     // "Display" affordance (verbatim guide body) instead of "Ask".
     displayAction: true,
-    skeleton: () => <OnboardingGuideCardSkeleton size="sm" />,
+    skeleton: () => <OnboardingGuideCard loading size="sm" />,
     render: (item, chatRef, opts) => (
       <OnboardingGuideChatCard
         item={item}
@@ -1867,7 +1862,7 @@ export const CHAT_CARD_REGISTRY: Record<string, ChatCardRegistryEntry> = {
     label: 'Marketing campaign',
     contentRefType: 'marketing_campaign',
     bareInline: true,
-    skeleton: () => <CampaignChatCardSkeleton />,
+    skeleton: () => <MingoInfoCard loading title="" />,
     // 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),

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

@@ -1,9 +1,10 @@
 import type React from 'react';
 import Image from '../../../embed-shims/next-image';
 import Link from '../../../embed-shims/next-link';
+import { useLoadingScope } from '../../ui/loading-scope';
 import { StatusBadge, type StatusBadgeProps } from '../../ui/status-badge';
 import { useProxiedImageUrl } from '../hooks/use-proxied-image-url';
-import { AdminContentCard, AdminContentCardSkeleton } from './admin-content-card';
+import { AdminContentCard } from './admin-content-card';
 
 /** The fields every people-hub employee entry shares. Entity-specific bindings
  *  (`WhatIShippedCard`, `HowIWorkCard`) map their own date column to `dateLabel`
@@ -17,7 +18,7 @@ export interface EmployeeEntryCardData {
   author?: { full_name?: string | null; avatar_url?: string | null } | null;
 }
 
-export interface EmployeeEntryCardProps {
+interface LoadedEmployeeEntryCardProps {
   entry: EmployeeEntryCardData;
   /** Already-formatted date shown in the meta row. Bindings own the format so
    *  the UTC-pin convention stays in `utils/format`, not in the card. */
@@ -37,6 +38,14 @@ export interface EmployeeEntryCardProps {
   className?: string;
 }
 
+/**
+ * The entry, or `loading` while the host reads it: the card then draws its own loading form (the admin card's), as it
+ * does in a loading scope. `actions` then says what the actions row shows (a node drawn for real and inert, `true`
+ * button bars, absent none).
+ */
+export type EmployeeEntryCardProps =
+  (LoadedEmployeeEntryCardProps & { loading?: boolean }) | (Partial<LoadedEmployeeEntryCardProps> & { loading: true });
+
 /** Entry lifecycle → the standard badge colour scheme (the same ODS pairs every status badge uses). */
 const STATUS_BADGE_SCHEME: Record<string, NonNullable<StatusBadgeProps['colorScheme']>> = {
   published: 'success',
@@ -56,6 +65,22 @@ export function EmployeeEntryBadge({ children }: { children: string }) {
   return <StatusBadge text={children} colorScheme="default" variant="button" singleLine />;
 }
 
+/** ONE switch: in a loading scope (or `loading`) the card is the admin card's loading form, box for box. */
+export function EmployeeEntryCard(props: EmployeeEntryCardProps) {
+  if (useLoadingScope() || props.loading) {
+    return (
+      <AdminContentCard
+        loading
+        title=""
+        className={props.className}
+        actions={props.actions || false}
+        subtitleRow={false}
+      />
+    );
+  }
+  return <LoadedEmployeeEntryCard {...props} />;
+}
+
 /**
  * THE people-hub employee-entry card. Wraps `AdminContentCard` with the canonical
  * mapping (cover = featured_image || main_video_thumbnail, OG placeholder
@@ -65,7 +90,7 @@ export function EmployeeEntryBadge({ children }: { children: string }) {
  * format and which extra badges they add, so the card itself cannot drift
  * between the dashboard and the related-content rail.
  */
-export function EmployeeEntryCard({
+function LoadedEmployeeEntryCard({
   entry,
   dateLabel,
   extraBadges,
@@ -74,7 +99,7 @@ export function EmployeeEntryCard({
   actions,
   anchorProps,
   className,
-}: EmployeeEntryCardProps) {
+}: LoadedEmployeeEntryCardProps) {
   const authorAvatar = useProxiedImageUrl(entry.author?.avatar_url, { directHttps: false });
   const card = (
     <AdminContentCard
@@ -120,7 +145,7 @@ export function EmployeeEntryCard({
       actions={actions}
       // Every row keeps its space, so every card in a rail or a grid is one
       // height with its rows aligned, and `EmployeeEntryCardSkeleton` (the
-      // shared AdminContentCardSkeleton) matches it box for box.
+      // shared `AdminContentCard loading`) matches it box for box.
       reserveRows
       // An entry has no subtitle line: nothing to reserve between title and summary.
       subtitleRow={false}
@@ -135,13 +160,3 @@ export function EmployeeEntryCard({
     card
   );
 }
-
-/**
- * The employee-entry card's placeholder: THE admin card skeleton, the same
- * component every `AdminContentCard reserveRows` grid uses, so the loading card
- * and the real one are the same box. `actions` matches a card rendered with an
- * owner action row (the dashboards); a read-only card (rails) has none.
- */
-export function EmployeeEntryCardSkeleton({ className, actions = false }: { className?: string; actions?: boolean }) {
-  return <AdminContentCardSkeleton className={className} actions={actions} subtitleRow={false} />;
-}

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

@@ -75,6 +75,9 @@ export interface EntityAuthorCardProps {
    *  holds. Defaults to false. */
   renderEmptyAuthor?: boolean;
   className?: string;
+  /** The record is still being read: the card draws its skeleton, its cells the ones the caller asked for (a
+   *  Published cell when `publishedAt` is passed at all, `null` included). A loading scope does the same. */
+  loading?: boolean;
 }
 
 /**
@@ -137,7 +140,7 @@ export function EntityMetadataValueCell({
 }
 
 /** 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 }) {
+function EntityMetadataValueCellSkeleton({ label, className }: { label: string; className?: string }) {
   return (
     <div className={cn(VALUE_CELL_CLASS, className)}>
       <div className={CELL_STACK_CLASS}>
@@ -160,13 +163,17 @@ export function EntityMetadataAuthorCell({
   roleLabel = 'Author',
   authorHref,
   className,
+  loading: loadingProp,
 }: {
-  author: NonNullable<EntityAuthorCardProps['author']>;
   roleLabel?: string;
   authorHref?: string;
   className?: string;
-}) {
-  const loading = useLoadingScope();
+} & (
+  | { author: NonNullable<EntityAuthorCardProps['author']>; loading?: boolean }
+  /** The author is still being read: the cell draws its own loading form (also in a loading scope). */
+  | { author?: undefined; loading: true }
+)) {
+  const loading = useLoadingScope() || loadingProp || !author;
   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
@@ -201,7 +208,7 @@ export function EntityMetadataAuthorCell({
 }
 
 /** 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 }) {
+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])} />
@@ -213,7 +220,7 @@ export function EntityMetadataAuthorCellSkeleton({ className }: { className?: st
   );
 }
 
-export interface EntityAuthorCardSkeletonProps {
+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". */
@@ -230,7 +237,7 @@ export interface EntityAuthorCardSkeletonProps {
  * 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({
+function EntityAuthorCardSkeleton({
   extraCellLabels = [],
   publishedLabel = 'Published',
   optionalCells = 0,
@@ -259,8 +266,9 @@ export function EntityAuthorCard({
   extraCells,
   renderEmptyAuthor = false,
   className,
+  loading: loadingProp,
 }: EntityAuthorCardProps) {
-  const loading = useLoadingScope();
+  const loading = useLoadingScope() || !!loadingProp;
   // 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) {

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

@@ -88,6 +88,9 @@ export interface EntityPortraitCardProps {
   /** The card's picture is likely the page's largest paint: fetch it at once and ranked high, not lazily. */
   priority?: boolean;
   className?: string;
+  /** The record is still being read: the card draws its skeleton (the same three zones, the chip real). A loading
+   *  scope does the same. */
+  loading?: boolean;
 }
 
 export function EntityPortraitCard({
@@ -103,8 +106,9 @@ export function EntityPortraitCard({
   person,
   priority,
   className,
+  loading: loadingProp,
 }: EntityPortraitCardProps) {
-  const loading = useLoadingScope();
+  const loading = useLoadingScope() || !!loadingProp;
   const { src, onError: onMediaError } = useCoverImageFallback(imageUrl, placeholderUrl);
   // null = unknown (assume wide until the image reports its natural size).
   // The measurement carries the src it was taken from, so re-detection when the
@@ -160,6 +164,7 @@ export function EntityPortraitCard({
               variant="button"
               colorScheme="accentBorder"
               singleLine
+              staticText
               text={typeLabel}
               className="self-start"
             />
@@ -188,7 +193,10 @@ export function EntityPortraitCard({
                   </div>
                 )}
                 {person.iconOverlayUrl && (
-                  <div className="absolute -bottom-1 -right-1 flex h-6 w-6 items-center justify-center overflow-hidden rounded-full bg-ods-text-primary ring-1 ring-ods-bg">
+                  <div
+                    data-loading-optional
+                    className="absolute -bottom-1 -right-1 flex h-6 w-6 items-center justify-center overflow-hidden rounded-full bg-ods-text-primary ring-1 ring-ods-bg"
+                  >
                     <Image
                       src={person.iconOverlayUrl}
                       alt=""
@@ -217,7 +225,7 @@ export function EntityPortraitCard({
  * is drawn for real; the title (two lines under a chip, three without, at the 24px title leading) and the person
  * (48px avatar, name and subtitle lines) are bars.
  */
-export function EntityPortraitCardSkeleton({ typeLabel, className }: { typeLabel?: string; className?: string }) {
+function EntityPortraitCardSkeleton({ typeLabel, className }: { typeLabel?: string; className?: string }) {
   return (
     <div className={cn('block h-full', className)} aria-hidden>
       <Card className={cn(CONTENT_CARD_SKELETON_FRAME_CLASS, PORTRAIT_BODY)}>
@@ -228,6 +236,7 @@ export function EntityPortraitCardSkeleton({ typeLabel, className }: { typeLabel
               variant="button"
               colorScheme="accentBorder"
               singleLine
+              staticText
               text={typeLabel}
               className="self-start"
             />

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

@@ -124,7 +124,7 @@ export function GenericEntityCard({ item, className, anchorProps }: GenericEntit
   );
 }
 
-export function GenericEntityCardSkeleton({ className }: { className?: string }) {
+function GenericEntityCardSkeleton({ className }: { className?: string }) {
   return (
     <CompactCardSkeleton
       slot={false}

package/src/components/chat/entity-cards/github-activity-card.tsx

@@ -288,7 +288,7 @@ export function GitHubActivityCard({ item, variant = 'compact', className, ancho
   );
 }
 
-export function GitHubActivityCardSkeleton({
+function GitHubActivityCardSkeleton({
   variant = 'compact',
   className,
 }: {