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

package/src/components/chat/entity-cards/onboarding-guide-card.tsx

@@ -23,13 +23,12 @@ import Link from '../../../embed-shims/next-link';
 import { cn } from '../../../utils/cn';
 import { formatDurationMMSS } from '../../../utils/format';
 import { CardHoverPlay } from '../../features/video-center-badge';
-import { UnifiedSkeleton } from '../../loading/unified-skeleton';
+import { TextLineSkeleton, UnifiedSkeleton } from '../../loading/unified-skeleton';
+import { useLoadingScope } from '../../ui/loading-scope';
 import type { OnboardingGuide } from '../types/entities/onboarding-guide';
 import {
   COMPACT_CARD_OUTER,
   COMPACT_CARD_IMAGE_SLOT,
-  COMPACT_CARD_SKELETON_IMAGE_SLOT,
-  COMPACT_CARD_SKELETON_OUTER,
   COMPACT_CARD_TEXT_COL,
   COMPACT_CARD_TITLE_ROW,
   COMPACT_CARD_TITLE,
@@ -37,10 +36,15 @@ import {
   COMPACT_CARD_SUMMARY,
   COMPACT_CARD_ROW_FILLER,
 } from '../utils/compact-card-classes';
+import { CompactCardSkeleton } from '../utils/compact-card-skeleton';
 import { BlogImagePlaceholder } from './blog-image-placeholder';
 import { CONTENT_CARD_FRAME_CLASS, CONTENT_CARD_SKELETON_FRAME_CLASS } from './content-card-frame';
-import { EntityAuthorCard } from './entity-author-card';
-import { EntityPortraitCard } from './entity-portrait-card';
+import { EntityAuthorCard, EntityAuthorCardSkeleton } from './entity-author-card';
+import { EntityPortraitCard, EntityPortraitCardSkeleton } from './entity-portrait-card';
+
+/** The content-type chip a portrait guide shows (a static label). */
+const GUIDE_TYPE_LABEL = 'Guide';
+import { MEDIA_ASPECT, TEXT_LINES_MIN } from '../../../styles/component-sizes';
 import { useEntityCardLink } from './use-entity-card-link';
 import { useEntityCardPlaceholder } from './use-entity-card-placeholder';
 
@@ -83,6 +87,19 @@ function stripMarkdownPreview(text: string): string {
   );
 }
 
+// The catalog card's boxes, read by the card AND its skeleton, so the two are one size at every width.
+const CATALOG_BODY = 'flex flex-col gap-4 p-6';
+const CATALOG_ROW = 'flex flex-col gap-4 md:flex-row md:gap-6';
+const CATALOG_COVER_COL = 'w-full flex-shrink-0 md:w-[256px]';
+const CATALOG_COVER = `relative ${MEDIA_ASPECT.og} w-full overflow-hidden rounded-lg`;
+const CATALOG_TEXT = 'flex min-w-0 flex-1 flex-col';
+/** Two `text-h2` lines at most. */
+const CATALOG_TITLE_ROW = `mb-3 flex items-start text-h2 ${TEXT_LINES_MIN[2]}`;
+/** Two `text-h6` lines. */
+const CATALOG_SUMMARY_ROW = `text-h6 ${TEXT_LINES_MIN[2]}`;
+/** The catalog card's metadata cells before Published (the card's own label). */
+const CATALOG_EXTRA_CELL_LABELS = ['Section'];
+
 const HORIZONTAL_SIZE_TOKENS = {
   default: {
     padding: 'p-4',
@@ -92,70 +109,64 @@ const HORIZONTAL_SIZE_TOKENS = {
   },
 } as const;
 
-export function OnboardingGuideCardSkeleton({ size = 'default' }: { size?: 'catalog' | 'default' | 'sm' }) {
+/** A guide card while it is read, one per density; `portrait` is the shared portrait skeleton with the static chip. */
+export function OnboardingGuideCardSkeleton({
+  size = 'default',
+  showTypeBadge = true,
+  published = true,
+  className,
+}: {
+  size?: 'catalog' | 'default' | 'sm' | 'portrait';
+  /**
+   * `catalog`: the metadata grid has its Published cell (the card shows one when the guide carries `published_at`;
+   * the related-content rail's rows do not).
+   */
+  published?: boolean;
+  /** `portrait`: the card shows the "Guide" chip. */
+  showTypeBadge?: boolean;
+  className?: string;
+}) {
+  if (size === 'portrait') {
+    return (
+      <EntityPortraitCardSkeleton typeLabel={showTypeBadge ? GUIDE_TYPE_LABEL : undefined} className={className} />
+    );
+  }
   if (size === 'catalog') {
     return (
-      <div className={cn(CONTENT_CARD_SKELETON_FRAME_CLASS, 'flex flex-col gap-4 p-6')}>
-        <div className="flex flex-col gap-4 md:flex-row md:gap-6">
-          <UnifiedSkeleton className="aspect-[1200/630] w-full flex-shrink-0 rounded-lg md:w-[256px]" />
-          <div className="flex min-w-0 flex-1 flex-col">
-            <div className="mb-3 flex min-h-[60px] flex-col justify-start gap-1.5 md:min-h-[72px]">
-              <UnifiedSkeleton className="h-[25px] w-3/4 rounded md:h-[30px]" />
-              <UnifiedSkeleton className="h-[25px] w-1/2 rounded md:h-[30px]" />
-            </div>
-            <div className="flex min-h-[46px] flex-col justify-start gap-2 md:min-h-[52px]">
-              <UnifiedSkeleton className="h-3 w-full rounded" />
-              <UnifiedSkeleton className="h-3 w-5/6 rounded" />
+      <div className={cn(CONTENT_CARD_SKELETON_FRAME_CLASS, 'block', className)} aria-hidden>
+        <div className={CATALOG_BODY}>
+          <div className={CATALOG_ROW}>
+            <div className={CATALOG_COVER_COL}>
+              <UnifiedSkeleton className={CATALOG_COVER} />
             </div>
-          </div>
-        </div>
-        <div className="grid w-full grid-cols-1 overflow-hidden rounded-md border border-ods-border md:grid-cols-3">
-          {[0, 1].map(i => (
-            <div
-              key={`cell-${i}`}
-              className="flex flex-col gap-3 border-b border-ods-border p-4 md:border-b-0 md:border-r"
-            >
-              <div className="flex flex-col gap-2">
-                <UnifiedSkeleton className="h-6 w-32 rounded" />
-                <UnifiedSkeleton className="h-3 w-20 rounded" />
+            <div className={CATALOG_TEXT}>
+              <div className={CATALOG_TITLE_ROW}>
+                {/* The loaded title's clamp, two `text-h2` lines, wherever a typical title wraps (a phone, a tablet's
+                    column); one line from lg, where the text column holds a typical title. */}
+                <TextLineSkeleton type="h2" lines={2} className="w-3/4 lg:hidden" />
+                <TextLineSkeleton type="h2" className="hidden w-3/4 lg:flex" />
+              </div>
+              <div className={CATALOG_SUMMARY_ROW}>
+                <TextLineSkeleton type="h6" lines={2} className="w-full" />
               </div>
-            </div>
-          ))}
-          <div className="flex items-center gap-3 p-4">
-            <UnifiedSkeleton className="h-10 w-10 shrink-0 rounded-full" />
-            <div className="flex min-w-0 flex-1 flex-col gap-2">
-              <UnifiedSkeleton className="h-4 w-3/4 rounded" />
-              <UnifiedSkeleton className="h-3 w-1/2 rounded" />
             </div>
           </div>
+          <EntityAuthorCardSkeleton
+            extraCellLabels={CATALOG_EXTRA_CELL_LABELS}
+            publishedLabel={published ? undefined : null}
+          />
         </div>
       </div>
     );
   }
   if (size === 'sm') {
-    return (
-      <span className={COMPACT_CARD_SKELETON_OUTER}>
-        <UnifiedSkeleton as="span" className={COMPACT_CARD_SKELETON_IMAGE_SLOT} />
-        <span className={COMPACT_CARD_TEXT_COL}>
-          <span className={COMPACT_CARD_TITLE_ROW}>
-            <UnifiedSkeleton as="span" className="h-3.5 w-3/5 rounded" />
-          </span>
-          <span className={COMPACT_CARD_META_ROW_BOX}>
-            <UnifiedSkeleton as="span" className="h-3 w-2/5 rounded" />
-          </span>
-          <span className={COMPACT_CARD_META_ROW_BOX}>
-            <UnifiedSkeleton as="span" className="h-3 w-11/12 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>
-    );
+    return <CompactCardSkeleton trailingIcon className={className} />;
   }
   const t = HORIZONTAL_SIZE_TOKENS.default;
   return (
-    <span className={`flex items-start gap-3 rounded-md border border-ods-border bg-ods-card ${t.padding}`}>
+    <span
+      className={cn(`flex items-start gap-3 rounded-md border border-ods-border bg-ods-card ${t.padding}`, className)}
+    >
       <span className={`inline-flex shrink-0 items-center justify-center rounded-full bg-ods-bg ${t.step}`} />
       <span className="flex min-w-0 flex-1 flex-col gap-2">
         <UnifiedSkeleton as="span" className="block h-4 w-2/3 rounded" />
@@ -188,6 +199,9 @@ export function OnboardingGuideCard({
     placeholderUrl: placeholderUrlProp,
     aspect: size === 'sm' ? 'square' : 'wide',
   });
+  if (useLoadingScope()) {
+    return <OnboardingGuideCardSkeleton size={size} showTypeBadge={showTypeBadge !== false} className={className} />;
+  }
 
   if (size === 'portrait') {
     // Rail/strip density — shared <EntityPortraitCard> shell. Same cover
@@ -198,7 +212,7 @@ export function OnboardingGuideCard({
         href={href}
         target={target}
         rel={rel}
-        typeLabel={showTypeBadge ? 'Guide' : undefined}
+        typeLabel={showTypeBadge ? GUIDE_TYPE_LABEL : undefined}
         imageUrl={coverImage}
         placeholderUrl={placeholderUrl}
         imageAlt={guide.title}
@@ -226,10 +240,10 @@ export function OnboardingGuideCard({
         prefetch={false}
         className={cn(CONTENT_CARD_FRAME_CLASS, 'block no-underline', className)}
       >
-        <div className="flex flex-col gap-4 p-6">
-          <div className="flex flex-col gap-4 md:flex-row md:gap-6">
-            <div className="w-full flex-shrink-0 md:w-[256px]">
-              <div className="relative aspect-[1200/630] w-full overflow-hidden rounded-lg bg-ods-bg">
+        <div className={CATALOG_BODY}>
+          <div className={CATALOG_ROW}>
+            <div className={CATALOG_COVER_COL}>
+              <div className={cn(CATALOG_COVER, 'bg-ods-bg')}>
                 {coverImage ? (
                   <Image
                     src={coverImage}
@@ -256,11 +270,11 @@ export function OnboardingGuideCard({
               </div>
             </div>
 
-            <div className="flex min-w-0 flex-1 flex-col">
-              <div className="mb-3 flex min-h-[60px] items-start md:min-h-[72px]">
+            <div className={CATALOG_TEXT}>
+              <div className={CATALOG_TITLE_ROW}>
                 <h3 className="line-clamp-2 text-ods-text-primary text-h2">{guide.title}</h3>
               </div>
-              <div className="min-h-[46px] md:min-h-[52px]">
+              <div className={CATALOG_SUMMARY_ROW}>
                 <p className="line-clamp-2 text-ods-text-secondary text-h6">
                   {stripMarkdownPreview(guide.video_summary || guide.content || '')}
                 </p>
@@ -275,7 +289,7 @@ export function OnboardingGuideCard({
             extraCells={[
               {
                 value: `${guide.section} · Step ${stepLabel}`,
-                label: 'Section',
+                label: CATALOG_EXTRA_CELL_LABELS[0],
                 uppercase: false,
               },
             ]}

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

@@ -32,38 +32,34 @@ import { useState } from 'react';
 import Image from '../../../embed-shims/next-image';
 import Link from '../../../embed-shims/next-link';
 import { useImageEdgeColor } from '../../../hooks/ui/use-image-edge-color';
+import { MEDIA_ASPECT } from '../../../styles/component-sizes';
 import { cn } from '../../../utils/cn';
 import { formatProgramDate, formatProgramDateRange } from '../../../utils/format';
 import { isImageMedia } from '../../../utils/media-type';
 import { programMetaFormatters, programMetaLine } from '../../../utils/program-instant';
 import { PROGRAM_META_RENDERERS } from '../../../utils/program-meta-renderers';
+import { programItemToStripProfile } from '../../features/video-bites-shared';
 import { CardHoverPlay } from '../../features/video-center-badge';
-import { UnifiedSkeleton } from '../../loading/unified-skeleton';
+import { InteractiveSkeleton, TextLineSkeleton, UnifiedSkeleton } from '../../loading/unified-skeleton';
 import { Button } from '../../ui/button/button';
 import { ImageGalleryModal } from '../../ui/image-gallery-modal';
-import { SquareAvatar } from '../../ui/square-avatar';
-import { Tag } from '../../ui/tag';
-import {
-  programItemToStripProfile,
-  type BaseProgramItem,
-  type ProgramConfig,
-  type ProgramMedia,
-  type ProgramHost,
-} from '../types/entities/program-types';
+import { useLoadingScope } from '../../ui/loading-scope';
+import { SquareAvatar, SquareAvatarSkeleton } from '../../ui/square-avatar';
+import { Tag, TagSkeleton } from '../../ui/tag';
+import type { BaseProgramItem, ProgramConfig, ProgramMedia, ProgramHost } from '../types/entities/program-types';
 import {
   COMPACT_CARD_IMAGE_SLOT,
   COMPACT_CARD_META_ROW_BOX,
   COMPACT_CARD_OUTER,
   COMPACT_CARD_ROW_FILLER,
-  COMPACT_CARD_SKELETON_IMAGE_SLOT,
-  COMPACT_CARD_SKELETON_OUTER,
   COMPACT_CARD_SUMMARY,
   COMPACT_CARD_TEXT_COL,
   COMPACT_CARD_TITLE,
   COMPACT_CARD_TITLE_ROW,
 } from '../utils/compact-card-classes';
+import { CompactCardSkeleton } from '../utils/compact-card-skeleton';
 import { CONTENT_CARD_SKELETON_FRAME_CLASS, ContentCardFrame } from './content-card-frame';
-import { EntityPortraitCard } from './entity-portrait-card';
+import { EntityPortraitCard, EntityPortraitCardSkeleton } from './entity-portrait-card';
 import { useEntityCardLink } from './use-entity-card-link';
 import { useEntityCardPlaceholder } from './use-entity-card-placeholder';
 
@@ -75,9 +71,9 @@ type CardSize = 'default' | 'sm' | 'portrait' | 'feature' | 'row';
 const EDITORIAL_FRAME = CONTENT_CARD_SKELETON_FRAME_CLASS;
 const EDITORIAL_ROW_GRID =
   'grid grid-cols-[88px_minmax(0,1fr)] items-center gap-[var(--spacing-system-m)] p-[var(--spacing-system-m)] sm:grid-cols-[120px_minmax(0,1fr)] sm:gap-[var(--spacing-system-l)]';
-const EDITORIAL_ROW_THUMB = 'relative block aspect-square w-full overflow-hidden rounded-md';
+const EDITORIAL_ROW_THUMB = `relative block ${MEDIA_ASPECT.square} w-full overflow-hidden rounded-md`;
 const EDITORIAL_ROW_TEXT = 'flex min-w-0 flex-col gap-[var(--spacing-system-xs)]';
-const EDITORIAL_FEATURE_COVER = 'relative block aspect-video w-full overflow-hidden';
+const EDITORIAL_FEATURE_COVER = `relative block ${MEDIA_ASPECT.video} w-full overflow-hidden`;
 const EDITORIAL_FEATURE_BODY = 'flex flex-col gap-[var(--spacing-system-s)] p-[var(--spacing-system-l)]';
 const EDITORIAL_META_ROW =
   'flex h-[1lh] min-w-0 items-center gap-x-[var(--spacing-system-s)] overflow-hidden whitespace-nowrap text-h6';
@@ -102,14 +98,43 @@ const DEFAULT_GALLERY_ROW = 'flex gap-[var(--spacing-system-mf)]';
 const DEFAULT_GALLERY_THUMB =
   'relative h-24 w-24 flex-shrink-0 overflow-hidden rounded-lg md:h-40 md:w-40 xl:h-[200px] xl:w-[200px]';
 const DEFAULT_FOOTER = 'flex justify-end border-t border-ods-border pt-[var(--spacing-system-lf)]';
+/** The hosts' avatars (32px each): beside the text from md, their own row under it on a phone. */
+const DEFAULT_HOSTS_ROW = 'flex flex-wrap gap-2 md:justify-end';
+/** The tags a card's skeleton draws when it shows a tag row (a row of read tags: a typical one). */
+const DEFAULT_TAGS_FOLD = 2;
+/** The person's avatar in the editorial feature card, read by the card and its skeleton. */
+const EDITORIAL_PERSON_AVATAR = { variant: 'round', size: 'sm' } as const;
+
+/** The default card's action: the config's own words ("View podcast"). */
+const programActionLabel = (singular: string): string => `View ${singular.toLowerCase()}`;
+
+/** The default card's action button (copy), read by the card and by its skeleton. */
+function ProgramActionButton({ label, href, newTab }: { label: string; href?: string; newTab?: boolean }) {
+  return (
+    <Button variant="outline" href={href} openInNewTab={newTab} rightIcon={<ArrowRight className="h-5 w-5" />}>
+      {label}
+    </Button>
+  );
+}
 
 export function ProgramCardSkeleton({
   size = 'default',
   eyebrow = true,
   media = 0,
   tags = false,
+  hosts = 1,
+  typeLabel,
+  actionLabel,
+  className,
 }: {
+  /** `default` size: the action's words (copy: `View <type>`), drawn for real; else a button of its size. */
+  actionLabel?: string;
+  /** `default` size: how many host avatars the card shows (a row of its own on a phone). 0 = none. */
+  hosts?: number;
   size?: CardSize;
+  /** `portrait` size: the content-type chip (the config's static label), when the card shows one. */
+  typeLabel?: string;
+  className?: string;
   eyebrow?: boolean;
   /** `default` size: how many gallery thumbnails the card shows (`MediaGallery`'s row). 0 = no gallery. */
   media?: number;
@@ -118,82 +143,73 @@ export function ProgramCardSkeleton({
 }) {
   // The editorial pair: the card's own boxes (EDITORIAL_*), each text row a bar of
   // that row's line height.
+  if (size === 'portrait') return <EntityPortraitCardSkeleton typeLabel={typeLabel} className={className} />;
   if (size === 'row') {
     return (
-      <span className={cn(EDITORIAL_FRAME, EDITORIAL_ROW_GRID)}>
+      <span className={cn(EDITORIAL_FRAME, EDITORIAL_ROW_GRID, className)}>
         <UnifiedSkeleton as="span" className={EDITORIAL_ROW_THUMB} />
         <span className={EDITORIAL_ROW_TEXT}>
-          <UnifiedSkeleton as="span" className="block h-[2lh] w-full rounded text-h3" />
+          <TextLineSkeleton as="span" type="h3" lines={2} className="w-full" />
           <span className={EDITORIAL_META_ROW}>
-            <UnifiedSkeleton as="span" className="block h-[1lh] w-40 rounded" />
+            <TextLineSkeleton as="span" type="inherit" className="w-40" />
           </span>
-          <UnifiedSkeleton as="span" className="block h-[2lh] w-full rounded text-h6" />
+          <TextLineSkeleton as="span" type="h6" lines={2} className="w-full" />
         </span>
       </span>
     );
   }
   if (size === 'feature') {
     return (
-      <span className={cn(EDITORIAL_FRAME, 'flex flex-col')}>
+      <span className={cn(EDITORIAL_FRAME, 'flex flex-col', className)}>
         <UnifiedSkeleton as="span" className={cn(EDITORIAL_FEATURE_COVER, 'rounded-none')} />
         <span className={EDITORIAL_FEATURE_BODY}>
-          {eyebrow && <UnifiedSkeleton as="span" className="block h-[1lh] w-28 rounded text-h5" />}
-          <UnifiedSkeleton as="span" className="block h-[2lh] w-full rounded text-h3" />
+          {eyebrow && <TextLineSkeleton as="span" type="h5" className="w-28" />}
+          <TextLineSkeleton as="span" type="h3" lines={2} className="w-full" />
           <span className={EDITORIAL_META_ROW}>
-            <UnifiedSkeleton as="span" className="block h-[1lh] w-40 rounded" />
+            <TextLineSkeleton as="span" type="inherit" className="w-40" />
           </span>
-          <UnifiedSkeleton as="span" className="block h-[3lh] w-full rounded text-h4" />
+          <TextLineSkeleton as="span" type="h4" lines={3} className="w-full" />
           <span className={EDITORIAL_PERSON_ROW}>
-            <UnifiedSkeleton as="span" className="block h-8 w-8 shrink-0 rounded-full" />
-            <UnifiedSkeleton as="span" className="block h-[1lh] w-40 rounded text-h6" />
+            <SquareAvatarSkeleton {...EDITORIAL_PERSON_AVATAR} className="shrink-0" />
+            <TextLineSkeleton as="span" type="h6" className="w-40" />
           </span>
         </span>
       </span>
     );
   }
   if (size === 'sm') {
-    return (
-      <span className={COMPACT_CARD_SKELETON_OUTER}>
-        <UnifiedSkeleton as="span" className={COMPACT_CARD_SKELETON_IMAGE_SLOT} />
-        <span className={COMPACT_CARD_TEXT_COL}>
-          <span className={COMPACT_CARD_TITLE_ROW}>
-            <UnifiedSkeleton as="span" className="h-3.5 w-3/5 rounded" />
-          </span>
-          <span className={COMPACT_CARD_META_ROW_BOX}>
-            <UnifiedSkeleton as="span" className="h-3 w-2/5 rounded" />
-          </span>
-          <span className={COMPACT_CARD_META_ROW_BOX}>
-            <UnifiedSkeleton as="span" className="h-3 w-11/12 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>
-    );
+    return <CompactCardSkeleton trailingIcon className={className} />;
   }
   return (
-    <div className={cn(CONTENT_CARD_SKELETON_FRAME_CLASS, DEFAULT_BODY)}>
+    <div className={cn(CONTENT_CARD_SKELETON_FRAME_CLASS, DEFAULT_BODY, className)}>
       <div className={DEFAULT_HEADER}>
         <UnifiedSkeleton className={DEFAULT_COVER_FRAME} />
         <div className={DEFAULT_TEXT}>
           <div className={DEFAULT_TITLE}>
-            <UnifiedSkeleton as="span" className="block h-[2lh] w-3/4 rounded" />
+            <TextLineSkeleton as="span" type="inherit" lines={2} className="w-3/4" />
           </div>
           <div className={DEFAULT_META_ROW}>
-            <UnifiedSkeleton as="span" className="block h-[1lh] w-32 rounded" />
-            <UnifiedSkeleton as="span" className="block h-[1lh] w-40 rounded" />
+            <TextLineSkeleton as="span" type="inherit" className="w-32" />
+            <TextLineSkeleton as="span" type="inherit" className="w-40" />
           </div>
           <div className={DEFAULT_DESCRIPTION}>
-            <UnifiedSkeleton as="span" className="block h-[3lh] w-full rounded" />
+            <TextLineSkeleton as="span" type="inherit" lines={3} className="w-full" />
           </div>
           {tags && (
             <div className={DEFAULT_TAG_ROW}>
-              <UnifiedSkeleton as="span" className="block h-8 w-24 rounded" />
-              <UnifiedSkeleton as="span" className="block h-8 w-24 rounded" />
+              {Array.from({ length: DEFAULT_TAGS_FOLD }, (_, i) => (
+                <TagSkeleton key={i} />
+              ))}
             </div>
           )}
         </div>
+        {hosts > 0 && (
+          <div className={DEFAULT_HOSTS_ROW}>
+            {Array.from({ length: hosts }, (_, i) => (
+              <SquareAvatarSkeleton key={i} variant="round" size="sm" />
+            ))}
+          </div>
+        )}
       </div>
       {media > 0 && (
         <div className={DEFAULT_GALLERY_ROW}>
@@ -203,8 +219,14 @@ export function ProgramCardSkeleton({
         </div>
       )}
       <div className={DEFAULT_FOOTER}>
-        {/* The action button's own height (44px, 48px from md). */}
-        <UnifiedSkeleton className="h-11 w-40 rounded md:h-12" />
+        {actionLabel ? (
+          // The action's words are copy: the real button, not a control while it loads.
+          <span inert aria-hidden className="flex">
+            <ProgramActionButton label={actionLabel} />
+          </span>
+        ) : (
+          <InteractiveSkeleton.Button size="default" className="w-40" />
+        )}
       </div>
     </div>
   );
@@ -407,11 +429,10 @@ function ProgramEditorialCard({
           {profile && (
             <>
               <SquareAvatar
-                variant="round"
+                {...EDITORIAL_PERSON_AVATAR}
                 src={profile.avatarUrl || undefined}
                 alt={profile.name}
                 fallback={profile.name.charAt(0).toUpperCase()}
-                size="sm"
               />
               <span className="truncate text-h6">
                 <span className="text-ods-text-primary">{profile.name}</span>
@@ -453,6 +474,20 @@ export function ProgramCard<T extends BaseProgramItem>({
     placeholderUrl: placeholderUrlProp,
     aspect: size === 'sm' || size === 'row' ? 'square' : 'wide',
   });
+  if (useLoadingScope()) {
+    return (
+      <ProgramCardSkeleton
+        size={size}
+        eyebrow={!!eyebrow}
+        media={media.filter(m => isImageMedia(m)).length}
+        tags={tags.length > 0}
+        hosts={getHosts(item.hosts).length}
+        typeLabel={size === 'portrait' && showTypeBadge ? config.labels.singular : undefined}
+        actionLabel={programActionLabel(config.labels.singular)}
+        className={className}
+      />
+    );
+  }
   const coverImage = item.cover_url;
   const images = media.filter(m => isImageMedia(m));
   const hosts = getHosts(item.hosts);
@@ -659,7 +694,9 @@ export function ProgramCard<T extends BaseProgramItem>({
       </div>
 
       {hosts.length > 0 && (
-        <div className="flex flex-wrap gap-2 md:justify-end">
+        // A type whose cards always show hosts (`cardShowsHosts`) draws them while loading; elsewhere only some
+        // records have hosts, so the row is record-dependent.
+        <div className={DEFAULT_HOSTS_ROW} data-loading-optional={config.cardShowsHosts ? undefined : true}>
           {hosts.map((host, index) => (
             <SquareAvatar
               variant="round"
@@ -676,7 +713,7 @@ export function ProgramCard<T extends BaseProgramItem>({
   );
 
   const cardFrameClass = cn(DEFAULT_BODY, className);
-  const actionLabel = `View ${config.labels.singular.toLowerCase()}`;
+  const actionLabel = programActionLabel(config.labels.singular);
 
   if (wholeCardClickable) {
     return (
@@ -703,14 +740,7 @@ export function ProgramCard<T extends BaseProgramItem>({
       </Link>
       {images.length > 0 && <MediaGallery images={images} title={item.title} />}
       <div className={DEFAULT_FOOTER}>
-        <Button
-          variant="outline"
-          href={href}
-          openInNewTab={target === '_blank'}
-          rightIcon={<ArrowRight className="h-5 w-5" />}
-        >
-          {actionLabel}
-        </Button>
+        <ProgramActionButton label={actionLabel} href={href} newTab={target === '_blank'} />
       </div>
     </ContentCardFrame>
   );