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

package/src/components/ui/stacked-rows-panel.tsx

@@ -4,7 +4,7 @@ import type { ReactNode } from 'react';
 import Link from '../../embed-shims/next-link';
 import { cn } from '../../utils/cn';
 import { TextLineSkeleton } from '../loading/unified-skeleton';
-import { useLoadingScope } from './loading-scope';
+import { LoadingItems, loadingItemProps, useLoadingScope } from './loading-scope';
 
 /**
  * StackedRowsPanel — a single bordered card that stacks rows inside it.
@@ -32,9 +32,11 @@ export interface PanelColumn {
   key: string;
   /** Custom cell content (tag, avatar + text, button…). Takes precedence over `value`/`label`. */
   content?: ReactNode;
-  /** Primary value rendered in the ODS h4 style when `content` is not set. */
+  /** Primary value rendered in the ODS h4 style when `content` is not set. `null` is a value still being read: in a
+   *  loading scope the cell draws it as an `h4` bar (outside one, nothing). */
   value?: ReactNode;
-  /** Secondary label rendered under the value (ODS h6, secondary colour); a node for inline emphasis. */
+  /** Secondary label rendered under the value (ODS h6, secondary colour); a node for inline emphasis. `null` is a label
+   *  still being read: in a loading scope the cell draws it as an `h6` bar (outside one, nothing). */
   label?: ReactNode;
   /** Let the value AND label WRAP instead of truncating to one line (full names, full sentences). */
   wrap?: boolean;
@@ -69,27 +71,25 @@ export interface StackedRowsPanelProps {
   /** Optional uppercase caption rendered above the card. */
   title?: string;
   className?: string;
-  /** The shape drawn while the rows are read (a page's loading state, where `rows` is empty). */
-  skeleton?: StackedRowsPanelSkeletonShape;
+  /** The shape drawn while the rows are read (a page's loading state, where `rows` is empty): how many rows (default
+   *  3), how many value/label columns each carries (default 1, a full-width title/caption row), and whether each cell
+   *  carries a label under its value (default `true`). */
+  skeleton?: { rows?: number; columns?: number; labels?: boolean };
   /**
-   * The rows are a read list (how many there are is the data's, and a loading state draws a fold of them): every
-   * row carries `data-loading-item`. Default false (a panel of fixed fields).
+   * The rows are a read list (how many there are is the data's; the loading state draws `loadingRows` of them):
+   * every row carries `data-loading-item`, in both forms. Default false (a panel of fixed fields).
    */
   listItems?: boolean;
-}
-
-/** How many rows a loading panel draws, and how many value/label columns each carries. */
-export interface StackedRowsPanelSkeletonShape {
-  /** Rows drawn. Default {@link STACKED_ROWS_SKELETON_COUNT}. */
-  rows?: number;
-  /** Columns per row; one is a full-width title/caption row. Default 1. */
-  columns?: number;
-  /** Each cell carries a label under its value. Default `true`. */
-  labels?: boolean;
+  /** The rows are still being read (a client read): the panel draws its rows' loading form, `rows` is ignored. A
+   *  loading scope does the same while `rows` is empty. */
+  loading?: boolean;
+  /** How many rows the loading form draws: the list's page size, limit or declared typical constant. Default
+   *  `skeleton.rows`, else 3. */
+  loadingRows?: number;
 }
 
 /** Rows a loading panel draws when its caller names no count. */
-export const STACKED_ROWS_SKELETON_COUNT = 3;
+const STACKED_ROWS_SKELETON_COUNT = 3;
 
 const ALIGN_CLASS: Record<PanelColumnAlign, string> = {
   left: 'justify-start items-start',
@@ -122,14 +122,23 @@ const CARD_CLASS = 'flex flex-col overflow-clip rounded-md border border-ods-bor
 const TITLED_CLASS = 'flex flex-col gap-[var(--spacing-system-xxs)]';
 const TITLE_CLASS = 'uppercase text-ods-text-secondary text-h5';
 const DEFAULT_WIDTH_CLASS = 'flex-[1_0_0] min-w-0';
+/** A cell's value and label while they are read: one bar each, the same in a loading row and in a loaded row whose
+ *  value or label is still `null`. */
+const CELL_VALUE_BAR_CLASS = 'w-1/2';
+const CELL_LABEL_BAR_CLASS = 'w-3/4';
 
 function CellValue({ column }: { column: PanelColumn }) {
+  // A `null` value or label in a loading scope is read data not here yet: the cell draws its bar in the text's own
+  // box (the value's `h4`, the label's `h6`), so the row keeps its loaded height.
+  const loading = useLoadingScope();
+  const valueBar = loading && column.value === null;
+  const labelBar = loading && column.label === null;
   const valueNode = (
     <div
       className={cn(column.wrap ? 'whitespace-normal' : 'truncate', 'text-ods-text-primary text-h4')}
       title={typeof column.value === 'string' ? column.value : undefined}
     >
-      {column.value}
+      {valueBar ? <TextLineSkeleton type="inherit" as="span" className={CELL_VALUE_BAR_CLASS} /> : column.value}
     </div>
   );
 
@@ -150,7 +159,11 @@ function CellValue({ column }: { column: PanelColumn }) {
           valueNode
         )}
       </div>
-      {column.label ? (
+      {labelBar ? (
+        <p className="text-h6">
+          <TextLineSkeleton type="inherit" as="span" className={CELL_LABEL_BAR_CLASS} />
+        </p>
+      ) : column.label ? (
         <p className={cn(column.wrap ? 'whitespace-normal' : 'truncate', 'text-ods-text-secondary text-h6')}>
           {column.label}
         </p>
@@ -187,8 +200,41 @@ function PanelCell({ column }: { column: PanelColumn }) {
   );
 }
 
-function PanelRowView({ row, listItem }: { row: PanelRow; listItem?: boolean }) {
-  const item = listItem ? { 'data-loading-item': '' } : undefined;
+/** The shape a row draws while it is read: how many value/label columns, and whether each cell has a label. */
+interface PanelRowLoadingShape {
+  columns: number;
+  labels: boolean;
+}
+
+/**
+ * One row of the card. ONE structure in both forms: loaded (`row`) its cells; loading (`loading`) the same row frame
+ * with each cell's value a `text-h4` bar over its label's `text-h6` bar. Its `data-*` markers are forwarded in both.
+ */
+function PanelRowView({
+  row,
+  loading,
+  ...props
+}: {
+  row?: PanelRow;
+  loading?: PanelRowLoadingShape;
+  [key: `data-${string}`]: unknown;
+}) {
+  const item = loadingItemProps(props);
+  if (loading) {
+    return (
+      <div className={loading.columns === 1 ? FULL_WIDTH_ROW_CLASS : ROW_CLASS} {...item}>
+        <LoadingItems count={loading.columns}>
+          {() => (
+            <div className={cn('flex flex-col justify-center', DEFAULT_WIDTH_CLASS)}>
+              <TextLineSkeleton type="h4" className={CELL_VALUE_BAR_CLASS} />
+              {loading.labels && <TextLineSkeleton type="h6" className={CELL_LABEL_BAR_CLASS} />}
+            </div>
+          )}
+        </LoadingItems>
+      </div>
+    );
+  }
+  if (!row) return null;
   // Arbitrary content (e.g. a nested table): keep it edge-to-edge unless the caller
   // overrides via `className`. No fixed height — let the content size itself.
   if (row.content !== undefined) {
@@ -215,24 +261,9 @@ function PanelRowView({ row, listItem }: { row: PanelRow; listItem?: boolean })
   );
 }
 
-export function StackedRowsPanel({ rows, title, className, skeleton, listItems = false }: StackedRowsPanelProps) {
-  // In a page's loading state with no rows yet (they are read) the panel is its skeleton; rows it is given there
-  // are the page's own copy and draw as they are.
-  const inScope = useLoadingScope();
-  if (inScope && rows.length === 0)
-    return <StackedRowsPanelSkeleton {...skeleton} title={title} className={className} listItems={listItems} />;
-  const card = (
-    <div className={CARD_CLASS}>
-      {rows.map(row => (
-        <PanelRowView key={row.id} row={row} listItem={listItems} />
-      ))}
-    </div>
-  );
-
-  if (!title) {
-    return <div className={className}>{card}</div>;
-  }
-
+/** The panel's frame, loaded and loading: the optional uppercase title (static copy) over the card. */
+function PanelFrame({ title, className, card }: { title?: string; className?: string; card: ReactNode }) {
+  if (!title) return <div className={className}>{card}</div>;
   return (
     <div className={cn(TITLED_CLASS, className)}>
       <p className={TITLE_CLASS}>{title}</p>
@@ -241,41 +272,34 @@ export function StackedRowsPanel({ rows, title, className, skeleton, listItems =
   );
 }
 
-/**
- * A StackedRowsPanel while its rows are read: the same card and row heights, each cell's value a `text-h4` bar
- * over its label's `text-h6` bar. The title above the card is the page's own and draws as it is.
- */
-export function StackedRowsPanelSkeleton({
-  rows = STACKED_ROWS_SKELETON_COUNT,
-  columns = 1,
-  labels = true,
+export function StackedRowsPanel({
+  rows,
   title,
   className,
+  skeleton,
   listItems = false,
-}: StackedRowsPanelSkeletonShape & Pick<StackedRowsPanelProps, 'title' | 'className' | 'listItems'>) {
-  const card = (
+  loading: loadingProp = false,
+  loadingRows,
+}: StackedRowsPanelProps) {
+  // ONE switch: while the host reads the rows (`loading`), or in a page's loading state with no rows yet, the panel
+  // draws its rows' loading form in the same frame; rows it is given in a scope are the page's own copy and draw as
+  // they are.
+  const inScope = useLoadingScope();
+  const loading = loadingProp || (inScope && rows.length === 0);
+  const marker = { 'data-loading-item': listItems || undefined };
+  const shape: PanelRowLoadingShape = { columns: skeleton?.columns ?? 1, labels: skeleton?.labels ?? true };
+  const card = loading ? (
     <div className={CARD_CLASS} aria-hidden>
-      {Array.from({ length: rows }, (_, row) => (
-        <div
-          key={row}
-          className={columns === 1 ? FULL_WIDTH_ROW_CLASS : ROW_CLASS}
-          {...(listItems ? { 'data-loading-item': '' } : undefined)}
-        >
-          {Array.from({ length: columns }, (_cell, column) => (
-            <div key={column} className={cn('flex flex-col justify-center', DEFAULT_WIDTH_CLASS)}>
-              <TextLineSkeleton type="h4" className="w-1/2" />
-              {labels && <TextLineSkeleton type="h6" className="w-3/4" />}
-            </div>
-          ))}
-        </div>
-      ))}
+      <LoadingItems count={loadingRows ?? skeleton?.rows ?? STACKED_ROWS_SKELETON_COUNT}>
+        {() => <PanelRowView loading={shape} {...marker} />}
+      </LoadingItems>
     </div>
-  );
-  if (!title) return <div className={className}>{card}</div>;
-  return (
-    <div className={cn(TITLED_CLASS, className)}>
-      <p className={TITLE_CLASS}>{title}</p>
-      {card}
+  ) : (
+    <div className={CARD_CLASS}>
+      {rows.map(row => (
+        <PanelRowView key={row.id} row={row} {...marker} />
+      ))}
     </div>
   );
+  return <PanelFrame title={title} className={className} card={card} />;
 }

package/src/components/ui/status-badge.tsx

@@ -93,6 +93,12 @@ export interface StatusBadgeProps
    * gen badge — do NOT build a parallel component.
    */
   gen?: number;
+  /** The badge's text is still being read: it draws its skeleton (its own padding and type step). A loading scope does
+   *  the same. */
+  loading?: boolean;
+  /** The text is written copy (a content-type chip, "Beta"), not read data: the badge stays real in a loading scope.
+   *  `loading` still switches it. */
+  staticText?: boolean;
 }
 
 /**
@@ -112,8 +118,20 @@ function StatusBadgeSkeleton({ variant, className }: { variant?: 'card' | 'butto
   );
 }
 
-function StatusBadge({ text, variant, colorScheme, className, singleLine, gen, style, ...props }: StatusBadgeProps) {
-  const loading = useLoadingScope();
+function StatusBadge({
+  text,
+  variant,
+  colorScheme,
+  className,
+  singleLine,
+  gen,
+  style,
+  loading: loadingProp,
+  staticText = false,
+  ...props
+}: StatusBadgeProps) {
+  const inScope = useLoadingScope();
+  const loading = (inScope && !staticText) || !!loadingProp;
   if (loading) return <StatusBadgeSkeleton variant={variant} className={className} />;
   // Generation mode: constant full-accent text, progressive-opacity accent bg,
   // SSOT casing (textTransform:none overrides the base `uppercase`). Inline
@@ -164,4 +182,4 @@ function StatusBadge({ text, variant, colorScheme, className, singleLine, gen, s
   );
 }
 
-export { StatusBadge, StatusBadgeSkeleton, statusBadgeVariants };
+export { StatusBadge, statusBadgeVariants };

package/src/components/ui/status-indicator.tsx

@@ -55,7 +55,7 @@ export function StatusIndicator({ status, label, href }: StatusIndicatorProps) {
 }
 
 /** A StatusIndicator while its status is read: the dot a circle of its size, the label a `text-h6` bar. */
-export function StatusIndicatorSkeleton({ className }: { className?: string }) {
+function StatusIndicatorSkeleton({ className }: { className?: string }) {
   return (
     <div className={`${ROW_CLASS} ${className ?? ''}`} aria-hidden>
       <UnifiedSkeleton variant="circular" className={DOT_CLASS} />

package/src/components/ui/strip-card.tsx

@@ -86,7 +86,7 @@ export function StripCard({
  * own box), the title a `text-h3` bar and the caption, when the card carries one, a `text-h6` bar. The body is
  * the caller's: its components draw their own skeletons.
  */
-export function StripCardSkeleton({
+function StripCardSkeleton({
   lead,
   caption = false,
   density = 'default',

package/src/components/ui/super-user-banner-view.tsx

@@ -2,7 +2,9 @@
 
 import { cn } from '../../utils/cn';
 import { AlertTriangleIcon } from '../icons-v2-generated';
+import { TextLineSkeleton } from '../loading/unified-skeleton';
 import { AnnouncementBarView } from './announcement-bar-view';
+import { useLoadingScope } from './loading-scope';
 import { Tag } from './tag';
 
 export interface SuperUserBannerViewProps {
@@ -13,6 +15,9 @@ export interface SuperUserBannerViewProps {
    * host has no environment to name; the strip then ends at the text.
    */
   environmentLabel?: string;
+  /** The tenant's name is still being read: the strip and its copy are drawn, the name is a bar. A loading scope
+   *  does the same. */
+  loading?: boolean;
   className?: string;
 }
 
@@ -28,7 +33,14 @@ export interface SuperUserBannerViewProps {
  * rule along the bottom, the triangle in error, the role in error and the
  * tenant in primary text at body scale - and the environment chip at the end.
  */
-export function SuperUserBannerView({ tenantName, environmentLabel, className }: SuperUserBannerViewProps) {
+export function SuperUserBannerView({
+  tenantName,
+  environmentLabel,
+  loading: loadingProp,
+  className,
+}: SuperUserBannerViewProps) {
+  // ONE switch: the strip is static copy; only the tenant's name is read data, drawn as a bar while it loads.
+  const loading = useLoadingScope() || !!loadingProp;
   return (
     <AnnouncementBarView
       className={cn('shrink-0 border-b border-ods-error bg-ods-error-secondary text-ods-text-primary', className)}
@@ -37,7 +49,11 @@ export function SuperUserBannerView({ tenantName, environmentLabel, className }:
       title={
         <p className="mb-0 min-w-0 max-w-full truncate text-h4">
           <span className="text-ods-error">Super user access: </span>
-          <span>{tenantName}</span>
+          {loading ? (
+            <TextLineSkeleton as="span" type="inherit" className="inline-flex w-32 align-bottom" />
+          ) : (
+            <span>{tenantName}</span>
+          )}
         </p>
       }
       endAdornment={

package/src/components/ui/switch.tsx

@@ -1,36 +1,48 @@
 'use client';
 
 import * as SwitchPrimitives from '@radix-ui/react-switch';
-import { type ComponentPropsWithoutRef, type ElementRef, forwardRef, useEffect, useState } from 'react';
+import { type ComponentPropsWithoutRef, type ElementRef, forwardRef, useState } from 'react';
 
 import { cn } from '../../utils/cn';
+import { UnifiedSkeleton } from '../loading/unified-skeleton';
+import { useLoadingScope } from './loading-scope';
+
+/** The switch's box (its track), read by the switch and by its skeleton. */
+const SWITCH_SIZE_CLASS = 'h-4 w-6';
+
+/** A switch while its value is read: one box of the switch's own size and shape. */
+function SwitchSkeleton({ className }: { className?: string }) {
+  return <UnifiedSkeleton as="span" className={cn(SWITCH_SIZE_CLASS, 'shrink-0 rounded-full', className)} />;
+}
 
 const Switch = forwardRef<
   ElementRef<typeof SwitchPrimitives.Root>,
   ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> & {
     checked?: boolean;
     onCheckedChange?: (checked: boolean) => void;
+    /** The value is still being read: the switch draws its skeleton (`SwitchSkeleton`). A loading scope does the
+     *  same. */
+    loading?: boolean;
   }
->(({ className, checked, onCheckedChange, ...props }, ref) => {
-  // Use local state if not controlled
-  const [isChecked, setIsChecked] = useState(checked || false);
-
-  // Update local state when controlled prop changes
-  useEffect(() => {
-    if (checked !== undefined) {
-      setIsChecked(checked);
-    }
-  }, [checked]);
+>(({ className, checked, onCheckedChange, loading: loadingProp, ...props }, ref) => {
+  // ONE switch: in a page's loading state (or while the host reads the value) the switch is its skeleton.
+  const loading = useLoadingScope() || !!loadingProp;
+  // Local state when uncontrolled; a controlled `checked` always wins (derived, never copied in an effect).
+  const [localChecked, setLocalChecked] = useState(false);
+  const isChecked = checked ?? localChecked;
 
   const handleCheckedChange = (newChecked: boolean) => {
-    setIsChecked(newChecked);
+    setLocalChecked(newChecked);
     onCheckedChange?.(newChecked);
   };
 
+  if (loading) return <SwitchSkeleton className={className} />;
+
   return (
     <SwitchPrimitives.Root
       className={cn(
-        'peer inline-flex h-4 w-6 shrink-0 cursor-pointer items-center rounded-full border-2 bg-ods-card px-0.5 transition-colors hover:bg-ods-bg-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-focus focus-visible:ring-offset-2 focus-visible:ring-offset-background active:bg-ods-bg-active disabled:cursor-not-allowed disabled:opacity-50',
+        SWITCH_SIZE_CLASS,
+        'peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 bg-ods-card px-0.5 transition-colors hover:bg-ods-bg-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-focus focus-visible:ring-offset-2 focus-visible:ring-offset-background active:bg-ods-bg-active disabled:cursor-not-allowed disabled:opacity-50',
         isChecked ? 'border-ods-accent hover:border-ods-accent-hover' : 'border-ods-text-secondary',
         className,
       )}

package/src/components/ui/tab-navigation.tsx

@@ -17,7 +17,8 @@ import {
 import { useSearchParams, useRouter, usePathname } from '../../embed-shims/next-navigation';
 import { cn } from '../../utils/cn';
 import { TextLineSkeleton, UnifiedSkeleton } from '../loading/unified-skeleton';
-import { useLoadingScope } from './loading-scope';
+import { BUTTON_KIND_CLASS, Button } from './button';
+import { LOADING_NOOP, LoadingItems, useLoadingScope } from './loading-scope';
 import { Tag } from './tag';
 
 export interface TabItem {
@@ -139,6 +140,17 @@ interface TabNavigationProps {
    * instead of its skeleton bars. Default `false`: labels built from read data stay skeletons.
    */
   staticLabels?: boolean;
+  /** The tabs are still being read: the strip draws its skeleton (or, with `staticLabels`, the real strip inert). A
+   *  loading scope does the same. */
+  loading?: boolean;
+  /** Tabs the skeleton draws: the tabs the host reads. Default `tabs.length`. */
+  skeletonCount?: number;
+  /** The skeleton's tabs lead with an avatar (the host's read tabs carry one). Default: whether any tab in `tabs` has
+   *  one, which a host that has not read its tabs yet (empty `tabs`) cannot answer: it states it here. */
+  skeletonAvatar?: boolean;
+  /** The skeleton's tabs carry a second line (the host's read tabs carry a `sublabel`). Default: whether any tab in
+   *  `tabs` has one; a host with no tabs yet states it here. */
+  skeletonSublabel?: boolean;
 
   /**
    * Render prop for the tab BODY. Receives the tab to render and, additively,
@@ -163,8 +175,8 @@ const STRIP_FRAME_CLASS = 'relative w-full';
 const STRIP_ROW_CLASS =
   'scrollbar-hide relative flex h-full items-center justify-start overflow-x-auto overflow-y-hidden';
 const ADMIN_TAB_GAP_CLASS = 'gap-[var(--spacing-system-xxs)]';
-const TAB_CLASS =
-  'group relative flex shrink-0 items-center gap-[var(--spacing-system-xxs)] p-[var(--spacing-system-m)]';
+/** A tab's box, loaded and loading: the lib's tab (`Button variant="tab"`), which the loading tab draws too. */
+const TAB_CLASS = BUTTON_KIND_CLASS.tab;
 const TAB_AVATAR_GAP_CLASS = 'gap-[var(--spacing-system-xsf)]';
 /** A tab's avatar, in px: the size a host draws `TabItem.avatar` at, and the circle the skeleton draws for it. */
 export const TAB_AVATAR_PX = 24;
@@ -200,6 +212,8 @@ interface TabBarProps {
   tabAlign: 'center' | 'start';
   progressTransitionMs: number;
   variant: TabNavigationVariant;
+  /** The tabs are read data (not `staticLabels`): each tab carries `data-loading-item`, as its skeleton's tabs do. */
+  itemMarks: boolean;
 }
 
 /**
@@ -226,6 +240,7 @@ const TabBar = memo(function TabBarImpl({
   tabAlign,
   progressTransitionMs,
   variant,
+  itemMarks,
 }: TabBarProps) {
   const isAdmin = variant === 'admin';
   const scrollRef = useRef<HTMLDivElement>(null);
@@ -456,35 +471,21 @@ const TabBar = memo(function TabBarImpl({
           const isActive = activeTab === tab.id;
 
           return (
-            <button
+            <Button
+              variant="tab"
               key={tab.id}
               ref={isActive ? activeTabRef : undefined}
+              data-loading-item={itemMarks || undefined}
+              data-state={isActive ? 'active' : undefined}
+              // The admin strip marks its open and hovered tab with the accent fade; the default one by the underline alone.
+              data-emphasis={isAdmin ? 'fade' : undefined}
               type="button"
               onClick={() => onTabChange(tab.id)}
               aria-label={tab.badge ? `${tab.label} (${tab.badge})` : undefined}
               className={cn(
-                TAB_CLASS,
-                'cursor-pointer',
                 tabAlignClass(tabAlign),
-                // Named rather than `transition-all`: the only thing that moves
-                // here is colour.
-                'border-none bg-transparent outline-none transition-colors duration-200',
-                // `outline-none` above drops the browser's own focus ring, so
-                // put one back or the strip is un-navigable by keyboard — you
-                // can tab through it with nothing to show where you are. Inset,
-                // so it stays within the button and never overlaps a neighbour.
-                'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ods-focus',
                 stretchTabs && TAB_STRETCH_CLASS,
                 tab.avatar && TAB_AVATAR_GAP_CLASS,
-                // `default`: the open tab is marked by the underline alone, no surface
-                // of its own. `admin`: the open and the hovered tab carry an accent
-                // fade. ODS colour vars hold hex values, so Tailwind alpha modifiers
-                // (to-ods-accent/10) silently produce no CSS; color-mix() accepts
-                // hex, so the 10%-alpha stop is derived from the token.
-                isAdmin &&
-                  (isActive
-                    ? 'bg-gradient-to-b from-transparent to-[color-mix(in_srgb,var(--color-accent-primary)_10%,transparent)]'
-                    : 'hover:bg-gradient-to-b hover:from-transparent hover:to-[color-mix(in_srgb,var(--color-accent-primary)_10%,transparent)]'),
               )}
             >
               {tab.avatar ? (
@@ -549,7 +550,7 @@ const TabBar = memo(function TabBarImpl({
                   className="pointer-events-none my-[calc((var(--font-line-space-h4-body)_-_2rem)/2)] ml-[var(--spacing-system-xxs)] shrink-0"
                 />
               )}
-            </button>
+            </Button>
           );
         })}
 
@@ -596,7 +597,7 @@ const TabBar = memo(function TabBarImpl({
   );
 });
 
-export interface TabNavigationSkeletonProps {
+interface TabNavigationSkeletonProps {
   /** How many tabs the strip draws. */
   count: number;
   /** Each tab leads with an avatar: a `TAB_AVATAR_PX` circle before its label. */
@@ -613,7 +614,7 @@ export interface TabNavigationSkeletonProps {
  * The strip while its tabs are read: the same strip, tab padding and gaps, each label a bar at the label's type
  * step, and the strip's bottom border drawn for real. `TabNavigation` draws it in a loading scope.
  */
-export function TabNavigationSkeleton({
+function TabNavigationSkeleton({
   count,
   avatar = false,
   sublabel = false,
@@ -627,30 +628,31 @@ export function TabNavigationSkeleton({
   return (
     <div className={cn(STRIP_FRAME_CLASS, className)} aria-hidden>
       <div className={cn(STRIP_ROW_CLASS, isAdmin && ADMIN_TAB_GAP_CLASS)}>
-        {Array.from({ length: count }, (_, i) => (
-          <div
-            // biome-ignore lint/suspicious/noArrayIndexKey: skeleton tabs never reorder
-            key={i}
-            className={cn(
-              TAB_CLASS,
-              tabAlignClass(tabAlign),
-              stretchTabs && TAB_STRETCH_CLASS,
-              avatar && TAB_AVATAR_GAP_CLASS,
-            )}
-          >
-            {avatar && (
-              <UnifiedSkeleton variant="circular" width={TAB_AVATAR_PX} height={TAB_AVATAR_PX} className="shrink-0" />
-            )}
-            {sublabel ? (
-              <span className={TAB_SUBLABEL_WRAP_CLASS}>
-                <TextLineSkeleton as="span" type="h4" className="w-20" />
-                <TextLineSkeleton as="span" type="h6" className="w-28" />
-              </span>
-            ) : (
-              <TextLineSkeleton type="h4" className="w-20" />
-            )}
-          </div>
-        ))}
+        <LoadingItems count={count}>
+          {() => (
+            <div
+              data-loading-item
+              className={cn(
+                TAB_CLASS,
+                tabAlignClass(tabAlign),
+                stretchTabs && TAB_STRETCH_CLASS,
+                avatar && TAB_AVATAR_GAP_CLASS,
+              )}
+            >
+              {avatar && (
+                <UnifiedSkeleton variant="circular" width={TAB_AVATAR_PX} height={TAB_AVATAR_PX} className="shrink-0" />
+              )}
+              {sublabel ? (
+                <span className={TAB_SUBLABEL_WRAP_CLASS}>
+                  <TextLineSkeleton as="span" type="h4" className="w-20" />
+                  <TextLineSkeleton as="span" type="h6" className="w-28" />
+                </span>
+              ) : (
+                <TextLineSkeleton type="h4" className="w-20" />
+              )}
+            </div>
+          )}
+        </LoadingItems>
       </div>
       <div className={cn(STRIP_BORDER_CLASS, 'bg-ods-border')} />
     </div>
@@ -687,6 +689,10 @@ function TabNavigationBody({
   urlSync = false,
   defaultTab,
   staticLabels = false,
+  loading: loadingProp,
+  skeletonCount,
+  skeletonAvatar,
+  skeletonSublabel,
   children,
   searchParams,
 }: TabNavigationProps & { searchParams: ReturnType<typeof useSearchParams> | null }) {
@@ -850,7 +856,7 @@ function TabNavigationBody({
   const isStale = activeTab !== deferredActiveTab;
   // In a loading scope the body below draws its own loading state. The strip draws its skeleton, unless the caller
   // says its labels are static copy (`staticLabels`): then the real strip is drawn, inert.
-  const loading = useLoadingScope();
+  const loading = useLoadingScope() || !!loadingProp;
 
   return (
     <>
@@ -859,7 +865,7 @@ function TabNavigationBody({
           <TabBar
             tabs={tabs}
             activeTab={activeTab}
-            onTabChange={() => undefined}
+            onTabChange={LOADING_NOOP}
             className={className}
             shadowClassName={shadowClassName}
             showLeftGradient={showLeftGradient}
@@ -868,13 +874,14 @@ function TabNavigationBody({
             tabAlign={tabAlign}
             progressTransitionMs={progressTransitionMs}
             variant={variant}
+            itemMarks={false}
           />
         </div>
       ) : loading ? (
         <TabNavigationSkeleton
-          count={tabs.length}
-          avatar={tabs.some(tab => Boolean(tab.avatar))}
-          sublabel={tabs.some(tab => Boolean(tab.sublabel))}
+          count={skeletonCount ?? tabs.length}
+          avatar={skeletonAvatar ?? tabs.some(tab => Boolean(tab.avatar))}
+          sublabel={skeletonSublabel ?? tabs.some(tab => Boolean(tab.sublabel))}
           stretchTabs={stretchTabs}
           tabAlign={tabAlign}
           variant={variant}
@@ -893,6 +900,7 @@ function TabNavigationBody({
           tabAlign={tabAlign}
           progressTransitionMs={progressTransitionMs}
           variant={variant}
+          itemMarks={!staticLabels}
         />
       )}