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

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

@@ -32,7 +32,7 @@ import { cn } from '../../../utils/cn';
 import { TextLineSkeleton } from '../../loading/unified-skeleton';
 import { AvatarStack } from '../../ui/avatar-stack';
 import { useLoadingScope } from '../../ui/loading-scope';
-import { StatusBadge, StatusBadgeSkeleton } from '../../ui/status-badge';
+import { StatusBadge } from '../../ui/status-badge';
 
 /** Same heuristic as DeliveryTable's local helper. Inlined so the row
  *  primitive owns its complete rendering contract. */
@@ -51,8 +51,7 @@ function getRelativeTime(timestamp: number): string {
   return 'today';
 }
 
-export interface DeliveryRowProps {
-  item: DeliveryItem;
+interface DeliveryRowBaseProps {
   /** When set, the row becomes a clickable anchor. The ticket-side
    *  linked-card composes this from `buildDevSectionUrl('delivery', id)`
    *  which carries `?search=<id>` — the delivery list filters to that
@@ -76,6 +75,11 @@ export interface DeliveryRowProps {
   className?: string;
 }
 
+/** A row of a task (`item`), or, while the task is read, `loading` with no task: the row draws its skeleton. A loading
+ *  scope does the same. */
+export type DeliveryRowProps = DeliveryRowBaseProps &
+  ({ item: DeliveryItem; loading?: false } | { item?: undefined; loading: true });
+
 /** The row's layout, read by the row and by its skeleton, so the skeleton is the row's size. */
 const ROW_INNER_CLASS =
   'flex w-full flex-col items-start justify-between gap-[12px] content-md:flex-row content-md:gap-[16px]';
@@ -88,9 +92,10 @@ const ROW_META_CLASS =
   'flex w-full flex-shrink-0 flex-row items-center gap-2 self-stretch content-md:w-auto content-md:flex-col content-md:items-end content-md:self-start';
 const ROW_BASE_CLASS = 'block p-[12px] text-inherit no-underline transition-colors duration-150 content-md:p-[16px]';
 
-export function DeliveryRow({ item, href, target, caption, id, className }: DeliveryRowProps) {
-  // While the page is read the task is not known: the row is its skeleton.
-  if (useLoadingScope()) return <DeliveryRowSkeleton caption={caption} className={className} />;
+export function DeliveryRow({ item, loading, href, target, caption, id, className }: DeliveryRowProps) {
+  // While the page is read (or the host reads the task) the task is not known: the row is its skeleton.
+  const inScope = useLoadingScope();
+  if (inScope || loading) return <DeliveryRowSkeleton caption={caption} className={className} />;
   const taskType = item.taskType as keyof typeof TASK_TYPE_LABELS;
   const typeBadgeLabel = TASK_TYPE_LABELS[taskType] || 'TASK';
   const typeBadgeTextColor = TASK_TYPE_TEXT_COLORS[taskType] || '';
@@ -200,7 +205,7 @@ export function DeliveryRow({ item, href, target, caption, id, className }: Deli
  * A delivery row while its task is read: the same row, its caption for real, the title, subtitle and description
  * as bars at their type steps, and the two badges as their skeletons.
  */
-export function DeliveryRowSkeleton({ caption, className }: Pick<DeliveryRowProps, 'caption' | 'className'>) {
+function DeliveryRowSkeleton({ caption, className }: Pick<DeliveryRowProps, 'caption' | 'className'>) {
   return (
     <div className={cn(ROW_BASE_CLASS, 'scroll-mt-24', className)} aria-hidden>
       <div className={ROW_INNER_CLASS}>
@@ -217,8 +222,8 @@ export function DeliveryRowSkeleton({ caption, className }: Pick<DeliveryRowProp
           </div>
         </div>
         <div className={ROW_META_CLASS}>
-          <StatusBadgeSkeleton variant="card" />
-          <StatusBadgeSkeleton variant="card" />
+          <StatusBadge loading text="" variant="card" />
+          <StatusBadge loading text="" variant="card" />
         </div>
       </div>
     </div>

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

@@ -20,7 +20,8 @@
 import type { DeliveryItem } from '../../../types/delivery';
 import { devSectionAnchorId } from '../../../utils/dev-sections/dev-section-param-keys';
 import { CONTENT_CARD_SKELETON_FRAME_CLASS } from '../../chat/entity-cards/content-card-frame';
-import { DeliveryRow, DeliveryRowSkeleton } from './delivery-row';
+import { LoadingItems, useLoadingScope } from '../../ui/loading-scope';
+import { DeliveryRow } from './delivery-row';
 
 interface DeliveryTableProps {
   items: DeliveryItem[];
@@ -30,19 +31,21 @@ interface DeliveryTableProps {
 /** The card's frame and a row's separator, read by the table and by its skeleton. */
 const TABLE_FRAME_CLASS = `w-full ${CONTENT_CARD_SKELETON_FRAME_CLASS}`;
 const ROW_SEPARATOR_CLASS = 'border-b border-ods-border last:border-b-0';
-/** How many rows the skeleton draws (the table's first fold). */
+/** How many rows the skeleton draws: a typical count, since the delivery lists are read whole (no page size, no limit). */
 export const DELIVERY_TABLE_SKELETON_ROWS = 5;
 
 /** The table while its tasks are read: the same card, `DELIVERY_TABLE_SKELETON_ROWS` row skeletons. */
-export function DeliveryTableSkeleton() {
+function DeliveryTableSkeleton() {
   return (
     <div className={TABLE_FRAME_CLASS} aria-hidden>
       <div className="w-full">
-        {Array.from({ length: DELIVERY_TABLE_SKELETON_ROWS }, (_, i) => (
-          <div key={i} className={ROW_SEPARATOR_CLASS}>
-            <DeliveryRowSkeleton />
-          </div>
-        ))}
+        <LoadingItems count={DELIVERY_TABLE_SKELETON_ROWS}>
+          {() => (
+            <div data-loading-item className={ROW_SEPARATOR_CLASS}>
+              <DeliveryRow loading />
+            </div>
+          )}
+        </LoadingItems>
       </div>
     </div>
   );
@@ -53,8 +56,8 @@ export function DeliveryTableSkeleton() {
  * Displays bug fixes and enhancements with fixed-height rows
  */
 export function DeliveryTable({ items, isLoading = false }: DeliveryTableProps) {
-  // Show skeletons while loading
-  if (isLoading) return <DeliveryTableSkeleton />;
+  // ONE switch: a page's loading scope, or the host's read.
+  if (useLoadingScope() || isLoading) return <DeliveryTableSkeleton />;
 
   // Empty state
   if (items.length === 0) {
@@ -74,7 +77,7 @@ export function DeliveryTable({ items, isLoading = false }: DeliveryTableProps)
           // → `#delivery-<external_id>`; `useScrollToHash` in
           // `delivery-lists.tsx` finds the row by id and scrolls. The
           // outer wrapper here ONLY exists for the row separators.
-          <div key={item.id} className={ROW_SEPARATOR_CLASS}>
+          <div key={item.id} data-loading-item className={ROW_SEPARATOR_CLASS}>
             <DeliveryRow item={item} id={devSectionAnchorId('delivery', item.id)} />
           </div>
         ))}

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

@@ -15,9 +15,11 @@
  * in a `<div>` (static, like delivery) or `<button>` (clickable, like
  * tickets) and renders the row content via this component.
  *
- * Pair with `DevCardRowSkeletonList` for the loading state — the
- * skeleton mirrors the same min-heights so the in-flight UI doesn't
- * shift the layout when real data lands.
+ * The row draws its own loading state (a loading scope, or `loading`): its
+ * skeleton mirrors the same min-heights so the in-flight UI doesn't shift
+ * the layout when real data lands. A list draws its loading rows through
+ * its own row component (`HelpCenterCard ticket={null}`), never a list
+ * skeleton picked by the parent.
  *
  * NOTE: the ticket conversation row is NOT here — it renders the shared
  * `<ChatMessageRow>` (`components/chat/chat-message-row.tsx`), the SAME
@@ -27,10 +29,9 @@
 
 import type { ReactNode } from 'react';
 import { TEXT_LINES_MIN } from '../../../styles/component-sizes';
-import { LoadingRegion } from '../../loading/loading-region';
 import { TextLineSkeleton } from '../../loading/unified-skeleton';
-import { useLoadingScope } from '../../ui/loading-scope';
-import { StatusBadgeSkeleton } from '../../ui/status-badge';
+import { loadingItemProps, useLoadingScope } from '../../ui/loading-scope';
+import { StatusBadge } from '../../ui/status-badge';
 
 export interface DevCardRowContentProps {
   title: string;
@@ -43,6 +44,10 @@ export interface DevCardRowContentProps {
   emptyDescription?: string;
   /** Right column — caller renders its own stacked badges. */
   rightBadges: ReactNode;
+  /** The record is still being read: the row draws its own skeleton. A loading scope does the same. */
+  loading?: boolean;
+  /** The list's markers (`data-loading-item`), forwarded to the row's root in both forms. */
+  [marker: `data-${string}`]: unknown;
 }
 
 /** The row's layout, read by the row and by its skeleton, so the skeleton is the row's size. */
@@ -54,17 +59,12 @@ const ROW_SUBTITLE_LINE_CLASS = `flex items-center text-h5 ${TEXT_LINES_MIN[1]}`
 const ROW_DESCRIPTION_LINE_CLASS = `flex items-center text-h4 ${TEXT_LINES_MIN[3]}`;
 const ROW_BADGES_CLASS = 'flex flex-shrink-0 flex-col gap-2 self-start';
 
-export function DevCardRowContent({
-  title,
-  subtitle,
-  description,
-  emptyDescription = 'No description provided',
-  rightBadges,
-}: DevCardRowContentProps) {
+export function DevCardRowContent(props: DevCardRowContentProps) {
+  const { title, subtitle, description, emptyDescription = 'No description provided', rightBadges } = props;
   // While the page is read the record is not known: the row's content is its skeleton.
-  if (useLoadingScope()) return <DevCardRowContentSkeleton />;
+  if (useLoadingScope() || props.loading) return <DevCardRowContentSkeleton {...loadingItemProps(props)} />;
   return (
-    <div className={ROW_INNER_CLASS}>
+    <div className={ROW_INNER_CLASS} {...loadingItemProps(props)}>
       <div className={ROW_TEXT_COLUMN_CLASS}>
         <div className={ROW_TITLE_LINE_CLASS}>
           <h3 className="line-clamp-2 flex-1 break-words tracking-[-0.36px] text-ods-text-primary text-h3 content-md:truncate">
@@ -83,10 +83,11 @@ export function DevCardRowContent({
   );
 }
 
-/** A row's content while its record is read: the title, subtitle and description as bars, two badge skeletons. */
-export function DevCardRowContentSkeleton() {
+/** A row's content while its record is read: the title, subtitle and description as bars, the status badge every row carries.
+ *  Its `data-*` props (the list's markers) are forwarded, like the loaded row's. */
+function DevCardRowContentSkeleton(props: { [marker: `data-${string}`]: unknown }) {
   return (
-    <div className={ROW_INNER_CLASS} aria-hidden>
+    <div className={ROW_INNER_CLASS} aria-hidden {...loadingItemProps(props)}>
       <div className={ROW_TEXT_COLUMN_CLASS}>
         <div className={ROW_TITLE_LINE_CLASS}>
           <TextLineSkeleton type="h3" className="w-full" />
@@ -99,48 +100,10 @@ export function DevCardRowContentSkeleton() {
         </div>
       </div>
       <div className={ROW_BADGES_CLASS}>
-        <StatusBadgeSkeleton variant="card" />
-        <StatusBadgeSkeleton variant="card" />
+        {/* The one badge every row carries (a ticket's status); the others (NEW, priority) are optional, so not
+            drawn. The badges are a row's fixed parts, not a list. */}
+        <StatusBadge loading text="" variant="card" />
       </div>
     </div>
   );
 }
-
-/**
- * Skeleton rendering for a single row — the bars mirror the same
- * min-heights as `DevCardRowContent` so the loading→loaded swap
- * doesn't reflow.
- */
-export function DevCardRowSkeleton() {
-  return (
-    <div className="border-b border-ods-border p-[12px] last:border-b-0 content-md:p-[16px]">
-      <DevCardRowContentSkeleton />
-    </div>
-  );
-}
-
-/**
- * The skeleton rows inside a bordered card: the loading state of every list shell. A list draws ONE FULL PAGE, so
- * a paged list passes its page size (the tickets list passes its own); `5` is the typical count for a list with none.
- */
-export function DevCardRowSkeletonList({
-  region = true,
-  rows = 5,
-}: {
-  /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
-  region?: boolean;
-  /** Rows to draw: the list's page size. Default `5`. */
-  rows?: number;
-}) {
-  return (
-    <LoadingRegion
-      label="Loading"
-      announce={region}
-      className="w-full overflow-hidden rounded-[6px] border border-ods-border bg-ods-card"
-    >
-      {Array.from({ length: rows }, (_, i) => (
-        <DevCardRowSkeleton key={i} />
-      ))}
-    </LoadingRegion>
-  );
-}

package/src/components/shared/dev-section/index.ts

@@ -1,8 +1,3 @@
 export { DevSectionView, type DevSectionViewProps } from './dev-section-view';
 export { DevSectionPage, type DevSectionPageProps } from './dev-section-page';
-export {
-  DevCardRowContent,
-  DevCardRowSkeleton,
-  DevCardRowSkeletonList,
-  type DevCardRowContentProps,
-} from './dev-card-row';
+export { DevCardRowContent, type DevCardRowContentProps } from './dev-card-row';

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

@@ -9,7 +9,6 @@
 export {
   LegalDocumentPage,
   legalDocumentStampLabel,
-  LegalDocumentSkeleton,
   LEGAL_DOCUMENT_SKELETON_SECTIONS,
   type LegalDocumentPageProps,
   type LegalDocumentMarkdownRendererProps,

package/src/components/shared/legal-document/legal-document-page.tsx

@@ -26,7 +26,7 @@ import { LoadingRegion } from '../../loading/loading-region';
 import { PageShell, PageLayout } from '../../ui';
 import { DataSyncLine } from '../../ui/data-attribution';
 import { useLoadingScope } from '../../ui/loading-scope';
-import { RichMarkdownRenderer, RichMarkdownRendererSkeleton } from '../../ui/markdown';
+import { MarkdownEngine, RichMarkdownRenderer } from '../../ui/markdown';
 import { useLegalDocs, type LegalDocument } from './use-legal-docs';
 import { useLegalDocuments } from './use-legal-documents';
 
@@ -109,13 +109,13 @@ export function legalDocumentStampLabel(
 export const LEGAL_DOCUMENT_SKELETON_SECTIONS = 3;
 
 /**
- * A legal document's body while it is read: the rich renderer's own skeleton (`RichMarkdownRendererSkeleton`, the
+ * A legal document's body while it is read: the markdown engine's own loading form (`MarkdownEngine loading`, at the
  * `article` type the page renders with), opening with the document's own title row, then its first fold of sections.
  */
-export function LegalDocumentSkeleton({ sections = LEGAL_DOCUMENT_SKELETON_SECTIONS }: { sections?: number }) {
+function LegalDocumentSkeleton({ sections = LEGAL_DOCUMENT_SKELETON_SECTIONS }: { sections?: number }) {
   return (
     <LoadingRegion label="Loading the document" className="w-full">
-      <RichMarkdownRendererSkeleton title sections={sections} />
+      <MarkdownEngine loading content="" skeletonTitle skeletonSections={sections} textSize="article" />
     </LoadingRegion>
   );
 }

package/src/components/shared/media-gallery-strip.tsx

@@ -5,8 +5,9 @@ import Image from '../../embed-shims/next-image';
 import { cn } from '../../utils/cn';
 import { Video } from '../features/video';
 import { UnifiedSkeleton } from '../loading/unified-skeleton';
+import { Button } from '../ui/button';
 import { ImageGalleryModal } from '../ui/image-gallery-modal';
-import { useLoadingScope } from '../ui/loading-scope';
+import { LoadingItems, useLoadingScope } from '../ui/loading-scope';
 
 export interface MediaGalleryStripItem {
   media_type: string;
@@ -23,8 +24,12 @@ function isGalleryImage(mediaType: string): boolean {
 
 /** The strip's layout, read by the strip and by its skeleton, so the skeleton is the strip's size. */
 const STRIP_CLASS = 'flex w-full gap-6 overflow-x-auto';
-const TILE_SIZE_CLASS = 'shrink-0 w-[240px] h-[200px] rounded-md';
-const TILE_CLASS = `${TILE_SIZE_CLASS} overflow-hidden border border-ods-border bg-ods-bg transition-opacity`;
+/** A tile's place and size in the strip (an image tile is a `card` button of this size). */
+const TILE_BOX_CLASS = 'shrink-0 w-[240px] h-[200px]';
+const TILE_SIZE_CLASS = `${TILE_BOX_CLASS} rounded-md`;
+/** A tile's frame: the video tile's box, and the image tile's content inside its button. */
+const TILE_FRAME_CLASS = 'overflow-hidden rounded-md border border-ods-border bg-ods-bg';
+const TILE_CLASS = cn(TILE_SIZE_CLASS, TILE_FRAME_CLASS);
 /** Tiles a skeleton draws when not told how many (a strip's first fold on a wide screen). */
 export const MEDIA_GALLERY_STRIP_SKELETON_COUNT = 4;
 
@@ -67,10 +72,12 @@ export function MediaGalleryStrip({ items, className }: MediaGalleryStripProps)
           // owns its own controls, so their tile stays a plain container.
           if (isGalleryImage(mediaItem.media_type)) {
             return (
-              <button
+              <Button
+                variant="card"
                 key={mediaItem.id || index}
+                data-loading-item
                 type="button"
-                className={`${tileClass} cursor-pointer hover:opacity-80`}
+                className={TILE_BOX_CLASS}
                 aria-label={`Open ${mediaItem.title || `media ${index + 1}`} in gallery`}
                 onClick={() => {
                   // Lightbox position = rank among image-only items (clips skipped).
@@ -78,19 +85,21 @@ export function MediaGalleryStrip({ items, className }: MediaGalleryStripProps)
                   setGalleryOpen(true);
                 }}
               >
-                <Image
-                  src={mediaItem.media_url}
-                  alt={mediaItem.title || `Media ${index + 1}`}
-                  className="h-full w-full object-cover"
-                  width={240}
-                  height={200}
-                  unoptimized
-                />
-              </button>
+                <span className={cn('block h-full w-full', TILE_FRAME_CLASS)}>
+                  <Image
+                    src={mediaItem.media_url}
+                    alt={mediaItem.title || `Media ${index + 1}`}
+                    className="h-full w-full object-cover"
+                    width={240}
+                    height={200}
+                    unoptimized
+                  />
+                </span>
+              </Button>
             );
           }
           return (
-            <div key={mediaItem.id || index} className={tileClass}>
+            <div key={mediaItem.id || index} className={tileClass} data-loading-item>
               <Video url={mediaItem.media_url} layout="native" />
             </div>
           );
@@ -110,7 +119,7 @@ export function MediaGalleryStrip({ items, className }: MediaGalleryStripProps)
 }
 
 /** The media strip while it is read: `count` tiles of the strip's own 240×200 size. */
-export function MediaGalleryStripSkeleton({
+function MediaGalleryStripSkeleton({
   count = MEDIA_GALLERY_STRIP_SKELETON_COUNT,
   className,
 }: {
@@ -119,10 +128,9 @@ export function MediaGalleryStripSkeleton({
 }) {
   return (
     <div className={cn(STRIP_CLASS, 'overflow-hidden', className)} aria-hidden>
-      {Array.from({ length: count }, (_, i) => (
-        // biome-ignore lint/suspicious/noArrayIndexKey: skeleton tiles never reorder
-        <UnifiedSkeleton key={i} className={TILE_SIZE_CLASS} />
-      ))}
+      <LoadingItems count={count}>
+        {() => <UnifiedSkeleton className={TILE_SIZE_CLASS} data-loading-item />}
+      </LoadingItems>
     </div>
   );
 }

package/src/components/shared/onboarding/onboarding-walkthrough.tsx

@@ -6,6 +6,7 @@ import { cn } from '../../../utils/cn';
 import { accentSentenceMarks, SECTION_HEADING_CLASS } from '../../layout/page-heading';
 import { UnifiedSkeleton } from '../../loading/unified-skeleton';
 import { Button } from '../../ui/button';
+import { useLoadingScope } from '../../ui/loading-scope';
 import { OnboardingStepCard } from './onboarding-step-card';
 
 export interface OnboardingWalkthroughProps {
@@ -42,8 +43,10 @@ export function OnboardingWalkthrough({
   className,
   spacing = 'space-y-4',
   completionStatus,
-  isLoadingCompletion = false,
+  isLoadingCompletion: loadingCompletionGiven = false,
 }: OnboardingWalkthroughProps) {
+  // ONE switch: a page's loading scope (nothing in it reads or writes the completion), or the host's checks.
+  const isLoadingCompletion = useLoadingScope() || loadingCompletionGiven;
   const {
     state,
     markComplete,

package/src/components/shared/product-release/index.ts

@@ -1,7 +1,6 @@
 'use client';
 
 export { ProductReleaseCard, type ProductReleaseCardProps } from './product-release-card';
-export { ProductReleaseCardSkeleton, type ProductReleaseCardSkeletonProps } from './product-release-card-skeleton';
 export {
   ProductReleasesView,
   type ProductReleasesViewProps,

package/src/components/shared/product-release/product-release-card-skeleton.tsx

@@ -2,9 +2,9 @@
 
 import { cn } from '../../../utils/cn';
 import { CONTENT_CARD_SKELETON_FRAME_CLASS } from '../../chat/entity-cards/content-card-frame';
-import { EntityMetadataAuthorCellSkeleton } from '../../chat/entity-cards/entity-author-card';
+import { EntityMetadataAuthorCell } from '../../chat/entity-cards/entity-author-card';
 import { TextLineSkeleton, UnifiedSkeleton } from '../../loading/unified-skeleton';
-import { StatusBadgeSkeleton } from '../../ui/status-badge';
+import { StatusBadge } from '../../ui/status-badge';
 import {
   RELEASE_CARD_CELL_CLASS,
   RELEASE_CARD_CELL_DIVIDER_CLASS,
@@ -83,7 +83,7 @@ export function ProductReleaseCardSkeleton({ className, size = 'lg' }: ProductRe
               <div className={RELEASE_CARD_CELL_STACK_CLASS}>
                 {/* The Type value is a card StatusBadge loaded; the others are a text-h4 line. */}
                 {i === 0 ? (
-                  <StatusBadgeSkeleton variant="card" className="justify-self-start" />
+                  <StatusBadge loading text="" variant="card" className="justify-self-start" />
                 ) : (
                   <p className="text-h4">
                     <TextLineSkeleton type="inherit" as="span" className="w-24" />
@@ -93,7 +93,7 @@ export function ProductReleaseCardSkeleton({ className, size = 'lg' }: ProductRe
               </div>
             </div>
           ))}
-          <EntityMetadataAuthorCellSkeleton />
+          <EntityMetadataAuthorCell loading />
         </div>
       </div>
     );

package/src/components/shared/product-release/product-release-card.tsx

@@ -79,7 +79,7 @@ export interface ProductReleaseCardAnchorProps {
   onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
 }
 
-export interface ProductReleaseCardProps {
+export interface LoadedProductReleaseCardProps {
   /** Release title */
   title: string;
   /** Release summary/description */
@@ -108,8 +108,6 @@ export interface ProductReleaseCardProps {
   className?: string;
   /** Card density. Defaults to `'lg'` (the canonical large card). */
   size?: ProductReleaseCardSize;
-  /** The release is still being read: the card draws its own skeleton (also in a page's loading scope). */
-  loading?: boolean;
 
   // ─── Catalog-only props (ignored by `default` / `sm` branches) ─────────
   /** Cover image URL. Falls back to a neutral `Package`-icon placeholder. */
@@ -145,7 +143,20 @@ export interface ProductReleaseCardProps {
   };
 }
 
-export function ProductReleaseCard({
+/** The release, or `loading` while the host reads it: the card then draws its own loading form (also in a scope). */
+export type ProductReleaseCardProps =
+  | (LoadedProductReleaseCardProps & { loading?: boolean })
+  | (Partial<LoadedProductReleaseCardProps> & { loading: true });
+
+/** One switch: while the release is read (a prop, or a page's loading scope) the card is its own loading form. */
+export function ProductReleaseCard(props: ProductReleaseCardProps) {
+  if (useLoadingScope() || props.loading) {
+    return <ProductReleaseCardSkeleton size={props.size ?? 'lg'} className={props.className} />;
+  }
+  return <LoadedProductReleaseCard {...props} />;
+}
+
+function LoadedProductReleaseCard({
   title,
   summary,
   version,
@@ -162,10 +173,7 @@ export function ProductReleaseCard({
   viewCount,
   author,
   changelogCounts,
-  loading = false,
-}: ProductReleaseCardProps) {
-  // One switch: while the release is read (a prop, or a page's loading scope) the card is its skeleton.
-  if (useLoadingScope() || loading) return <ProductReleaseCardSkeleton size={size} className={className} />;
+}: LoadedProductReleaseCardProps) {
   // ----- LG branch (rich /releases catalog row + related-content rail) -----
   // The card has THREE zones:
   //   1. Hero — cover image LEFT, version pill + title + summary RIGHT.

package/src/components/shared/product-release/product-releases-view.tsx

@@ -36,11 +36,14 @@ import { usePageDataSync } from '../../layout/page-data-sync';
 import { ListEmptyState } from '../../list-empty-state';
 import { LoadingRegion } from '../../loading/loading-region';
 import { LoadError } from '../../ui/error-state';
-import { useLoadingScope } from '../../ui/loading-scope';
+import { LoadingItems, useLoadingScope } from '../../ui/loading-scope';
 import { UnifiedPagination } from '../../unified-pagination';
-import { ProductReleaseCard, type ProductReleaseCardProps } from './product-release-card';
+import { type LoadedProductReleaseCardProps, ProductReleaseCard } from './product-release-card';
 
 const DEFAULT_ENDPOINT = '/api/releases';
+/** Releases a page lists when the host states no `itemsPerPage`: the list's own page size. */
+const PRODUCT_RELEASES_PAGE_SIZE = 5;
+
 /** The pager's row inside the list's bottom slot: no margin of its own (the slot spaces it), so the loaded pager is
  *  the height of its skeleton. */
 const PAGER_ROW_CLASS = 'flex w-full justify-center';
@@ -54,7 +57,7 @@ const DEFAULT_PAGE_PARAM_KEY = 'page';
  *  own data fields minus the ones this view supplies (title/summary/version/
  *  size/nav). `formattedDate` stays required so the spread satisfies the card. */
 export type ProductReleaseCardExtras = Omit<
-  ProductReleaseCardProps,
+  LoadedProductReleaseCardProps,
   'title' | 'summary' | 'version' | 'size' | 'anchorProps' | 'onClick' | 'className'
 >;
 
@@ -64,7 +67,7 @@ export interface ProductReleasesViewProps {
   endpoint?: string;
   /** Optional SSR hydrate for the first page — skips the initial client fetch. */
   initialData?: ProductReleaseListResponse;
-  /** Page size → fixed slot count + offset math. Default 5. */
+  /** Page size → fixed slot count + offset math. Default `PRODUCT_RELEASES_PAGE_SIZE`. */
   itemsPerPage?: number;
   /** Fallback detail-href prefix when `runtime.composeContentUrl` is not wired
    *  (single-platform embedders). Default `/releases`. */
@@ -140,7 +143,7 @@ function ReleaseRow({
 export function ProductReleasesView({
   endpoint = DEFAULT_ENDPOINT,
   initialData,
-  itemsPerPage = 5,
+  itemsPerPage = PRODUCT_RELEASES_PAGE_SIZE,
   basePath = '/releases',
   buildCardProps = buildProductReleaseCardProps,
   searchParamKey = DEFAULT_SEARCH_PARAM_KEY,
@@ -224,23 +227,25 @@ export function ProductReleasesView({
             {/* ALWAYS render `itemsPerPage` slots — visibility toggles so the
                 list height is stable across loading ↔ loaded. */}
             <LoadingRegion label="Loading releases" announce={isLoading} className="flex flex-col gap-6">
-              {Array.from({ length: itemsPerPage }).map((_, i) => {
-                const release = releases[i];
-                const hasData = !!release;
-                return (
-                  <div
-                    key={release?.id ?? `slot-${i}`}
-                    style={{ visibility: isLoading || hasData ? 'visible' : 'hidden' }}
-                  >
-                    {!isLoading && release ? (
-                      <ReleaseRow release={release} basePath={basePath} buildCardProps={buildCardProps} />
-                    ) : (
-                      // Read, or a hidden slot past the page's last release: the card draws its own skeleton.
-                      <ProductReleaseCard loading size="lg" title="" version="" formattedDate="" />
-                    )}
-                  </div>
-                );
-              })}
+              <LoadingItems count={itemsPerPage}>
+                {i => {
+                  const release = releases[i];
+                  return (
+                    <div
+                      // One slot of the page's list, read or loaded alike.
+                      data-loading-item
+                      style={{ visibility: isLoading || release ? 'visible' : 'hidden' }}
+                    >
+                      {!isLoading && release ? (
+                        <ReleaseRow release={release} basePath={basePath} buildCardProps={buildCardProps} />
+                      ) : (
+                        // Read, or a hidden slot past the page's last release: the card draws its own skeleton.
+                        <ProductReleaseCard loading size="lg" title="" version="" formattedDate="" />
+                      )}
+                    </div>
+                  );
+                }}
+              </LoadingItems>
             </LoadingRegion>
 
             {/* Pagination: always present at the bottom, one row height in every state (its skeleton while the list

package/src/components/shared/product-release/release-detail-page.tsx

@@ -27,11 +27,11 @@ import {
 import { GithubClassicIcon } from '../../icons-v2-generated/brand-logos/github-classic-icon';
 import { PageShell } from '../../layout/article-detail-layout';
 import { PageLayout } from '../../layout/page-layout';
-import { LoadingRegion } from '../../loading/loading-region';
+import { LoadingFallback } from '../../loading/loading-fallback';
 import { TextLineSkeleton } from '../../loading/unified-skeleton';
 import { Card, CardContent } from '../../ui/card';
 import { FadePreview } from '../../ui/fade-preview';
-import { LoadingScope, useLoadingScope } from '../../ui/loading-scope';
+import { useLoadingScope } from '../../ui/loading-scope';
 import { RichMarkdownRenderer } from '../../ui/markdown';
 import { ReleaseChangelogSection } from '../../ui/release-changelog-section';
 import { MediaGalleryStrip } from '../media-gallery-strip';
@@ -718,13 +718,5 @@ export function ReleaseDetailPage({
     </PageLayout>
   );
   // The loading state is the page itself in a scope, announced once unless a host's scope already did.
-  return renderShell(
-    loading ? (
-      <LoadingRegion label="Loading the release" announce={!scoped}>
-        <LoadingScope>{page}</LoadingScope>
-      </LoadingRegion>
-    ) : (
-      page
-    ),
-  );
+  return renderShell(loading ? <LoadingFallback label="Loading the release">{page}</LoadingFallback> : page);
 }

package/src/components/shared/roadmap/index.ts

@@ -14,7 +14,6 @@
  */
 
 export { RoadmapGrid, type RoadmapGridProps } from './roadmap-grid';
-export { RoadmapGridSkeleton, type RoadmapGridSkeletonProps } from './roadmap-grid-skeleton';
 // `VoteType` deliberately NOT re-exported — `./chat` already exports
 // the same-shape `VoteType` from `roadmap-card.tsx`; a duplicate path
 // triggers TS2308 ambiguous re-export at the top-level