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

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

@@ -60,7 +60,6 @@ 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 { ProductReleaseCard, ProductReleaseCardSkeleton } from '../chat/entity-cards/product-release-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';
@@ -73,6 +72,8 @@ 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';
 
@@ -585,8 +586,9 @@ export interface RelatedCardContext {
 /** One registered content type. `Row` is erased here — `cardEntry` below is
  *  what keeps each branch's row type concrete. */
 export interface RelatedCardRegistryEntry {
-  /** Sized to match the resolved card exactly (zero layout shift). */
-  skeleton: (size: CardSize) => React.ReactNode;
+  /** Sized to match the resolved card exactly (zero layout shift). `extras` are the host's (a program's config says
+   *  whether its cards show hosts). */
+  skeleton: (size: CardSize, extras?: ChatCardDispatchExtras) => React.ReactNode;
   render: (row: unknown, ctx: RelatedCardContext) => React.ReactNode;
 }
 
@@ -600,7 +602,7 @@ export interface RelatedCardRegistryEntry {
  * used to do, minus the promise it could not keep.
  */
 function cardEntry<Row>(definition: {
-  skeleton: (size: CardSize) => React.ReactNode;
+  skeleton: (size: CardSize, extras?: ChatCardDispatchExtras) => React.ReactNode;
   decode: (row: unknown) => Row;
   render: (row: Row, ctx: RelatedCardContext) => React.ReactNode;
 }): RelatedCardRegistryEntry {
@@ -614,9 +616,21 @@ 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({
-    skeleton: size => <ProgramCardSkeleton size={size === 'sm' ? 'sm' : 'default'} />,
+    // 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.
+    skeleton: (size, extras) => (
+      <ProgramCardSkeleton
+        size={size === 'sm' ? 'sm' : 'default'}
+        media={configKey === 'event' ? EVENT_CARD_SKELETON_MEDIA : 0}
+        hosts={extras?.programConfigs?.[configKey]?.cardShowsHosts ? 1 : 0}
+      />
+    ),
     decode: decodeProgramRow,
     render: (item, ctx) => {
       const config = ctx.extras?.programConfigs?.[configKey];
@@ -761,7 +775,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'} />,
+    skeleton: size => <OnboardingGuideCardSkeleton size={size === 'sm' ? 'sm' : 'catalog'} published={false} />,
     decode: decodeOnboardingGuideRow,
     render: (guide, ctx) => (
       <OnboardingGuideCard

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

@@ -1,10 +1,12 @@
 // CLIENT subpath barrel — `@flamingo-stack/openframe-frontend-core/components/related-content`
 export {
   RelatedContentSection,
+  RelatedContentSectionSkeleton,
+  type RelatedContentSectionSkeletonProps,
   GROUP_PAGE_SIZE,
   type RelatedContentSectionProps,
   type CardLinkProvider,
   type CardLinkProviderProps,
-  type CardLinkAnchorProps,
   type AdminCampaignCardSlot,
 } from './related-content-section';
+export { type CardLinkAnchorProps } from './card-registry';

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

@@ -49,7 +49,7 @@
  */
 
 import type React from 'react';
-import { useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelfFetch } from '../../hooks/use-self-fetch';
 import type { ContentRef, ContentRefWithReason } from '../../types/content-ref';
 import {
@@ -67,7 +67,9 @@ import type { ChatCardDispatchExtras } from '../chat/entity-cards/dispatch';
 import { decideNewTab } from '../chat/utils/decide-new-tab';
 import { accentSentenceMarks } from '../layout/page-heading';
 import { LoadingRegion } from '../loading/loading-region';
+import { TextLineSkeleton } from '../loading/unified-skeleton';
 import { Pagination } from '../pagination';
+import { useLoadingScope } from '../ui/loading-scope';
 // The per-type card dispatch — one registry entry per content type, each
 // carrying its OWN row type — plus the DEEP card imports that keep this
 // chunk's source graph free of @tanstack/react-query (the `../chat` barrel
@@ -82,8 +84,6 @@ import {
   type RelatedCardRegistryEntry,
 } from './card-registry';
 
-export type { CardLinkAnchorProps };
-
 /** Render-prop component injection for the navigation decision — keeps hook
  *  calls legal (hooks live INSIDE the injected component; `CardForType`
  *  itself calls zero hooks). The hub injects a `useNavLink`-backed provider;
@@ -157,18 +157,22 @@ export interface AdminCampaignCardSlot {
  *
  * `marketing_campaign` is the one type with no registry entry: BOTH its card
  * and its skeleton are host-injected (`AdminCampaignCardSlot`), so there is no
- * lib component to register.
+ * lib component to register. A type with no skeleton of its own (unregistered,
+ * or the campaign slot not injected) draws the generic card's skeleton: a group
+ * is never an empty grid while it loads.
  */
 function renderSkeletonForType(
   type: string,
   size: CardSize,
   adminCampaignCard?: AdminCampaignCardSlot,
+  extras?: ChatCardDispatchExtras,
 ): React.ReactNode {
+  // A type with no card (no host slot, no registry entry) draws nothing loaded (`CardForType`), so nothing loading.
   if (type === 'marketing_campaign') {
     return adminCampaignCard ? <adminCampaignCard.Skeleton size={size === 'sm' ? 'sm' : 'default'} /> : null;
   }
   const entry: RelatedCardRegistryEntry | undefined = RELATED_CARD_REGISTRY[type];
-  return entry ? entry.skeleton(size) : null;
+  return entry ? entry.skeleton(size, extras) : null;
 }
 
 /**
@@ -308,6 +312,61 @@ function resolveGroupConfig(type: string): ContentRefGroupConfig {
  *  assertion of that relation (entity-suggestion-sections.tsx). */
 export const GROUP_PAGE_SIZE = 12;
 
+/** A group's layout, read by the group and by the rail's skeleton, so the skeleton is the rail's size. */
+const GROUP_CLASS = 'space-y-4';
+const GROUP_LIST_CLASS = 'space-y-4';
+const GROUP_HEADING_CLASS = 'font-semibold text-ods-text-secondary text-h5';
+// A column with a gap, not space-y: the region's screen-reader status (absolutely positioned) must not take a margin.
+// The rail is a page section (a `<section>`, loaded and loading). Its groups and each group's cards are read lists
+// (`data-loading-item`): how many there are is the data's, and the skeleton draws one fold of each group.
+const RAIL_CLASS = 'flex flex-col gap-8';
+/** Cards per group a skeleton draws when the host states no count. */
+const RAIL_SKELETON_CARDS = 3;
+/**
+ * One screen of a group, the most its skeleton draws (the host's count is the upper bound): list groups stack
+ * full-width cards, two of which fill a screen; grid groups show two rows at their widest column count, and the
+ * cards past two rows at a narrower step are hidden by the same breakpoints the grid uses (`gridClassFor`).
+ */
+const RAIL_LIST_FOLD = 2;
+const RAIL_GRID_FOLD_ROWS = 2;
+/**
+ * The card an unknown-type group draws while its type is read: the rail's grid content card (a cover over a title
+ * and an excerpt), the shape the read types' grid cards share, so the group holds a grid card's height.
+ */
+const UNKNOWN_TYPE_CARD = 'blog_post_existing';
+/** The grid's column count per step, as `gridClassFor` sets it: [phone, sm, lg]. */
+const GRID_COLUMNS_BY_STEP: Record<2 | 3, readonly [number, number, number]> = { 2: [1, 2, 2], 3: [1, 2, 3] };
+
+/** A grid skeleton card's visibility: shown only at the steps where it is within the fold's rows. */
+function gridFoldClass(index: number, columns: 2 | 3): string | undefined {
+  const [phone, sm, lg] = GRID_COLUMNS_BY_STEP[columns].map(c => c * RAIL_GRID_FOLD_ROWS);
+  if (index < phone) return undefined;
+  if (index < sm) return 'hidden sm:block';
+  if (index < lg) return 'hidden lg:block';
+  return 'hidden';
+}
+
+/** A group's heading: the type's label (static copy), loaded and loading. */
+function GroupHeading({ type }: { type: string }) {
+  return <h3 className={GROUP_HEADING_CLASS}>{getContentRefLabelOrTitleCase(type)}</h3>;
+}
+
+/**
+ * The rail's group order, for the loaded rail and its skeleton alike: registered types in CONTENT_REF_GROUPS order,
+ * unregistered ones after, and the host's own type hoisted first (compared through the alias canonicalizer).
+ */
+function orderRailTypes(types: Iterable<string>, entityType?: string): string[] {
+  let ordered = orderContentRefTypes(types);
+  if (entityType) {
+    const canonicalEntityType = canonicalContentRefType(entityType);
+    const sameType = ordered.filter(t => canonicalContentRefType(t) === canonicalEntityType);
+    if (sameType.length > 0) {
+      ordered = [...sameType, ...ordered.filter(t => canonicalContentRefType(t) !== canonicalEntityType)];
+    }
+  }
+  return ordered;
+}
+
 function ContentGroup({
   type,
   refs,
@@ -318,6 +377,7 @@ function ContentGroup({
   extras,
   adminCampaignCard,
   heading,
+  onLoadingChange,
 }: {
   type: string;
   refs: ContentRef[];
@@ -331,6 +391,8 @@ function ContentGroup({
    *  nothing (fetch miss / unsupported type / missing program config) drops
    *  its heading too — no orphaned titles. */
   heading: React.ReactNode;
+  /** Tells the rail when this group starts and stops loading: the rail announces once for all its groups. */
+  onLoadingChange: (type: string, loading: boolean) => void;
 }) {
   const config = resolveGroupConfig(type);
   const isListLayout = config.layout === 'list';
@@ -353,19 +415,26 @@ function ContentGroup({
   const { items, isLoading } = useGroupItems(type, pageRefs, buildUrl);
   const groupPagination =
     totalGroupPages > 1 ? <Pagination currentPage={page} totalPages={totalGroupPages} onPageChange={setPage} /> : null;
+  useEffect(() => {
+    onLoadingChange(type, isLoading);
+    return () => onLoadingChange(type, false);
+  }, [onLoadingChange, type, isLoading]);
 
   // Skeletons until this page's rows land — SSR HTML and the client's first
   // paint render identical skeletons (useSelfFetch starts loading on both
   // sides). The pager stays in place while an unfetched page loads.
   if (isLoading) {
     const skeletons = pageRefs.map(r => (
-      <div key={r.id}>{renderSkeletonForType(type, cardSize, adminCampaignCard)}</div>
+      <div key={r.id} data-loading-item>
+        {renderSkeletonForType(type, cardSize, adminCampaignCard, extras)}
+      </div>
     ));
     return (
-      <LoadingRegion label="Loading related content" className="space-y-4">
+      // The rail announces for every group (`announce={false}`): one rail, one "loading".
+      <LoadingRegion announce={false} className={GROUP_CLASS} data-loading-item>
         {heading}
         {isListLayout ? (
-          <div className="space-y-4">{skeletons}</div>
+          <div className={GROUP_LIST_CLASS}>{skeletons}</div>
         ) : (
           <div className={gridClassFor(columns)}>{skeletons}</div>
         )}
@@ -405,7 +474,7 @@ function ContentGroup({
       const href = resolved.href ?? '';
       const targetPlatform = resolved.targetPlatform ?? contentRef.targetPlatform ?? null;
       return (
-        <div key={itemId}>
+        <div key={itemId} data-loading-item>
           <LinkProvider href={href || null} targetPlatform={targetPlatform}>
             {linkProps => (
               <CardForType
@@ -433,7 +502,7 @@ function ContentGroup({
     // (no pager) still vanishes with its heading.
     if (groupPagination) {
       return (
-        <div className="space-y-4">
+        <div className={GROUP_CLASS} data-loading-item>
           {heading}
           {groupPagination}
         </div>
@@ -443,9 +512,13 @@ function ContentGroup({
   }
 
   return (
-    <div className="space-y-4">
+    <div className={GROUP_CLASS} data-loading-item>
       {heading}
-      {isListLayout ? <div className="space-y-4">{cards}</div> : <div className={gridClassFor(columns)}>{cards}</div>}
+      {isListLayout ? (
+        <div className={GROUP_LIST_CLASS}>{cards}</div>
+      ) : (
+        <div className={gridClassFor(columns)}>{cards}</div>
+      )}
       {groupPagination}
     </div>
   );
@@ -547,6 +620,9 @@ export interface RelatedContentSectionProps {
   emptyState?: React.ReactNode;
 }
 
+/** The rail's title, loaded and loading. */
+const RAIL_TITLE_CLASS = 'text-ods-text-primary text-h2';
+
 export function RelatedContentSection({
   contentRefs,
   entityType,
@@ -623,6 +699,18 @@ export function RelatedContentSection({
     [initialItems, suggestionsDisabled],
   );
   const { data, isLoading } = useSelfFetch<RelatedContentResponse>(suggestUrl, { initialData });
+  const inScope = useLoadingScope();
+  // The groups still reading their cards: while any is, the rail is the ONE region that says "loading".
+  const [loadingTypes, setLoadingTypes] = useState<ReadonlySet<string>>(() => new Set());
+  const onGroupLoadingChange = useCallback((type: string, loading: boolean) => {
+    setLoadingTypes(prev => {
+      if (prev.has(type) === loading) return prev;
+      const next = new Set(prev);
+      if (loading) next.add(type);
+      else next.delete(type);
+      return next;
+    });
+  }, []);
 
   // Default group fetcher: the lib's byte-parity-tested builder, prefixed for
   // embeds. Memoized so group-fetch URLs stay value-stable across renders.
@@ -643,26 +731,31 @@ export function RelatedContentSection({
   // no empty shell. Opt-in (`showWhenEmpty`): render the title + an empty-state
   // line so the section is always present (e.g. people-hub "What I Shipped").
   if (!visibleRefs.length) {
-    if (!showWhenEmpty) return null; // non-showWhenEmpty consumers stay blank (unchanged)
+    // Loading first (a page's loading state, or the rail's own unanswered fetch): the rail holds its place. Only a
+    // settled empty answer is the empty state (nothing, unless `showWhenEmpty`).
     // Client-fetch loading (author/suggestion mode, no SSR initialItems): render a
     // SKELETON grid — reserves height + matches the rest of the app's loading, so
     // there's no blank-then-pop jump (the prior `return null` collapsed the tab to
     // zero height during the fetch). SSR controlled mode has isLoading=false → it
     // skips straight to the empty state below. Skeleton type = the requested rail
     // type (author mode passes a single `includeTypes`).
-    if (isLoading) {
-      const skeletonType = includeTypes?.[0] ?? entityType ?? 'blog_post_existing';
+    if (isLoading || inScope) {
       return (
-        <LoadingRegion label="Loading related content" className="space-y-8">
-          <h2 className="text-ods-text-primary text-h2">{accentSentenceMarks(title)}</h2>
-          <div className={gridClassFor(columns)}>
-            {Array.from({ length: 3 }).map((_, i) => (
-              <div key={i}>{renderSkeletonForType(skeletonType, 'default', adminCampaignCard)}</div>
-            ))}
-          </div>
-        </LoadingRegion>
+        <RelatedContentSectionSkeleton
+          title={title}
+          // The groups a rail may hold, when the host states them; otherwise (an author's rail) which groups there are
+          // is read data: the skeleton draws one group whose type is not known.
+          types={(includeTypes ?? []).filter(t => !exclude.has(t))}
+          entityType={entityType}
+          minResults={minResults}
+          sameTypeMinResults={sameTypeMinResults}
+          columns={columns}
+          adminCampaignCard={adminCampaignCard}
+          extras={extras}
+        />
       );
     }
+    if (!showWhenEmpty) return null; // non-showWhenEmpty consumers stay blank (unchanged)
     return (
       <div className="space-y-8">
         <h2 className="text-2xl font-bold text-ods-text-primary">{accentSentenceMarks(title)}</h2>
@@ -677,28 +770,30 @@ export function RelatedContentSection({
     grouped[ref.type].push(ref);
   }
 
-  // Registered types in CONTENT_REF_GROUPS order, then any unregistered
-  // types appended (same shape the investor-email builder uses — both
-  // consume `orderContentRefTypes` so cross-surface ordering matches).
-  // SAME-TYPE FIRST: when a host entityType is known (suggestion / SSR
-  // modes), its own content-type group is hoisted to the top — a blog
-  // post's rail leads with blog posts. Rail group keys are compared via
-  // the shared alias canonicalizer (blog_post_existing ↔ blog_post).
-  let orderedTypes = orderContentRefTypes(Object.keys(grouped));
-  if (entityType) {
-    // Canonicalize BOTH sides — hosts pass registry vocab ('blog_post') but
-    // rail-vocab aliases ('blog_post_existing') are also legal inputs; a raw
-    // comparison would silently lose the same-type-first hoist for aliases.
-    const canonicalEntityType = canonicalContentRefType(entityType);
-    const sameType = orderedTypes.filter(t => canonicalContentRefType(t) === canonicalEntityType);
-    if (sameType.length > 0) {
-      orderedTypes = [...sameType, ...orderedTypes.filter(t => canonicalContentRefType(t) !== canonicalEntityType)];
-    }
+  // Registered types in CONTENT_REF_GROUPS order, then any unregistered types appended (same shape the
+  // investor-email builder uses: both consume `orderContentRefTypes`). SAME-TYPE FIRST: the host's own type group
+  // is hoisted to the top (a blog post's rail leads with blog posts). See `orderRailTypes`.
+  const orderedTypes = orderRailTypes(Object.keys(grouped), entityType);
+
+  // In a page's loading state the groups are read: the rail draws its skeleton of the groups it was handed.
+  if (inScope) {
+    return (
+      <RelatedContentSectionSkeleton
+        title={title}
+        types={orderedTypes}
+        entityType={entityType}
+        minResults={minResults}
+        sameTypeMinResults={sameTypeMinResults}
+        columns={columns}
+        adminCampaignCard={adminCampaignCard}
+        extras={extras}
+      />
+    );
   }
 
   return (
-    <div className="space-y-8">
-      <h2 className="text-ods-text-primary text-h2">{accentSentenceMarks(title)}</h2>
+    <LoadingRegion as="section" label="Loading related content" announce={loadingTypes.size > 0} className={RAIL_CLASS}>
+      <h2 className={RAIL_TITLE_CLASS}>{accentSentenceMarks(title)}</h2>
       {orderedTypes.map(type => (
         <ContentGroup
           key={type}
@@ -710,11 +805,92 @@ export function RelatedContentSection({
           LinkProvider={LinkProvider}
           extras={extras}
           adminCampaignCard={adminCampaignCard}
-          heading={
-            <h3 className="font-semibold text-ods-text-secondary text-h5">{getContentRefLabelOrTitleCase(type)}</h3>
-          }
+          heading={<GroupHeading type={type} />}
+          onLoadingChange={onGroupLoadingChange}
         />
       ))}
-    </div>
+    </LoadingRegion>
+  );
+}
+
+export interface RelatedContentSectionSkeletonProps extends Pick<
+  RelatedContentSectionProps,
+  'title' | 'entityType' | 'minResults' | 'sameTypeMinResults' | 'columns' | 'adminCampaignCard' | 'extras'
+> {
+  /**
+   * The rail's content types (its `includeTypes`, or the types of the refs it holds). Ordered like the loaded rail.
+   * Empty: the types are read data (an author's rail): one group of an unknown type, its heading a bar and its cards
+   * the rail's grid content card's skeleton.
+   */
+  types: string[];
+}
+
+/**
+ * The rail while its groups are read: the title (a bar when it is read with the record and passed empty), then one
+ * 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({
+  title = 'Related Content',
+  types,
+  entityType,
+  minResults,
+  sameTypeMinResults,
+  columns = 2,
+  adminCampaignCard,
+  extras,
+}: RelatedContentSectionSkeletonProps) {
+  const canonicalEntityType = entityType ? canonicalContentRefType(entityType) : null;
+  const unknownGroup =
+    types.length === 0 ? (
+      <div className={GROUP_CLASS} aria-hidden data-loading-item>
+        <h3 className={GROUP_HEADING_CLASS}>
+          <TextLineSkeleton type="inherit" as="span" className="w-24" />
+        </h3>
+        <div className={gridClassFor(columns)}>
+          {Array.from({ length: Math.max(...GRID_COLUMNS_BY_STEP[columns]) * RAIL_GRID_FOLD_ROWS }, (_, i) => (
+            // biome-ignore lint/suspicious/noArrayIndexKey: skeleton cards never reorder
+            <div key={i} className={gridFoldClass(i, columns)} data-loading-item>
+              {renderSkeletonForType(UNKNOWN_TYPE_CARD, 'default', adminCampaignCard, extras)}
+            </div>
+          ))}
+        </div>
+      </div>
+    ) : null;
+  return (
+    <LoadingRegion as="section" label="Loading related content" className={RAIL_CLASS}>
+      <h2 className={RAIL_TITLE_CLASS}>
+        {/* A title read with the record (passed empty while it is read) is a bar of its line. */}
+        {title ? accentSentenceMarks(title) : <TextLineSkeleton type="inherit" as="span" className="w-1/2" />}
+      </h2>
+      {unknownGroup}
+      {orderRailTypes(new Set(types), entityType).map(type => {
+        const config = resolveGroupConfig(type);
+        const sameType = canonicalEntityType !== null && canonicalContentRefType(type) === canonicalEntityType;
+        const isList = config.layout === 'list';
+        const fold = isList ? RAIL_LIST_FOLD : Math.max(...GRID_COLUMNS_BY_STEP[columns]) * RAIL_GRID_FOLD_ROWS;
+        const count = Math.min(
+          GROUP_PAGE_SIZE,
+          fold,
+          (sameType ? (sameTypeMinResults ?? minResults) : minResults) ?? RAIL_SKELETON_CARDS,
+        );
+        const cards = Array.from({ length: count }, (_, i) => (
+          // biome-ignore lint/suspicious/noArrayIndexKey: skeleton cards never reorder
+          <div key={i} className={isList ? undefined : gridFoldClass(i, columns)} data-loading-item>
+            {renderSkeletonForType(type, config.gridSize, adminCampaignCard, extras)}
+          </div>
+        ));
+        return (
+          <div key={type} className={GROUP_CLASS} aria-hidden data-loading-item>
+            <GroupHeading type={type} />
+            {isList ? (
+              <div className={GROUP_LIST_CLASS}>{cards}</div>
+            ) : (
+              <div className={gridClassFor(columns)}>{cards}</div>
+            )}
+          </div>
+        );
+      })}
+    </LoadingRegion>
   );
 }

package/src/components/results-count.tsx

@@ -1,5 +1,8 @@
 'use client';
 
+import { TextLineSkeleton } from './loading/unified-skeleton';
+import { useLoadingScope } from './ui/loading-scope';
+
 export interface ResultsCountProps {
   currentPage: number;
   pageSize: number;
@@ -8,27 +11,55 @@ export interface ResultsCountProps {
   sortingMessage?: string;
 }
 
+/** The row's box and its line, read by the count and by its skeleton, so the skeleton is the row's size. */
+const RESULTS_COUNT_ROW_CLASS = 'mb-6';
+const RESULTS_COUNT_TEXT_CLASS = 'text-ods-text-secondary text-h6';
+const RESULTS_COUNT_SORTING_CLASS = 'ml-2 text-ods-accent';
+
+const resultLabel = (resultType: ResultsCountProps['resultType'], one: boolean) =>
+  resultType === 'vendors' ? (one ? 'vendor' : 'vendors') : one ? 'post' : 'posts';
+
 export function ResultsCount({ currentPage, pageSize, totalResults, resultType, sortingMessage }: ResultsCountProps) {
+  // While the list is read the count is not known: the row is drawn with its numbers as bars, never left out.
+  if (useLoadingScope()) return <ResultsCountSkeleton resultType={resultType} sortingMessage={sortingMessage} />;
+
   if (totalResults === 0) {
     return null;
   }
 
   const startIndex = (currentPage - 1) * pageSize + 1;
   const endIndex = Math.min(currentPage * pageSize, totalResults);
-  const plural = resultType === 'vendors' ? 'vendors' : 'posts';
-  const singular = resultType === 'vendors' ? 'vendor' : 'post';
-  const displayType = totalResults === 1 ? singular : plural;
+  const displayType = resultLabel(resultType, totalResults === 1);
 
   return (
-    <div className="mb-6">
-      <p className="text-ods-text-secondary text-h6">
+    <div className={RESULTS_COUNT_ROW_CLASS}>
+      <p className={RESULTS_COUNT_TEXT_CLASS}>
         {totalResults > 0 && (
           <>
             Showing {startIndex}-{endIndex} of {totalResults} {displayType}
-            {sortingMessage && <span className="ml-2 text-ods-accent">• {sortingMessage}</span>}
+            {sortingMessage && <span className={RESULTS_COUNT_SORTING_CLASS}>• {sortingMessage}</span>}
           </>
         )}
       </p>
     </div>
   );
 }
+
+/**
+ * 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({
+  resultType,
+  sortingMessage,
+}: Pick<ResultsCountProps, 'resultType' | 'sortingMessage'>) {
+  return (
+    <div className={RESULTS_COUNT_ROW_CLASS} aria-hidden>
+      <p className={RESULTS_COUNT_TEXT_CLASS}>
+        Showing <TextLineSkeleton type="inherit" as="span" className="inline-block align-top w-10" /> of{' '}
+        <TextLineSkeleton type="inherit" as="span" className="inline-block align-top w-6" /> {resultLabel(resultType, false)}
+        {sortingMessage && <span className={RESULTS_COUNT_SORTING_CLASS}>• {sortingMessage}</span>}
+      </p>
+    </div>
+  );
+}