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

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>
   );

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

@@ -14,15 +14,17 @@ import { ThumbsUp, ThumbsDown } from 'lucide-react';
 import { useState } from 'react';
 import Image from '../../../embed-shims/next-image';
 import Link from '../../../embed-shims/next-link';
+import { MEDIA_ASPECT, TEXT_LINES_MIN, TILE_SIZE } from '../../../styles/component-sizes';
 import { cn } from '../../../utils/cn';
-import { getProxiedImageUrl } from '../../../utils/image-proxy';
 import { ImageClassicIcon } from '../../icons-v2-generated/audio-and-visual/image-classic-icon';
 import { FigmaClassicIcon } from '../../icons-v2-generated/brand-logos/figma-classic-icon';
-import { UnifiedSkeleton } from '../../loading/unified-skeleton';
+import { TextLineSkeleton, UnifiedSkeleton } from '../../loading/unified-skeleton';
 import { AvatarStack, type AvatarStackPerson } from '../../ui/avatar-stack';
 import { Button } from '../../ui/button/button';
 import { ImageGalleryModal } from '../../ui/image-gallery-modal';
-import { StatusBadge, generationTierFromLabel } from '../../ui/status-badge';
+import { useLoadingScope } from '../../ui/loading-scope';
+import { StatusBadge, StatusBadgeSkeleton, generationTierFromLabel } from '../../ui/status-badge';
+import { useProxiedImageUrl } from '../hooks/use-proxied-image-url';
 import type { RoadmapItem } from '../types/entities/roadmap-item';
 import { getStatusColorScheme } from '../utils/agent-status-message';
 import { getTaskTypeLabel } from '../utils/clickup-task-type-utils';
@@ -31,13 +33,13 @@ import {
   COMPACT_CARD_OUTER,
   COMPACT_CARD_OUTER_STATIC,
   COMPACT_CARD_ROW_FILLER,
-  COMPACT_CARD_SKELETON_OUTER,
   COMPACT_CARD_SUMMARY,
   COMPACT_CARD_TEXT_COL,
   COMPACT_CARD_TITLE,
   COMPACT_CARD_TITLE_ROW,
   safeHref,
 } 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 { RoadmapVoteButton } from './roadmap-vote-button';
 import { TaskTypeIcon } from './task-type-icon';
@@ -45,57 +47,80 @@ import { TaskTypeIcon } from './task-type-icon';
 type CardSize = 'default' | 'sm';
 export type VoteType = 'up' | 'down' | null;
 
-export function RoadmapCardSkeleton({ size = 'default' }: { size?: CardSize }) {
+/** The compact card's bordered 48px logo box, read by the card and its skeleton. */
+const ROADMAP_COMPACT_SLOT = `${MEDIA_ASPECT.square} ${TILE_SIZE.xl} shrink-0 self-start overflow-hidden rounded-md border border-ods-border p-1.5`;
+
+// The default card's boxes, read by the card AND its skeleton, so the two are one size at every width.
+const ROADMAP_CARD_BODY =
+  'flex h-full scroll-mt-24 flex-col gap-[var(--spacing-system-mf)] p-[var(--spacing-system-lf)]';
+const ROADMAP_CARD_HEADER = 'flex w-full items-center gap-[16px]';
+const ROADMAP_CARD_ICON_BOX = `flex ${TILE_SIZE.feature} flex-shrink-0 items-center justify-center rounded-lg`;
+const ROADMAP_CARD_HEADING = 'flex min-w-0 flex-1 flex-col';
+/** Two `text-h3` lines. */
+const ROADMAP_CARD_TITLE_ROW = `flex items-center text-h3 ${TEXT_LINES_MIN[2]}`;
+const ROADMAP_CARD_META_ROW = `flex items-center text-h5 ${TEXT_LINES_MIN[1]}`;
+/** Three `text-h4` lines. */
+const ROADMAP_CARD_SUMMARY_ROW = `flex items-center text-h4 ${TEXT_LINES_MIN[3]}`;
+const ROADMAP_CARD_FOOTER = 'flex w-full items-center justify-between';
+const ROADMAP_CARD_VOTES = 'flex h-[48px] overflow-hidden rounded-[6px]';
+const ROADMAP_CARD_FOOTER_END = 'flex min-w-0 items-center gap-2';
+
+/**
+ * A roadmap card while it is read. `default`, in the card's own boxes: the 64px icon box, the title as two `text-h3`
+ * lines, the quarter and id as a `text-h5` line, the status badge's box (beside the heading from md, its own row
+ * below), the description as three `text-h4` lines and the vote buttons' 48px box (with `votes`); the assignees and
+ * target version are drawn only when an item has them, so the skeleton leaves them out. `sm`: the compact card's rows.
+ */
+export function RoadmapCardSkeleton({
+  size = 'default',
+  votes = true,
+  className,
+}: {
+  size?: CardSize;
+  /** `default`: the card shows its vote buttons (the caller passes `onVote`). */
+  votes?: boolean;
+  className?: string;
+}) {
   if (size === 'sm') {
     return (
-      <span className={COMPACT_CARD_SKELETON_OUTER}>
-        <UnifiedSkeleton
-          as="span"
-          className="block aspect-square h-12 w-12 shrink-0 self-start rounded-md border border-ods-border p-1.5"
-        />
-        <span className={COMPACT_CARD_TEXT_COL}>
-          <span className={`${COMPACT_CARD_TITLE_ROW} flex-nowrap gap-2`}>
-            <UnifiedSkeleton as="span" className="h-3.5 w-1/2 rounded" />
-            <UnifiedSkeleton as="span" className="h-4 w-12 shrink-0 rounded" />
-          </span>
-          <span className={`${COMPACT_CARD_META_ROW_BOX} flex-nowrap gap-2`}>
-            <UnifiedSkeleton as="span" className="h-3 w-2/5 flex-1 rounded" />
-            <UnifiedSkeleton as="span" className="h-3 w-10 shrink-0 rounded" />
-            {/* assignee-stack placeholder — mirrors the xs AvatarStack
-                slot so row width doesn't shift when assignees load */}
-            <UnifiedSkeleton as="span" className="h-6 w-14 shrink-0 rounded-full" />
-          </span>
-          <span className={COMPACT_CARD_META_ROW_BOX}>
-            <UnifiedSkeleton as="span" className="h-3 w-5/6 rounded" />
-          </span>
-        </span>
-      </span>
+      <CompactCardSkeleton
+        slotClassName={ROADMAP_COMPACT_SLOT}
+        titleWidth="w-1/2"
+        titleBadges={['w-12']}
+        rows={[
+          // The votes, Figma and screenshot marks after the meta line are the record's (optional): not drawn.
+          { width: 'w-2/5 flex-1' },
+          { width: 'w-5/6' },
+        ]}
+        className={className}
+      />
     );
   }
   return (
-    <div className={cn(CONTENT_CARD_SKELETON_FRAME_CLASS, 'flex h-full flex-col gap-4 p-[var(--spacing-system-lf)]')}>
-      <div className="flex items-center gap-4">
-        <UnifiedSkeleton className="h-16 w-16 flex-shrink-0 rounded-lg" />
-        <div className="flex-1 space-y-2">
-          <UnifiedSkeleton className="h-5 w-3/4 rounded" />
-          <UnifiedSkeleton className="h-3 w-1/2 rounded" />
+    <div className={cn(CONTENT_CARD_SKELETON_FRAME_CLASS, ROADMAP_CARD_BODY, className)} aria-hidden>
+      <div className={ROADMAP_CARD_HEADER}>
+        <UnifiedSkeleton className={ROADMAP_CARD_ICON_BOX} />
+        <div className={ROADMAP_CARD_HEADING}>
+          <div className={ROADMAP_CARD_TITLE_ROW}>
+            <TextLineSkeleton type="h3" lines={2} className="w-3/4" />
+          </div>
+          <div className={ROADMAP_CARD_META_ROW}>
+            <TextLineSkeleton type="h5" className="w-1/3" />
+          </div>
         </div>
-        <UnifiedSkeleton className="h-6 w-16 rounded" />
+        <div className="hidden md:block">
+          <StatusBadgeSkeleton />
+        </div>
+      </div>
+      <div className="md:hidden">
+        <StatusBadgeSkeleton />
       </div>
-      <div className="space-y-2">
-        <UnifiedSkeleton className="h-3 w-full rounded" />
-        <UnifiedSkeleton className="h-3 w-5/6 rounded" />
-        <UnifiedSkeleton className="h-3 w-4/5 rounded" />
+      <div className={ROADMAP_CARD_SUMMARY_ROW}>
+        <TextLineSkeleton type="h4" lines={3} className="w-full" />
       </div>
       <div className="flex-1" />
-      <div className="flex items-center justify-between">
-        <UnifiedSkeleton className="h-12 w-32 rounded" />
-        <div className="flex items-center gap-2">
-          {/* assignee-stack placeholder — matches the xs AvatarStack in
-              the loaded card's action row */}
-          <UnifiedSkeleton className="h-6 w-14 rounded-full" />
-          <UnifiedSkeleton className="h-8 w-20 rounded" />
-        </div>
+      <div className={ROADMAP_CARD_FOOTER}>
+        {votes && <UnifiedSkeleton className={cn(ROADMAP_CARD_VOTES, 'w-32')} />}
       </div>
     </div>
   );
@@ -155,9 +180,11 @@ export function RoadmapCard({
   isVoting = false,
 }: RoadmapCardProps) {
   const [showScreenshots, setShowScreenshots] = useState(false);
+  const loading = useLoadingScope();
 
   const logoUrl = item.icon && item.icon.startsWith('http') ? item.icon : null;
-  const iconSrc = logoUrl ? getProxiedImageUrl(logoUrl, { directHttps: true }) || logoUrl : null;
+  const iconSrc = useProxiedImageUrl(logoUrl) || null;
+  if (loading) return <RoadmapCardSkeleton size={size} votes={!!onVote} className={className} />;
 
   if (size === 'sm') {
     const compactHref = safeHref(href ?? null);
@@ -169,7 +196,7 @@ export function RoadmapCard({
     const body = (
       <>
         <span
-          className="flex aspect-square h-12 w-12 shrink-0 items-center justify-center self-start overflow-hidden rounded-md border border-ods-border bg-ods-bg p-1.5 text-ods-accent"
+          className={cn(ROADMAP_COMPACT_SLOT, 'flex items-center justify-center bg-ods-bg text-ods-accent')}
           title={typeLabel ?? undefined}
         >
           {useTypeIcon ? (
@@ -267,16 +294,9 @@ export function RoadmapCard({
   }
 
   return (
-    <div
-      id={id}
-      className={cn(
-        CONTENT_CARD_FRAME_CLASS,
-        'flex h-full scroll-mt-24 flex-col gap-[var(--spacing-system-mf)] p-[var(--spacing-system-lf)]',
-        className,
-      )}
-    >
-      <div className="flex w-full items-center gap-[16px]">
-        <div className="flex h-16 w-16 flex-shrink-0 items-center justify-center rounded-lg border border-ods-border bg-ods-bg">
+    <div id={id} className={cn(CONTENT_CARD_FRAME_CLASS, ROADMAP_CARD_BODY, className)}>
+      <div className={ROADMAP_CARD_HEADER}>
+        <div className={cn(ROADMAP_CARD_ICON_BOX, 'border border-ods-border bg-ods-bg')}>
           {iconSrc ? (
             <Image
               src={iconSrc}
@@ -293,11 +313,11 @@ export function RoadmapCard({
           )}
         </div>
 
-        <div className="flex min-w-0 flex-1 flex-col">
-          <div className="flex min-h-[48px] items-center">
+        <div className={ROADMAP_CARD_HEADING}>
+          <div className={ROADMAP_CARD_TITLE_ROW}>
             <h3 className="line-clamp-2 flex-1 text-ods-text-primary text-h3">{item.title}</h3>
           </div>
-          <div className="flex min-h-[20px] items-center">
+          <div className={ROADMAP_CARD_META_ROW}>
             <p className="truncate text-ods-text-secondary text-h5">
               {item.quarter}, {item.id}
             </p>
@@ -321,15 +341,15 @@ export function RoadmapCard({
         />
       </div>
 
-      <div className="flex min-h-[72px] items-center">
+      <div className={ROADMAP_CARD_SUMMARY_ROW}>
         <p className="line-clamp-3 text-ods-text-secondary text-h4">{item.description || ''}</p>
       </div>
 
       <div className="flex-1" />
 
-      <div className="flex w-full items-center justify-between">
+      <div className={ROADMAP_CARD_FOOTER}>
         {onVote && (
-          <div className="flex h-[48px] overflow-hidden rounded-[6px] border border-ods-border bg-ods-card">
+          <div className={cn(ROADMAP_CARD_VOTES, 'border border-ods-border bg-ods-card')}>
             <RoadmapVoteButton
               voteType="up"
               count={item.upvotes}
@@ -351,7 +371,7 @@ export function RoadmapCard({
           </div>
         )}
 
-        <div className="flex min-w-0 items-center gap-2">
+        <div className={ROADMAP_CARD_FOOTER_END}>
           {item.assignees && item.assignees.length > 0 ? (
             <AvatarStack size="xs" people={assigneePeople(item.assignees)} className="shrink-0" />
           ) : null}

package/src/components/chat/entity-cards/roadmap-vote-button.tsx

@@ -9,7 +9,9 @@
 import { cn } from '../../../utils/cn';
 import { ThumbsDownClassicIcon } from '../../icons-v2-generated/shopping/thumbs-down-classic-icon';
 import { ThumbsUpClassicIcon } from '../../icons-v2-generated/shopping/thumbs-up-classic-icon';
+import { TextLineSkeleton } from '../../loading/unified-skeleton';
 import { Button } from '../../ui/button/button';
+import { useLoadingScope } from '../../ui/loading-scope';
 
 export interface RoadmapVoteButtonProps {
   voteType: 'up' | 'down';
@@ -33,11 +35,15 @@ export function RoadmapVoteButton({
   className,
 }: RoadmapVoteButtonProps) {
   const Icon = voteType === 'up' ? ThumbsUpClassicIcon : ThumbsDownClassicIcon;
+  // In a scope the button and its icon are drawn as they are; only the read count is a bar.
+  const loading = useLoadingScope();
   return (
     <Button
       variant="outline"
       onClick={onClick}
       disabled={disabled}
+      // In a loading scope the button is part of a skeleton: never focused, never announced.
+      {...(loading ? { tabIndex: -1, 'aria-hidden': true } : {})}
       leftIcon={<Icon className="h-5 w-5" color={color} />}
       className={cn(
         className,
@@ -47,7 +53,12 @@ export function RoadmapVoteButton({
         isActive && 'bg-ods-border',
       )}
     >
-      {showCount && <span className="text-h6">{count}</span>}
+      {showCount &&
+        (loading ? (
+          <TextLineSkeleton as="span" type="h6" className="inline-block w-4" />
+        ) : (
+          <span className="text-h6">{count}</span>
+        ))}
     </Button>
   );
 }