@flamingo-stack/openframe-frontend-core 0.0.770 → 0.0.772

package/src/components/faq/faq-section.tsx

@@ -90,7 +90,7 @@ export interface FaqSectionProps {
   ask?: false | FaqAskOptions;
   /**
    * The loading state's groups of questions, in order: THE one way to say what the skeleton draws (see
-   * `FaqSkeletonShape`). Absent: one group with no category heading, of `minResults` rows (else one screen of rows).
+   * `FaqSkeletonShape`). Absent: one group with no category heading, of `minResults` rows (else a typical count).
    */
   skeletonShape?: FaqSkeletonShape;
   /**
@@ -133,14 +133,17 @@ const CATEGORY_SECTION_CLASS = 'scroll-mt-24';
  * the host declared its FAQs categorised (`skeletonNav`): then every group it draws is named, loading and loaded.
  */
 const CATEGORY_HEADING_CLASS = cn(SECTION_HEADING_CLASS, 'pb-4');
-/** Questions the block's skeleton draws when the host states no count (`minResults`): one screen of the accordion's rows. */
+/**
+ * Questions the block's skeleton draws when the host states no count (`minResults`): the accordion's typical count. A
+ * host that fetches with `minResults` gets exactly that many rows.
+ */
 export const FAQ_SECTION_SKELETON_QUESTIONS = FAQ_ACCORDION_SKELETON_ROWS;
 
 /** One group of questions the FAQ's loading state draws. */
 export interface FaqSkeletonGroup {
   /** The group is a named category: drawn with its heading bar (and counted for the category nav). Default false. */
   heading?: boolean;
-  /** Question rows the group draws. Default `FAQ_SECTION_SKELETON_QUESTIONS`, one screen of rows. */
+  /** Question rows the group draws: the group's count. Default `FAQ_SECTION_SKELETON_QUESTIONS`, a typical count. */
   rows?: number;
 }
 
@@ -657,7 +660,7 @@ export interface FaqSectionSkeletonProps extends Pick<
   FaqSectionProps,
   'heading' | 'topic' | 'showTopic' | 'aside' | 'className' | 'id'
 > {
-  /** The groups drawn, in order. Default one group with no heading, of one screen of rows. */
+  /** The groups drawn, in order. Default one group with no heading, of `FAQ_SECTION_SKELETON_QUESTIONS` rows. */
   shape?: FaqSkeletonShape;
   /** Draw the category nav's row (one line of pills) whatever `sections` is: the host's FAQs are categorised. */
   navRow?: boolean;

package/src/components/faq-accordion.tsx

@@ -25,10 +25,8 @@ const ROW_HEADER_CLASS = 'flex w-full items-center gap-6 px-6 py-4 text-left con
 const QUESTION_CLASS = 'min-w-0 flex-1 break-words';
 const CHEVRON_CLASS = 'shrink-0 text-ods-text-primary';
 /**
- * Rows the accordion's skeleton draws when not told how many: one screen of closed rows, from the row's layout. A
- * closed row is `py-4` around one `text-h3` line from `content-md` (57px with its divider: 13 under a 900px desktop
- * viewport once the block's heading sits above them) and about one and a half lines on a phone (about 62px: 12 under
- * an 844px one). 12 fills the first screen at both widths without drawing a second.
+ * Rows the accordion's skeleton draws when not told how many: a typical count for a list of questions whose host
+ * states no count (a host that fetches with a count passes it, and the skeleton draws exactly that, at every width).
  */
 export const FAQ_ACCORDION_SKELETON_ROWS = 12;
 /**

package/src/components/features/capability-explorer.tsx

@@ -85,7 +85,12 @@ export interface CapabilityExplorerProps {
   responderMark?: ReactNode;
   /** The jobs are being read (the host's query runs): the explorer draws its own skeleton. A page's loading scope does too. */
   loading?: boolean;
-  /** The jobs the skeleton's list draws: one screen of the host's list. */
+  /**
+   * The jobs the skeleton's list draws: the number of jobs the host reads (its limit). Default
+   * `CAPABILITY_EXPLORER_SKELETON_JOBS`, a typical count for a host that states none.
+   */
+  skeletonCount?: number;
+  /** @deprecated Use `skeletonCount`. */
   fold?: number;
   className?: string;
 }
@@ -241,6 +246,9 @@ function JobHeadSkeleton() {
   );
 }
 
+/** The jobs the explorer's skeleton lists when its host states no count: a typical count. */
+const CAPABILITY_EXPLORER_SKELETON_JOBS = 8;
+
 /**
  * The explorer while its data loads, drawn as both layouts in their own boxes
  * (the width decides which shows, by CSS, since it is not known yet): the list
@@ -251,11 +259,12 @@ function JobHeadSkeleton() {
 export function CapabilityExplorerSkeleton({
   region = true,
   className,
-  count = 8,
+  count = CAPABILITY_EXPLORER_SKELETON_JOBS,
 }: {
   /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
   region?: boolean;
   className?: string;
+  /** The jobs the list draws: the jobs the host reads. Default a typical count. */
   count?: number;
 }) {
   return (
@@ -355,6 +364,7 @@ export function CapabilityExplorer({
   requesterMark,
   responderMark,
   loading = false,
+  skeletonCount,
   fold,
   className,
 }: CapabilityExplorerProps) {
@@ -364,10 +374,12 @@ export function CapabilityExplorer({
 
   // While the page is read its jobs are not known (none in a loading state): the explorer is its skeleton, never
   // left out. The page's loading region announces it, so this one does not; a host's own read does.
-  if (inScope || loading) return <CapabilityExplorerSkeleton region={!inScope} count={fold} className={className} />;
+  if (inScope || loading) {
+    return <CapabilityExplorerSkeleton region={!inScope} count={skeletonCount ?? fold} className={className} />;
+  }
   if (items.length === 0) return null;
   // Unknown until measured: one box, so neither layout's ids are in the page twice.
-  if (wide === undefined) return <CapabilityExplorerSkeleton className={className} />;
+  if (wide === undefined) return <CapabilityExplorerSkeleton count={items.length} className={className} />;
 
   if (!wide) {
     return (

package/src/components/features/cards-strip.tsx

@@ -120,8 +120,8 @@ interface CardsStripEngineProps {
   className?: string;
   /**
    * The strip in a page's loading state, when its items are read (none handed in yet): `count` copies of `card`, the
-   * strip's cards' own skeleton (in children mode each in the managed cell's width). `count` is the strip's fold:
-   * the cards one screen of the strip shows. Absent: an empty strip draws nothing, in a scope too.
+   * strip's cards' own skeleton (in children mode each in the managed cell's width). `count` is the number of cards
+   * the host reads (its limit), drawn at every width. Absent: an empty strip draws nothing, in a scope too.
    */
   skeleton?: { card: React.ReactNode; count: number };
 }
@@ -807,7 +807,7 @@ export function CardsStrip<T = unknown>(props: CardsStripProps<T>): React.ReactE
     // Outside a loading state an empty strip is nothing; inside one, a strip whose host states a skeleton draws it
     // (a host that states none expects no strip, e.g. a record with no bites).
     if (!inScope || !skeleton) return null;
-    // The items are read: the heading (the page's own words), the slot, and a fold of the cards' own skeleton.
+    // The items are read: the heading (the page's own words), the slot, and `count` of the cards' own skeleton.
     return (
       <div className={cn(STRIP_ROOT_CLASS, className)}>
         {heading}

package/src/components/features/model-token-rates.tsx

@@ -184,7 +184,7 @@ export interface ModelTokenRatesProps {
   className?: string;
 }
 
-/** How many rows the table's skeleton draws: about what the panel's height shows. */
+/** Rows the table's skeleton draws: a typical count (a provider's tab lists every rate it has, with no page or limit). */
 const TABLE_SKELETON_ROWS = 8;
 
 /**
@@ -414,8 +414,8 @@ export interface ModelTokenExchangeProps {
 export const MODEL_TOKEN_EXCHANGE_BALANCE = 1_000_000;
 export const MODEL_TOKEN_EXCHANGE_RANGE = { min: 1_000_000, max: 50_000_000, step: 1_000_000 } as const;
 
-/** The provider rows drawn while the providers load: the step's fold (three rows beside the calculator's step). */
-const PROVIDER_ROWS_FOLD = 3;
+/** The provider rows drawn while the providers load: a typical count (the host lists every provider with a rate). */
+const PROVIDER_SKELETON_ROWS = 3;
 
 /** A model as a picker option: its name, its provider under it, the provider's mark beside it. */
 function modelOption(rate: ModelTokenRate): AutocompleteOption<string> {
@@ -575,7 +575,7 @@ export function ModelTokenExchange({
         {/* While the providers load the selector draws its own skeleton (its rows, the option row's own boxes). */}
         <PushButtonSelector<string>
           isLoading={providers.length === 0 && !failed}
-          skeletonCount={PROVIDER_ROWS_FOLD}
+          skeletonCount={PROVIDER_SKELETON_ROWS}
           optionDescriptions={false}
           options={providers.map(providerType => {
             // What the server stated for the provider rides its models' rows.

package/src/components/features/remote-session/remote-desktop-chat-panel.tsx

@@ -8,10 +8,10 @@ import { RemoteDesktopChatMessageRow, RemoteDesktopChatMessageRowSkeleton } from
 import type { RemoteSessionChatMessage } from './types';
 
 /**
- * Message rows the panel's loading state draws: the panel spans the view's height (about 750px on a 900px screen,
- * less the input), and a one-line message is about 60px with its gap.
+ * Message rows the panel's loading state draws: a typical count. The panel draws the whole history its host hands it
+ * (no page, no limit), so there is no page size to draw.
  */
-const CHAT_PANEL_FOLD = 10;
+const CHAT_PANEL_SKELETON_ROWS = 10;
 
 /** Who is typing on the technician's side of the chat: shown on the technician's rows. */
 export interface RemoteDesktopChatTechnician {
@@ -78,7 +78,7 @@ export function RemoteDesktopChatPanel({
             // The chat while it is read: a screen of the panel's own message rows, stacked by a one-column grid
             // (the thread above is already the column flexbox: WEBVIEW-001).
             <LoadingRegion label="Loading the chat" className="grid grid-cols-1 gap-[var(--spacing-system-xsf)]">
-              {Array.from({ length: CHAT_PANEL_FOLD }, (_, i) => (
+              {Array.from({ length: CHAT_PANEL_SKELETON_ROWS }, (_, i) => (
                 // biome-ignore lint/suspicious/noArrayIndexKey: skeleton rows never reorder
                 <RemoteDesktopChatMessageRowSkeleton key={i} />
               ))}

package/src/components/help-center-pages/trust-center-page.tsx

@@ -112,7 +112,7 @@ export interface TrustCenterPageProps {
   faqSkeletonShape?: FaqSkeletonShape;
   /**
    * Rows each panel's loading state draws, for a host whose lists are curated (it knows their lengths: the frameworks
-   * it is audited against). Absent: the layout's fold, the rows one screen holds.
+   * it is audited against). Absent: a typical count, at every width.
    */
   panelSkeletonRows?: Partial<Record<TrustCenterPanelId, TrustPanelRows>>;
 }

package/src/components/help-center-pages/trust-center-sections.tsx

@@ -143,7 +143,7 @@ export function AiSection({
   skeletonRows,
 }: {
   practices: TrustCenterAiPractice[];
-  /** Rows the loading state draws (`TrustPanelRows`). Absent: the layout's fold. */
+  /** Rows the loading state draws (`TrustPanelRows`). Absent: a typical count. */
   skeletonRows?: TrustPanelRows;
 }) {
   if (useLoadingScope()) return <TrustPanelSkeleton panel="ai" rows={skeletonRows} />;
@@ -415,7 +415,7 @@ export function DocumentsSection({
   skeletonRows,
 }: {
   documents: TrustCenterDocument[];
-  /** Rows the loading state draws (`TrustPanelRows`). Absent: the layout's fold. */
+  /** Rows the loading state draws (`TrustPanelRows`). Absent: a typical count. */
   skeletonRows?: TrustPanelRows;
   /** Where a public document opens (`trustCenterDocumentUrl`); `null` → offer a request instead. */
   documentUrl: (document: TrustCenterDocument) => string | null;
@@ -554,7 +554,7 @@ export function SubprocessorsSection({
   skeletonRows,
 }: {
   subprocessors: TrustCenterSubprocessor[];
-  /** Rows the loading state draws (`TrustPanelRows`). Absent: the layout's fold. */
+  /** Rows the loading state draws (`TrustPanelRows`). Absent: a typical count. */
   skeletonRows?: TrustPanelRows;
 }) {
   if (useLoadingScope()) return <TrustPanelSkeleton panel="subprocessors" rows={skeletonRows} />;
@@ -634,17 +634,19 @@ export function ContactSection({ onContact }: { onContact: () => void }) {
 // ---------------------------------------------------------------------------
 
 /**
- * Rows a panel's skeleton draws, on a phone (below `content-md`) and from `content-md`: the rows of a panel one screen
- * holds below its section's heading (a row of a typical description is about 100px on a phone and 80px wide). The
- * panels list what the host's data lists, so the skeleton draws the layout's fold, never one record set's length; a
- * host whose list is curated passes its length (each section's `skeletonRows`, the page's `panelSkeletonRows`).
+ * Rows a panel's skeleton draws when its host states no count. A panel lists every record the host's data holds (no
+ * page, no limit), so this is a typical count, drawn at every width; a host whose list is curated passes its length
+ * (each section's `skeletonRows`, the page's `panelSkeletonRows`).
  */
-const TRUST_PANEL_FOLD = { phone: 4, wide: 5 } as const;
+const TRUST_PANEL_SKELETON_ROWS = 5;
 
 /** The panels whose rows `TrustPanelSkeleton` draws (Controls, Contact and the FAQ draw their own). */
 export type TrustCenterPanelId = 'compliance' | 'documents' | 'subprocessors' | 'ai';
 
-/** Rows a panel's skeleton draws: one count, or one per breakpoint. */
+/**
+ * Rows a panel's skeleton draws: one count, at every width. The `{ phone, wide }` form is kept for hosts that pass
+ * it and draws the larger of the two everywhere (a skeleton never hides rows per breakpoint).
+ */
 export type TrustPanelRows = number | { phone: number; wide: number };
 
 /**
@@ -663,9 +665,9 @@ const TRUST_PANEL_SHAPES: Record<
   ai: { mark: 'glyph', action: 'none', lines: { phone: 6, wide: 2 } },
 };
 
-function panelFold(rows: TrustPanelRows | undefined): { phone: number; wide: number } {
-  if (rows === undefined) return TRUST_PANEL_FOLD;
-  return typeof rows === 'number' ? { phone: rows, wide: rows } : rows;
+function panelRowCount(rows: TrustPanelRows | undefined): number {
+  if (rows === undefined) return TRUST_PANEL_SKELETON_ROWS;
+  return typeof rows === 'number' ? rows : Math.max(rows.phone, rows.wide);
 }
 
 /**
@@ -675,17 +677,8 @@ function panelFold(rows: TrustPanelRows | undefined): { phone: number; wide: num
  */
 function TrustPanelSkeleton({ panel, rows }: { panel: TrustCenterPanelId; rows?: TrustPanelRows }) {
   const shape = TRUST_PANEL_SHAPES[panel];
-  const fold = panelFold(rows);
-  const panelRows: PanelRow[] = Array.from({ length: Math.max(fold.phone, fold.wide) }, (_, index) => ({
+  const panelRows: PanelRow[] = Array.from({ length: panelRowCount(rows) }, (_, index) => ({
     id: `skeleton-${index}`,
-    // A row past a breakpoint's fold is not drawn there; the last row drawn on a phone drops its divider like the
-    // panel's last row (`last:` cannot see a hidden sibling).
-    className: cn(
-      index >= fold.phone && 'hidden content-md:flex',
-      index >= fold.wide && 'content-md:hidden',
-      fold.phone < fold.wide && index === fold.phone - 1 && 'content-max-md:border-b-0',
-      fold.wide < fold.phone && index === fold.wide - 1 && 'content-md:border-b-0',
-    ),
     columns: [
       {
         // The loaded rows' own cell (leading mark, `text-h4` value over a wrapping `text-h6` label): the panel lays

package/src/components/logs-list.tsx

@@ -18,10 +18,10 @@ const LOG_META_ROW_CLASS = 'flex items-center gap-2';
 const LOG_SCROLL_CLASS = 'flex-1 overflow-y-auto px-4 py-3';
 const LOG_FRAME_CLASS = 'relative flex flex-col overflow-hidden rounded-lg border border-ods-border bg-ods-card';
 /**
- * Rows the list's skeleton draws: one screen of the list's default 400px box (a row is a `text-h6` title over a
- * `text-h5` time, about 60px with its padding).
+ * Rows the list's skeleton draws when its host states no `skeletonRows`: a typical count. A host that reads its logs
+ * with a page size or a limit passes it, and the skeleton draws exactly that many rows.
  */
-const LOGS_LIST_FOLD = 6;
+const LOGS_LIST_SKELETON_ROWS = 6;
 
 /** A log row while it is read: the severity dot's box, the title and the time as bars. */
 function LogCardSkeleton() {
@@ -91,6 +91,7 @@ export const LogsList = forwardRef<HTMLDivElement, LogsListProps>(
       showConnector = true,
       onLogClick,
       loading = false,
+      skeletonRows = LOGS_LIST_SKELETON_ROWS,
       emptyMessage = 'No logs to display',
       className,
     },
@@ -111,11 +112,11 @@ export const LogsList = forwardRef<HTMLDivElement, LogsListProps>(
     };
 
     if (loading) {
-      // The list's own frame and scroller with a screen of row skeletons.
+      // The list's own frame and scroller with a full page of row skeletons.
       return (
         <div ref={ref} className={cn(LOG_FRAME_CLASS, getContainerClasses(), className)} style={getContainerStyles()}>
           <LoadingRegion label="Loading logs" className={LOG_SCROLL_CLASS}>
-            {Array.from({ length: LOGS_LIST_FOLD }, (_, i) => (
+            {Array.from({ length: skeletonRows }, (_, i) => (
               // biome-ignore lint/suspicious/noArrayIndexKey: skeleton rows never reorder
               <LogCardSkeleton key={i} />
             ))}

package/src/components/navigation/multi-level-navigation.tsx

@@ -60,13 +60,12 @@ const NAV_ROW_HEIGHT = {
   mobile: { row: 'h-11', toggle: 'h-11 w-11', toggleRoom: 'pr-11' },
 } as const;
 /**
- * How many rows each skeleton draws (the desktop tree, the mobile dropdown): a layout fold, the rows one screen holds.
- * A row is 48px (44px in the dropdown) with its border and the list's gap, about 54px (50px): a first screen of 900px
- * (844px on a phone) holds 17. The tree opens on the reader's repository, so the skeleton draws that shape: one root
- * entry open, the rest of the fold its entries (indented as the tree indents them). It is drawn open FIRST: the root
- * order is the source's path sort, and which repositories sort before the reader's needs the read, so a page in a
- * later repository differs by one collapsed root row above the open one. A repository holding fewer entries ends
- * past the first screen anyway, and the tree's other root entries are list growth below it.
+ * How many rows each skeleton draws (the desktop tree, the mobile dropdown) when its host states no count. The tree
+ * lists every entry its source holds (no page, no limit), so this is a typical count, drawn at every width. The tree
+ * opens on the reader's repository, so the skeleton draws that shape: one root entry open, the rest its entries
+ * (indented as the tree indents them). It is drawn open FIRST: the root order is the source's path sort, and which
+ * repositories sort before the reader's needs the read, so a page in a later repository differs by one collapsed
+ * root row above the open one. A host that knows its entry count passes it as `rows`.
  */
 export const MULTI_LEVEL_NAVIGATION_SKELETON_ROWS = 17;
 export const MOBILE_NAVIGATION_SKELETON_ROWS = 17;

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

@@ -14,13 +14,13 @@ export const CATALOG_SECTION_COUNT_CLASS =
 export const CATALOG_LIST_CLASS = 'flex flex-col gap-4';
 
 /**
- * Catalog cards one screen shows under the search and the section pills (a 1440x900 desktop and a 390x844 phone
- * both fit three of the `catalog` card's height before the fold). The section count is the data's: the skeleton
- * draws ONE section of this fold, and every loaded section is a `data-loading-item`.
+ * 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`.
  */
-export const ONBOARDING_CATALOG_CARD_FOLD = 3;
+export const ONBOARDING_CATALOG_SKELETON_CARDS = 3;
 /**
- * The catalog's sections while the guides are read: ONE section of `ONBOARDING_CATALOG_CARD_FOLD` cards in the view's
+ * 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.
  */
@@ -35,7 +35,7 @@ export function OnboardingCatalogSectionsSkeleton() {
           </span>
         </h2>
         <ul className={CATALOG_LIST_CLASS}>
-          {Array.from({ length: ONBOARDING_CATALOG_CARD_FOLD }, (_, i) => (
+          {Array.from({ length: ONBOARDING_CATALOG_SKELETON_CARDS }, (_, i) => (
             // biome-ignore lint/suspicious/noArrayIndexKey: skeleton cards never reorder
             <li key={i}>
               <OnboardingGuideCardSkeleton size="catalog" />

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

@@ -318,33 +318,13 @@ 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.
+// (`data-loading-item`): how many there are is the data's, and the skeleton draws ONE FULL PAGE 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 }) {
@@ -848,9 +828,9 @@ export function RelatedContentSectionSkeleton({
           <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) => (
+          {Array.from({ length: GROUP_PAGE_SIZE }, (_, i) => (
             // biome-ignore lint/suspicious/noArrayIndexKey: skeleton cards never reorder
-            <div key={i} className={gridFoldClass(i, columns)} data-loading-item>
+            <div key={i} data-loading-item>
               {renderSkeletonForType(UNKNOWN_TYPE_CARD, 'default', adminCampaignCard, extras)}
             </div>
           ))}
@@ -868,15 +848,14 @@ export function RelatedContentSectionSkeleton({
         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;
+        // One full page of the group: the count the host fetches, never more than a group's page.
         const count = Math.min(
           GROUP_PAGE_SIZE,
-          fold,
-          (sameType ? (sameTypeMinResults ?? minResults) : minResults) ?? RAIL_SKELETON_CARDS,
+          (sameType ? (sameTypeMinResults ?? minResults) : minResults) ?? GROUP_PAGE_SIZE,
         );
         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>
+          <div key={i} data-loading-item>
             {renderSkeletonForType(type, config.gridSize, adminCampaignCard, extras)}
           </div>
         ));

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

@@ -120,9 +120,8 @@ export function DevCardRowSkeleton() {
 }
 
 /**
- * The standard "5 skeleton rows inside a bordered card" loading state
- * used by every list shell. Both delivery (`delivery-table.tsx`) and
- * tickets (`tickets-list.tsx`) mount this directly.
+ * 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,
@@ -130,6 +129,7 @@ export function DevCardRowSkeletonList({
 }: {
   /** 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 (

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

@@ -159,7 +159,7 @@ const SUMMARY_CLASS = 'text-ods-text-primary text-h4';
  * release carries more tags than a phone's line holds (three badges), so the row is capped to that line and drawn the
  * same while it is read: the badges and the "+N" never move the page under them.
  */
-const RELEASE_TAG_ROW_FOLD = 3;
+const RELEASE_TAG_ROW_MAX = 3;
 /**
  * A release tag's typical label width while it is read: a release is tagged with product areas, longer than most tags
  * (sampled badges measure 64 to 155px, typically about 105px: ten characters of the badge's type), so its row wraps
@@ -400,7 +400,7 @@ export function ReleaseDetailPage({
         {/* Tags — flat product_release_tags[] from entity_tags */}
         <EntityTagBadges
           tags={view.product_release_tags as TagAssoc[] | undefined}
-          max={RELEASE_TAG_ROW_FOLD}
+          max={RELEASE_TAG_ROW_MAX}
           skeletonItemClassName={RELEASE_TAG_SKELETON_WIDTH_CLASS}
         />
 

package/src/components/shared/roadmap/roadmap-grid-skeleton.tsx

@@ -17,10 +17,16 @@ export function roadmapGridClass(columns: 1 | 2, showLeftMargin: boolean): strin
   }`;
 }
 
+/**
+ * Cards the grid's skeleton draws when its host states no count: a typical count. The roadmap lists every item it
+ * holds (no page, no limit); a host that reads a known number of items passes it as `count`.
+ */
+export const ROADMAP_GRID_SKELETON_CARDS = 4;
+
 export interface RoadmapGridSkeletonProps {
   /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
   region?: boolean;
-  /** Number of skeleton cards to show. Default 4. */
+  /** Skeleton cards: the number of items the host reads. Default `ROADMAP_GRID_SKELETON_CARDS`, a typical count. */
   count?: number;
   /** Show the desktop left margin (~120px) that aligns the grid with
    *  the page hero's title block. Default `true`. Related-content rails
@@ -32,7 +38,7 @@ export interface RoadmapGridSkeletonProps {
 
 export function RoadmapGridSkeleton({
   region = true,
-  count = 4,
+  count = ROADMAP_GRID_SKELETON_CARDS,
   showLeftMargin = true,
   columns = 2,
 }: RoadmapGridSkeletonProps) {

package/src/components/shared/roadmap/roadmap-grid.tsx

@@ -126,7 +126,12 @@ export interface RoadmapGridProps {
   quartersToKeepClosed?: number;
   /** The items are being read (the host's query runs): the grid draws its own skeleton. A page's loading scope does too. */
   isLoading?: boolean;
-  /** The cards the flat grid's skeleton draws: one screen of the host's grid (default the skeleton's own). */
+  /**
+   * The cards the grid's skeleton draws: the number of items the host reads (its limit), drawn at every width.
+   * Default `ROADMAP_GRID_SKELETON_CARDS`, a typical count for a roadmap that lists everything it holds.
+   */
+  skeletonCount?: number;
+  /** @deprecated Use `skeletonCount`. */
   fold?: number;
 }
 
@@ -184,9 +189,12 @@ const QUARTER_CONTENT_INNER_CLASS = 'pb-4';
 export function RoadmapGridQuarterSkeleton({
   showLeftMargin = true,
   columns = 2,
+  count,
 }: {
   showLeftMargin?: boolean;
   columns?: 1 | 2;
+  /** The quarter's skeleton cards. Default the grid skeleton's own. */
+  count?: number;
 }) {
   return (
     <div className={QUARTER_LIST_CLASS} aria-hidden>
@@ -198,7 +206,7 @@ export function RoadmapGridQuarterSkeleton({
         {/* The quarter's content box: the `AccordionContent` padding (`pt-4` here, the content's own `pb-4` inside). */}
         <div className={QUARTER_CONTENT_CLASS}>
           <div className={QUARTER_CONTENT_INNER_CLASS}>
-            <RoadmapGridSkeleton region={false} showLeftMargin={showLeftMargin} columns={columns} />
+            <RoadmapGridSkeleton region={false} count={count} showLeftMargin={showLeftMargin} columns={columns} />
           </div>
         </div>
       </div>
@@ -217,8 +225,10 @@ export function RoadmapGrid({
   hasActiveFilters = false,
   quartersToKeepClosed = 2,
   isLoading = false,
+  skeletonCount,
   fold,
 }: RoadmapGridProps) {
+  const skeletonCards = skeletonCount ?? fold;
   // ── Voting (shared across all quarters) ──
   const { getVote, toggleVote } = useRoadmapVoting(votingOptions);
   const inScope = useLoadingScope();
@@ -313,9 +323,9 @@ export function RoadmapGrid({
   // empty state. The page's loading region announces a scope's; a host's own read announces itself.
   if (inScope || isLoading) {
     return groupByQuarter ? (
-      <RoadmapGridQuarterSkeleton showLeftMargin={showLeftMargin} columns={columns} />
+      <RoadmapGridQuarterSkeleton showLeftMargin={showLeftMargin} columns={columns} count={skeletonCards} />
     ) : (
-      <RoadmapGridSkeleton region={!inScope} count={fold} showLeftMargin={showLeftMargin} columns={columns} />
+      <RoadmapGridSkeleton region={!inScope} count={skeletonCards} showLeftMargin={showLeftMargin} columns={columns} />
     );
   }
 

package/src/components/tickets/help-center-list.tsx

@@ -48,7 +48,7 @@ import { UnifiedPagination } from '../unified-pagination';
 import { HelpCenterCard } from './help-center-card';
 import { HelpCenterCreateForm, HelpCenterCreateFormSkeleton } from './help-center-create-form';
 import { useTicketActions } from './hooks/use-ticket-actions';
-import { useTicketsList } from './hooks/use-tickets-list';
+import { TICKETS_PAGE_SIZE, useTicketsList } from './hooks/use-tickets-list';
 import type { AnyTicket, OptimisticTicket, TicketsCacheSlot } from './types';
 import { isOptimistic } from './types';
 
@@ -105,7 +105,7 @@ export function HelpCenterList({ toast = defaultToast, backButton, title, shell
         shell={shell}
         preControls={<HelpCenterCreateFormSkeleton />}
       >
-        <DevCardRowSkeletonList />
+        <DevCardRowSkeletonList rows={TICKETS_PAGE_SIZE} />
       </DevSectionPage>
     );
   }
@@ -206,7 +206,7 @@ function HelpCenterListAuthed({
     [searchParams, router, pathname],
   );
 
-  const { tickets, isLoading, isFetching, error, refetch, totalPages } = useTicketsList({
+  const { tickets, isLoading, isFetching, error, refetch, totalPages, pageSize } = useTicketsList({
     // `sessionEmail` is drilled in from the parent — see the same
     // pattern + race-cause rationale documented in
     // `HelpCenterCreateForm.sessionName/sessionEmail`. Calling
@@ -330,7 +330,7 @@ function HelpCenterListAuthed({
       {!error && (
         <div className="w-full">
           {isLoading ? (
-            <DevCardRowSkeletonList />
+            <DevCardRowSkeletonList rows={pageSize} />
           ) : !hasResults && isFetching ? (
             // Bridge state — background refetch in flight and the
             // optimistic placeholder was just removed by the mutation

package/src/components/tickets/hooks/use-tickets-list.ts

@@ -27,7 +27,8 @@ import { PAGE_PARAM_LIMITS, pageCount, positiveInt } from '../../../utils/search
 import type { TicketData } from '../types';
 
 const FIND_TICKET_ENDPOINT = '/api/chat/agent/find-ticket';
-const DEFAULT_PAGE_SIZE = 20;
+/** The tickets a page of the list loads unless the host asks for another size; also its skeleton's row count. */
+export const TICKETS_PAGE_SIZE = 20;
 
 interface FindTicketResponse {
   tickets?: TicketData[];
@@ -101,7 +102,7 @@ export function useTicketsList(filters: UseTicketsListFilters): UseTicketsListRe
   const status = (filters.status ?? '').trim().toLowerCase();
   const statusFilter = status && status !== 'all' ? status : '';
   const page = positiveInt(filters.page, 1);
-  const pageSize = positiveInt(filters.pageSize, DEFAULT_PAGE_SIZE, { max: PAGE_PARAM_LIMITS.maxPageSize });
+  const pageSize = positiveInt(filters.pageSize, TICKETS_PAGE_SIZE, { max: PAGE_PARAM_LIMITS.maxPageSize });
 
   // `customerEmail` is the source of truth — parent (HelpCenterList)
   // already gates on `identity.user?.email` being truthy before