@flamingo-stack/openframe-frontend-core 0.0.780 → 0.0.782

package/src/components/onboarding-guides/onboarding-guide-detail-view.tsx

@@ -43,11 +43,11 @@ import { VideoBitesStrip } from '../features/video-bites-strip';
 // the detail block visibly narrower than the rail.
 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 { ArticleAuthorByline } from '../shared/article-author-byline';
 import { LoadError } from '../ui/error-state';
-import { LoadingScope, useLoadingScope } from '../ui/loading-scope';
+import { useLoadingScope } from '../ui/loading-scope';
 import { RichMarkdownRenderer } from '../ui/markdown';
 
 export interface OnboardingGuideDetailViewProps {
@@ -356,13 +356,5 @@ export function OnboardingGuideDetailView({
     </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 guide" announce={!scoped}>
-        <LoadingScope>{page}</LoadingScope>
-      </LoadingRegion>
-    ) : (
-      page
-    ),
-  );
+  return renderShell(loading ? <LoadingFallback label="Loading the guide">{page}</LoadingFallback> : page);
 }

package/src/components/onboarding-guides/onboarding-guides-catalog-view.tsx

@@ -30,21 +30,57 @@ import { cn } from '../../utils/cn';
 import { resolveContentHref } from '../../utils/content-href';
 import { OnboardingGuideCard } from '../chat/entity-cards/onboarding-guide-card';
 import type { OnboardingGuide } from '../chat/types/entities/onboarding-guide';
-import { LoadingRegion } from '../loading/loading-region';
+import { LoadingFallback } from '../loading/loading-fallback';
+import { TextLineSkeleton } from '../loading/unified-skeleton';
 import { DocSearchBar, useDocSearch } from '../shared/doc-search';
 import { LoadError } from '../ui/error-state';
 import { FilterPillRow } from '../ui/filter-pill-row';
-import { LoadingScope, useLoadingScope } from '../ui/loading-scope';
-import {
-  CATALOG_CONTROLS_CLASS,
-  CATALOG_LIST_CLASS,
-  CATALOG_SECTION_CLASS,
-  CATALOG_SECTION_COUNT_CLASS,
-  CATALOG_SECTION_HEADING_CLASS,
-  CATALOG_SECTIONS_CLASS,
-  CATALOG_VIEW_CLASS,
-  OnboardingCatalogSectionsSkeleton,
-} from './onboarding-guides-catalog-skeleton';
+import { LoadingItems, useLoadingScope } from '../ui/loading-scope';
+
+/** The catalog's layout, read by the loaded view and by its sections' skeleton, so the skeleton is the view's size. */
+const CATALOG_VIEW_CLASS = 'flex w-full flex-col gap-10';
+const CATALOG_CONTROLS_CLASS = 'space-y-4';
+const CATALOG_SECTIONS_CLASS = 'space-y-10';
+const CATALOG_SECTION_CLASS = 'space-y-4';
+const CATALOG_SECTION_HEADING_CLASS = 'flex items-center gap-2 text-ods-text-primary text-h3';
+const CATALOG_SECTION_COUNT_CLASS =
+  'inline-flex items-center justify-center rounded-full bg-ods-text-secondary/20 px-2 py-0.5 text-ods-text-secondary text-h6';
+const CATALOG_LIST_CLASS = 'flex flex-col gap-4';
+
+/**
+ * Catalog cards the skeleton's section draws: a typical count, at every width. The catalog reads every guide (no
+ * page, no limit), so there is no page size to draw. The section count is the data's too: the skeleton draws ONE
+ * section, and every loaded section is a `data-loading-item`.
+ */
+const ONBOARDING_CATALOG_SKELETON_CARDS = 3;
+/**
+ * The catalog's sections while the guides are read: ONE section of `ONBOARDING_CATALOG_SKELETON_CARDS` cards in the view's
+ * own classes (its heading and count bars). The view draws it itself (`useLoadingScope() || loading`): its search bar
+ * is real and its section pills draw their own skeleton.
+ */
+function OnboardingCatalogSectionsSkeleton() {
+  return (
+    <div className={CATALOG_SECTIONS_CLASS}>
+      <section className={CATALOG_SECTION_CLASS} data-loading-item>
+        <h2 className={CATALOG_SECTION_HEADING_CLASS}>
+          <TextLineSkeleton type="inherit" as="span" className="w-40" />
+          <span className={CATALOG_SECTION_COUNT_CLASS}>
+            <TextLineSkeleton type="inherit" as="span" className="w-3" />
+          </span>
+        </h2>
+        <ul className={CATALOG_LIST_CLASS}>
+          <LoadingItems count={ONBOARDING_CATALOG_SKELETON_CARDS}>
+            {() => (
+              <li data-loading-item>
+                <OnboardingGuideCard loading size="catalog" />
+              </li>
+            )}
+          </LoadingItems>
+        </ul>
+      </section>
+    </div>
+  );
+}
 
 type SectionSummary = { section: string; section_order: number; count: number };
 
@@ -224,11 +260,7 @@ export function OnboardingGuidesCatalogView({
   // The first read (no data yet): the SAME view in a loading scope. A later section toggle that returns ZERO guides
   // keeps the page's controls and dims the grid (`dimmed`).
   if (!loading) return view;
-  return (
-    <LoadingRegion label="Loading onboarding guides" announce={!scoped}>
-      <LoadingScope>{view}</LoadingScope>
-    </LoadingRegion>
-  );
+  return <LoadingFallback label="Loading onboarding guides">{view}</LoadingFallback>;
 }
 
 /** The catalog's sections: their own skeleton while the guides are read (`useLoadingScope() || loading`). */
@@ -271,7 +303,9 @@ function OnboardingCatalogSections({
               read top-to-bottom; a grid would visually reorder them. */}
           <ul className={CATALOG_LIST_CLASS}>
             {sec.guides.map(guide => (
-              <li key={guide.id}>{renderCard(guide)}</li>
+              <li key={guide.id} data-loading-item>
+                {renderCard(guide)}
+              </li>
             ))}
           </ul>
         </section>

package/src/components/pagination.tsx

@@ -291,16 +291,7 @@ PaginationItem.displayName = 'PaginationItem';
 
 const PaginationLink = forwardRef<HTMLButtonElement, ButtonHTMLAttributes<HTMLButtonElement>>(
   ({ className, ...props }, ref) => {
-    return (
-      <button
-        ref={ref}
-        className={cn(
-          'inline-flex h-10 w-10 items-center justify-center rounded-md border border-input bg-background transition-colors text-h6 hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
-          className,
-        )}
-        {...props}
-      />
-    );
+    return <Button variant="outline" size="icon" ref={ref} className={className} {...props} />;
   },
 );
 PaginationLink.displayName = 'PaginationLink';

package/src/components/platform/ToolBadge.tsx

@@ -62,7 +62,7 @@ const INLINE_CLASS = 'flex items-center gap-1 text-ods-text-secondary';
  */
 const CHIP_NAME_TYPICAL_CH = '11ch';
 
-export interface ToolBadgeSkeletonProps {
+interface ToolBadgeSkeletonProps {
   variant?: 'inline' | 'chip';
   /** Whether the badge leads with its mark (default true). */
   icon?: boolean;
@@ -70,7 +70,7 @@ export interface ToolBadgeSkeletonProps {
 }
 
 /** A badge while its tool is read: the chip's own frame (or the inline row), a mark box and a bar for the name. */
-export function ToolBadgeSkeleton({ variant = 'inline', icon = true, className }: ToolBadgeSkeletonProps) {
+function ToolBadgeSkeleton({ variant = 'inline', icon = true, className }: ToolBadgeSkeletonProps) {
   if (variant === 'chip') {
     return (
       <span className={cn(CHIP_CLASS, className)} style={CHIP_STYLE} aria-hidden>

package/src/components/platform/index.ts

@@ -16,8 +16,8 @@ export type { SoftwareSourceBadgeProps, SoftwareSource } from './SoftwareSourceB
 export { CveLink } from './CveLink';
 export type { CveLinkProps } from './CveLink';
 
-export { TOOL_CHIP_HEIGHT, ToolBadge, ToolBadgeSkeleton } from './ToolBadge';
-export type { ToolBadgeProps, ToolBadgeSkeletonProps } from './ToolBadge';
+export { TOOL_CHIP_HEIGHT, ToolBadge } from './ToolBadge';
+export type { ToolBadgeProps } from './ToolBadge';
 export type { ToolType } from '../../types/tool.types';
 
 export { ShellTypeBadge } from './ShellTypeBadge';

package/src/components/product-demo/product-screen.tsx

@@ -1,18 +1,36 @@
 'use client';
 
-import { lazy, type LazyExoticComponent, type ReactNode, Suspense } from 'react';
+import { createElement, type ReactNode, useEffect, useState } from 'react';
 import { UnifiedSkeleton } from '../loading/unified-skeleton';
-import { useLoadingScope } from '../ui/loading-scope';
+import { LoadingScope, useLoadingScope } from '../ui/loading-scope';
 import { ProductScreenFrame, type ProductScreenFrameProps } from '../ui/product-screen-frame';
 import { PRODUCT_SCREEN_LOADERS } from './registry';
-import { PRODUCT_SCREEN_KEYS, PRODUCT_SCREEN_LABELS, type ProductScreenKey } from './screen-keys';
+import { PRODUCT_SCREEN_LABELS, type ProductScreenKey } from './screen-keys';
 import { PRODUCT_SCREEN_LOADING } from './screen-loading';
 import type { ProductScreenComponent } from './types';
 
-/** One lazy component per screen, made once: a screen's code is fetched the first time it renders. */
-const LAZY_SCREENS = Object.fromEntries(
-  PRODUCT_SCREEN_KEYS.map(key => [key, lazy(PRODUCT_SCREEN_LOADERS[key])]),
-) as Record<ProductScreenKey, LazyExoticComponent<ProductScreenComponent>>;
+/** The screens whose code has arrived, kept for the page's life: a screen shown again renders at once. */
+const LOADED_SCREENS = new Map<ProductScreenKey, ProductScreenComponent>();
+
+/**
+ * Fetches a screen's code outside a loading scope (a page's loading state fetches nothing) and re-renders once it is
+ * here. No Suspense: the frame keeps the SAME loading view mounted until the code arrives, so the loading state is
+ * drawn once and never torn down and mounted again (that was the double loading).
+ */
+function useScreenCode(screen: ProductScreenKey, fetch: boolean): void {
+  const [, setArrived] = useState(0);
+  useEffect(() => {
+    if (!fetch || LOADED_SCREENS.has(screen)) return undefined;
+    let live = true;
+    void PRODUCT_SCREEN_LOADERS[screen]().then(module => {
+      LOADED_SCREENS.set(screen, module.default);
+      if (live) setArrived(count => count + 1);
+    });
+    return () => {
+      live = false;
+    };
+  }, [screen, fetch]);
+}
 
 /** Frame heights of the two renderings: constants, so the loading state and the loaded screen are one box. */
 export const PRODUCT_SCREEN_HEIGHT = 440;
@@ -89,7 +107,13 @@ function ProductScreenShell({
  *  frame's box. */
 function ScreenLoading({ screen, compact }: { screen: ProductScreenKey; compact: boolean }) {
   const Loading = PRODUCT_SCREEN_LOADING[screen];
-  return Loading ? <Loading compact={compact} /> : <UnifiedSkeleton className="h-full w-full" />;
+  // Always in a loading scope: before the frame is measured (its scope) and while the screen's code downloads (the
+  // Suspense fallback) the view is drawn the SAME way, so the first paint and the fallback are one loading state.
+  return (
+    <LoadingScope bare>
+      {Loading ? <Loading compact={compact} /> : <UnifiedSkeleton className="h-full w-full" />}
+    </LoadingScope>
+  );
 }
 
 /**
@@ -99,17 +123,13 @@ function ScreenLoading({ screen, compact }: { screen: ProductScreenKey; compact:
  * nothing.
  */
 export function ProductScreen({ screen, compact = false, ...frame }: ProductScreenProps) {
-  const Screen = LAZY_SCREENS[screen];
   const loading = useLoadingScope();
+  useScreenCode(screen, !loading);
+  const Screen = LOADED_SCREENS.get(screen);
   return (
     <ProductScreenShell screen={screen} compact={compact} {...frame}>
-      {loading ? (
-        <ScreenLoading screen={screen} compact={compact} />
-      ) : (
-        <Suspense fallback={<ScreenLoading screen={screen} compact={compact} />}>
-          <Screen compact={compact} />
-        </Suspense>
-      )}
+      {/* The arrived screen is a module's component, kept in `LOADED_SCREENS`: never created during render. */}
+      {loading || !Screen ? <ScreenLoading screen={screen} compact={compact} /> : createElement(Screen, { compact })}
     </ProductScreenShell>
   );
 }

package/src/components/product-demo/screen-loading.tsx

@@ -4,11 +4,6 @@ import type { ProductScreenKey } from './screen-keys';
 import { DevicesScreenView } from './screens/devices-view';
 import type { ProductScreenComponent } from './types';
 
-/** The Devices screen while its code loads: the same view in its own loading state. */
-function DevicesScreenLoading({ compact = false }: { compact?: boolean }) {
-  return <DevicesScreenView compact={compact} loading />;
-}
-
 /**
  * Each screen's loading state, drawn in its frame while the screen's code (and its fixture) loads: the screen's own
  * VIEW rendered with `loading`, never a separate skeleton. Kept apart from `PRODUCT_SCREEN_LOADERS`: this module
@@ -16,5 +11,6 @@ function DevicesScreenLoading({ compact = false }: { compact?: boolean }) {
  * with no entry yet holds its frame's box.
  */
 export const PRODUCT_SCREEN_LOADING: Partial<Record<ProductScreenKey, ProductScreenComponent>> = {
-  devices: DevicesScreenLoading,
+  // The Devices screen while its code loads: the same view, in its own loading state.
+  devices: ({ compact = false }) => <DevicesScreenView compact={compact} loading />,
 };

package/src/components/related-content/card-registry.tsx

@@ -48,32 +48,27 @@ import type { CustomerInterview } from '../../types/customer-interview';
 import type { EntityAuthor } from '../../types/entity-author';
 import type { MSP } from '../../types/stack';
 import type { UserProfile } from '../../types/user';
-import { AiPromptCard, AiPromptCardSkeleton, type AiPromptCardData } from '../chat/entity-cards/ai-prompt-card';
+import { AiPromptCard, type AiPromptCardData } from '../chat/entity-cards/ai-prompt-card';
 // DEEP card imports — NOT the `../chat` barrel. See the import note in
 // `related-content-section.tsx`: the barrel statically reaches
 // @tanstack/react-query, deep paths keep this module's source graph free of it.
-import { BlogCard, BlogCardSkeleton } from '../chat/entity-cards/blog-card';
-import { CaseStudyCard, CaseStudyCardSkeleton } from '../chat/entity-cards/case-study-card';
-import { CustomerInterviewCard, CustomerInterviewCardSkeleton } from '../chat/entity-cards/customer-interview-card';
+import { BlogCard } from '../chat/entity-cards/blog-card';
+import { CaseStudyCard } from '../chat/entity-cards/case-study-card';
+import { CustomerInterviewCard } from '../chat/entity-cards/customer-interview-card';
 // Type-only — erased at build, no runtime dependency on the dispatch module.
 import type { ChatCardDispatchExtras } from '../chat/entity-cards/dispatch';
-import { HowIWorkCard, HowIWorkCardSkeleton, type HowIWorkCardData } from '../chat/entity-cards/how-i-work-card';
-import { InvestorUpdateCard, InvestorUpdateCardSkeleton } from '../chat/entity-cards/investor-update-card';
-import { OnboardingGuideCard, OnboardingGuideCardSkeleton } from '../chat/entity-cards/onboarding-guide-card';
+import { HowIWorkCard, type HowIWorkCardData } from '../chat/entity-cards/how-i-work-card';
+import { InvestorUpdateCard } from '../chat/entity-cards/investor-update-card';
+import { OnboardingGuideCard } from '../chat/entity-cards/onboarding-guide-card';
 import { buildProductReleaseCardProps } from '../chat/entity-cards/product-release-card-defaults';
-import { ProgramCard, ProgramCardSkeleton } from '../chat/entity-cards/program-card';
-import { RoadmapCard, RoadmapCardSkeleton } from '../chat/entity-cards/roadmap-card';
-import {
-  WhatIShippedCard,
-  WhatIShippedCardSkeleton,
-  type WhatIShippedCardData,
-} from '../chat/entity-cards/what-i-shipped-card';
+import { ProgramCard } from '../chat/entity-cards/program-card';
+import { RoadmapCard } from '../chat/entity-cards/roadmap-card';
+import { WhatIShippedCard, type WhatIShippedCardData } from '../chat/entity-cards/what-i-shipped-card';
 import type { InvestorUpdate } from '../chat/types/entities/investor-update';
 import type { OnboardingGuide } from '../chat/types/entities/onboarding-guide';
 import type { BaseProgramItem, ProgramHost, ProgramMedia } from '../chat/types/entities/program-types';
 import type { RoadmapItem } from '../chat/types/entities/roadmap-item';
 import { ProductReleaseCard } from '../shared/product-release/product-release-card';
-import { ProductReleaseCardSkeleton } from '../shared/product-release/product-release-card-skeleton';
 
 export type CardSize = 'lg' | 'default' | 'sm';
 
@@ -621,20 +616,13 @@ function cardEntry<Row>(definition: {
  *  which host-supplied `ProgramConfig` they render with. A group whose config
  *  the host didn't supply renders nothing (the skeleton still reserves its
  *  height, so a rail that never resolves collapses instead of flickering). */
-/** Gallery thumbnails an event card's skeleton draws: the gallery row's first fold (the row scrolls past it). */
-const EVENT_CARD_SKELETON_MEDIA = 4;
 
 function programEntry(configKey: 'podcast' | 'webinar' | 'event'): RelatedCardRegistryEntry {
   return cardEntry({
-    // An event's list API serves its gallery (the loaded card draws its photo row), the other programs' none.
-    // Hosts are drawn only for a type whose cards show them (its config's `cardShowsHosts`): elsewhere a record may
-    // have none.
+    // The gallery and hosts rows are drawn only for a type whose cards show them (its config's `cardShowsGallery`,
+    // `cardShowsHosts`), as `ProgramCard` decides in a scope: elsewhere a record may have none.
     skeleton: (size, extras) => (
-      <ProgramCardSkeleton
-        size={size === 'sm' ? 'sm' : 'default'}
-        media={configKey === 'event' ? EVENT_CARD_SKELETON_MEDIA : 0}
-        hosts={extras?.programConfigs?.[configKey]?.cardShowsHosts ? 1 : 0}
-      />
+      <ProgramCard loading config={extras?.programConfigs?.[configKey]} size={size === 'sm' ? 'sm' : 'default'} />
     ),
     decode: decodeProgramRow,
     render: (item, ctx) => {
@@ -662,7 +650,7 @@ function programEntry(configKey: 'podcast' | 'webinar' | 'event'): RelatedCardRe
  *  `cardType` (drives the compact icon slot). */
 function roadmapEntry(cardType: 'roadmap_item' | 'delivery_item' | 'internal_task'): RelatedCardRegistryEntry {
   return cardEntry({
-    skeleton: size => <RoadmapCardSkeleton size={size === 'sm' ? 'sm' : 'default'} />,
+    skeleton: size => <RoadmapCard loading size={size === 'sm' ? 'sm' : 'default'} />,
     decode: decodeRoadmapRow,
     render: (item, ctx) => (
       <RoadmapCard
@@ -681,7 +669,7 @@ function roadmapEntry(cardType: 'roadmap_item' | 'delivery_item' | 'internal_tas
 
 export const RELATED_CARD_REGISTRY: Record<string, RelatedCardRegistryEntry> = {
   blog_post_existing: cardEntry({
-    skeleton: size => <BlogCardSkeleton size={size === 'sm' ? 'sm' : 'default'} />,
+    skeleton: size => <BlogCard loading size={size === 'sm' ? 'sm' : 'default'} />,
     decode: decodeBlogRow,
     render: (post, ctx) => (
       <BlogCard
@@ -697,7 +685,7 @@ export const RELATED_CARD_REGISTRY: Record<string, RelatedCardRegistryEntry> = {
   }),
 
   case_study: cardEntry({
-    skeleton: size => <CaseStudyCardSkeleton size={size === 'sm' ? 'sm' : 'default'} />,
+    skeleton: size => <CaseStudyCard loading size={size === 'sm' ? 'sm' : 'default'} />,
     decode: decodeCaseStudyRow,
     render: (study, ctx) => (
       <CaseStudyCard
@@ -712,7 +700,7 @@ export const RELATED_CARD_REGISTRY: Record<string, RelatedCardRegistryEntry> = {
   }),
 
   customer_interview: cardEntry({
-    skeleton: size => <CustomerInterviewCardSkeleton size={size === 'sm' ? 'sm' : 'default'} />,
+    skeleton: size => <CustomerInterviewCard loading size={size === 'sm' ? 'sm' : 'default'} />,
     decode: decodeCustomerInterviewRow,
     render: (interview, ctx) => (
       <CustomerInterviewCard
@@ -733,7 +721,7 @@ export const RELATED_CARD_REGISTRY: Record<string, RelatedCardRegistryEntry> = {
    * record, and the three props the rail sets itself are read off it.
    */
   product_release: cardEntry({
-    skeleton: size => <ProductReleaseCardSkeleton size={size === 'sm' ? 'sm' : 'lg'} />,
+    skeleton: size => <ProductReleaseCard loading size={size === 'sm' ? 'sm' : 'lg'} />,
     decode: asRecord,
     render: (release, ctx) => {
       const buildReleaseProps = ctx.extras?.buildProductReleaseCardProps ?? buildProductReleaseCardProps;
@@ -764,7 +752,7 @@ export const RELATED_CARD_REGISTRY: Record<string, RelatedCardRegistryEntry> = {
   event: programEntry('event'),
 
   investor_update: cardEntry({
-    skeleton: size => <InvestorUpdateCardSkeleton size={size === 'sm' ? 'sm' : 'default'} />,
+    skeleton: size => <InvestorUpdateCard loading size={size === 'sm' ? 'sm' : 'default'} />,
     decode: decodeInvestorUpdateRow,
     render: (update, ctx) => (
       <InvestorUpdateCard
@@ -782,7 +770,7 @@ export const RELATED_CARD_REGISTRY: Record<string, RelatedCardRegistryEntry> = {
    *  step-numbered 'default' variant is for the guide detail page's "More in
    *  section" rail, not this full-width row. */
   onboarding_guide: cardEntry({
-    skeleton: size => <OnboardingGuideCardSkeleton size={size === 'sm' ? 'sm' : 'catalog'} published={false} />,
+    skeleton: size => <OnboardingGuideCard loading size={size === 'sm' ? 'sm' : 'catalog'} published={false} />,
     decode: decodeOnboardingGuideRow,
     render: (guide, ctx) => (
       <OnboardingGuideCard
@@ -802,7 +790,7 @@ export const RELATED_CARD_REGISTRY: Record<string, RelatedCardRegistryEntry> = {
    *  href: an object with `href: undefined` is still truthy and would wrap the
    *  card in a dead <a>. */
   what_i_shipped: cardEntry({
-    skeleton: () => <WhatIShippedCardSkeleton />,
+    skeleton: () => <WhatIShippedCard loading />,
     decode: decodeEmployeeEntryRow,
     render: (entry, ctx) => (
       <WhatIShippedCard
@@ -815,7 +803,7 @@ export const RELATED_CARD_REGISTRY: Record<string, RelatedCardRegistryEntry> = {
 
   /** Same shared employee-entry shape + anchor contract as What I Shipped. */
   how_i_work: cardEntry({
-    skeleton: () => <HowIWorkCardSkeleton />,
+    skeleton: () => <HowIWorkCard loading />,
     decode: decodeEmployeeEntryRow,
     render: (entry, ctx) => (
       <HowIWorkCard
@@ -828,7 +816,7 @@ export const RELATED_CARD_REGISTRY: Record<string, RelatedCardRegistryEntry> = {
 
   /** Same shared employee-entry shape + anchor contract as What I Shipped. */
   ai_prompt: cardEntry({
-    skeleton: () => <AiPromptCardSkeleton />,
+    skeleton: () => <AiPromptCard loading />,
     decode: decodeEmployeeEntryRow,
     render: (entry, ctx) => (
       <AiPromptCard

package/src/components/related-content/index.ts

@@ -1,8 +1,6 @@
 // CLIENT subpath barrel — `@flamingo-stack/openframe-frontend-core/components/related-content`
 export {
   RelatedContentSection,
-  RelatedContentSectionSkeleton,
-  type RelatedContentSectionSkeletonProps,
   type RelatedContentSectionProps,
   type CardLinkProvider,
   type CardLinkProviderProps,

package/src/components/related-content/related-content-section.tsx

@@ -817,7 +817,7 @@ export function RelatedContentSection({
   );
 }
 
-export interface RelatedContentSectionSkeletonProps extends Pick<
+interface RelatedContentSectionSkeletonProps extends Pick<
   RelatedContentSectionProps,
   'title' | 'entityType' | 'minResults' | 'sameTypeMinResults' | 'columns' | 'adminCampaignCard' | 'extras'
 > {
@@ -834,7 +834,7 @@ export interface RelatedContentSectionSkeletonProps extends Pick<
  * group per type in the loaded rail's order, each with its real label heading and its cards' own skeletons in the
  * group's layout: `sameTypeMinResults` for the host's type, `minResults` for the others (a page never needs a pager).
  */
-export function RelatedContentSectionSkeleton({
+function RelatedContentSectionSkeleton({
   title = 'Related Content',
   types,
   entityType,

package/src/components/results-count.tsx

@@ -49,7 +49,7 @@ export function ResultsCount({ currentPage, pageSize, totalResults, resultType,
  * The results count while the list is read: the same row and line, the words its own ("Showing", "of", the result
  * type, the sorting message) and the two numbers as bars.
  */
-export function ResultsCountSkeleton({
+function ResultsCountSkeleton({
   resultType,
   sortingMessage,
 }: Pick<ResultsCountProps, 'resultType' | 'sortingMessage'>) {

package/src/components/shared/article-author-byline.tsx

@@ -168,7 +168,7 @@ export function ArticleAuthorByline({
  * The byline while its author is read: the card frame, the avatar circle at its size, and bars for the name (h5),
  * the job title and three bio lines, each inside the loaded text's own element so it takes that line's height.
  */
-export function ArticleAuthorBylineSkeleton({ size = 'md', className }: { size?: 'md' | 'lg'; className?: string }) {
+function ArticleAuthorBylineSkeleton({ size = 'md', className }: { size?: 'md' | 'lg'; className?: string }) {
   return (
     <div className={cn(BYLINE_FRAME_CLASS, className)} aria-hidden>
       <div className="flex-shrink-0">

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