@flamingo-stack/openframe-frontend-core 0.0.765 → 0.0.767

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

@@ -16,6 +16,8 @@ import {
 } from 'react';
 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 { Tag } from './tag';
 
 export interface TabItem {
@@ -55,7 +57,7 @@ export interface TabItem {
   badge?: string;
   /** A second, quieter line of text: beside the label from `md`, under it below. */
   sublabel?: string;
-  /** A leading visual used instead of `icon` (an avatar, a logo). Rendered as given. */
+  /** A leading visual used instead of `icon` (an avatar, a logo), drawn `TAB_AVATAR_PX` square. Rendered as given. */
   avatar?: React.ReactNode;
   /**
    * 0..1. Set on the ACTIVE tab, the underline stops being a selection marker
@@ -132,6 +134,11 @@ interface TabNavigationProps {
   // URL sync mode
   urlSync?: boolean | TabNavigationUrlSyncOptions;
   defaultTab?: string; // Fallback when no valid tab in URL or initial value
+  /**
+   * The tab labels are static copy (config, never read data): in a loading scope the real strip is drawn (inert)
+   * instead of its skeleton bars. Default `false`: labels built from read data stay skeletons.
+   */
+  staticLabels?: boolean;
 
   /**
    * Render prop for the tab BODY. Receives the tab to render and, additively,
@@ -151,6 +158,24 @@ interface IndicatorRect {
 
 const HIDDEN_INDICATOR: IndicatorRect = { left: 0, width: 0 };
 
+/** The strip's layout, read by the strip and by its skeleton, so the skeleton is the strip's size. */
+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)]';
+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;
+const TAB_STRETCH_CLASS = 'flex-1';
+const tabAlignClass = (tabAlign: 'center' | 'start') =>
+  tabAlign === 'start' ? 'justify-start text-left' : 'justify-center';
+/** A tab with a second line: the label and its sublabel, beside each other from md, stacked below. */
+const TAB_SUBLABEL_WRAP_CLASS =
+  'flex min-w-0 flex-col items-start text-left content-md:flex-row content-md:items-baseline content-md:gap-[var(--spacing-system-xsf)]';
+const STRIP_BORDER_CLASS = 'pointer-events-none absolute bottom-0 left-0 right-0 h-px';
+
 const StatusDot = ({ indicator, className }: { indicator: NonNullable<TabItem['indicator']>; className?: string }) => (
   <div
     className={cn(
@@ -423,16 +448,10 @@ const TabBar = memo(function TabBarImpl({
   }
 
   return (
-    <div className={cn('relative w-full', className)}>
+    <div className={cn(STRIP_FRAME_CLASS, className)}>
       {/* scrollbar-hide: tabs stay swipe/wheel-scrollable, bar never shows.
           `relative` makes this the offsetParent the underline is measured against. */}
-      <div
-        ref={scrollRef}
-        className={cn(
-          'scrollbar-hide relative flex h-full items-center justify-start overflow-x-auto overflow-y-hidden',
-          isAdmin && 'gap-[var(--spacing-system-xxs)]',
-        )}
-      >
+      <div ref={scrollRef} className={cn(STRIP_ROW_CLASS, isAdmin && ADMIN_TAB_GAP_CLASS)}>
         {tabs.map(tab => {
           const isActive = activeTab === tab.id;
 
@@ -444,8 +463,9 @@ const TabBar = memo(function TabBarImpl({
               onClick={() => onTabChange(tab.id)}
               aria-label={tab.badge ? `${tab.label} (${tab.badge})` : undefined}
               className={cn(
-                'group relative flex shrink-0 cursor-pointer items-center gap-[var(--spacing-system-xxs)] p-[var(--spacing-system-m)]',
-                tabAlign === 'start' ? 'justify-start text-left' : 'justify-center',
+                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',
@@ -454,8 +474,8 @@ const TabBar = memo(function TabBarImpl({
                 // 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 && 'flex-1',
-                tab.avatar && 'gap-[var(--spacing-system-xsf)]',
+                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
@@ -492,7 +512,7 @@ const TabBar = memo(function TabBarImpl({
               ) : null}
 
               {tab.sublabel ? (
-                <span className="flex min-w-0 flex-col items-start text-left content-md:flex-row content-md:items-baseline content-md:gap-[var(--spacing-system-xsf)]">
+                <span className={TAB_SUBLABEL_WRAP_CLASS}>
                   <span
                     className={cn(
                       'whitespace-nowrap transition-colors text-h4',
@@ -571,11 +591,72 @@ const TabBar = memo(function TabBarImpl({
       )}
 
       {/* Bottom border — a gradient-capable 1px line that fades to transparent on any edge that has an active fade shadow. */}
-      <div className="pointer-events-none absolute bottom-0 left-0 right-0 h-px" style={borderStyle} />
+      <div className={STRIP_BORDER_CLASS} style={borderStyle} />
     </div>
   );
 });
 
+export interface TabNavigationSkeletonProps {
+  /** How many tabs the strip draws. */
+  count: number;
+  /** Each tab leads with an avatar: a `TAB_AVATAR_PX` circle before its label. */
+  avatar?: boolean;
+  /** Each tab carries a quieter second line (`TabItem.sublabel`): beside the label from md, under it below. */
+  sublabel?: boolean;
+  stretchTabs?: boolean;
+  tabAlign?: 'center' | 'start';
+  variant?: TabNavigationVariant;
+  className?: string;
+}
+
+/**
+ * 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({
+  count,
+  avatar = false,
+  sublabel = false,
+  stretchTabs = false,
+  tabAlign = 'center',
+  variant,
+  className,
+}: TabNavigationSkeletonProps) {
+  const providedVariant = useContext(TabNavigationVariantContext);
+  const isAdmin = (variant ?? providedVariant) === 'admin';
+  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>
+        ))}
+      </div>
+      <div className={cn(STRIP_BORDER_CLASS, 'bg-ods-border')} />
+    </div>
+  );
+}
+
 export function TabNavigation({
   activeTab: controlledActiveTab,
   onTabChange: controlledOnTabChange,
@@ -590,6 +671,7 @@ export function TabNavigation({
   variant: variantProp,
   urlSync = false,
   defaultTab,
+  staticLabels = false,
   children,
 }: TabNavigationProps) {
   const providedVariant = useContext(TabNavigationVariantContext);
@@ -751,22 +833,53 @@ export function TabNavigation({
   //    body can mark itself while it waits.
   const deferredActiveTab = useDeferredValue(activeTab);
   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();
 
   return (
     <>
-      <TabBar
-        tabs={tabs}
-        activeTab={activeTab}
-        onTabChange={handleTabChange}
-        className={className}
-        shadowClassName={shadowClassName}
-        showLeftGradient={showLeftGradient}
-        showRightGradient={showRightGradient}
-        stretchTabs={stretchTabs}
-        tabAlign={tabAlign}
-        progressTransitionMs={progressTransitionMs}
-        variant={variant}
-      />
+      {loading && staticLabels ? (
+        <div className="contents" aria-hidden="true" inert>
+          <TabBar
+            tabs={tabs}
+            activeTab={activeTab}
+            onTabChange={() => undefined}
+            className={className}
+            shadowClassName={shadowClassName}
+            showLeftGradient={showLeftGradient}
+            showRightGradient={showRightGradient}
+            stretchTabs={stretchTabs}
+            tabAlign={tabAlign}
+            progressTransitionMs={progressTransitionMs}
+            variant={variant}
+          />
+        </div>
+      ) : loading ? (
+        <TabNavigationSkeleton
+          count={tabs.length}
+          avatar={tabs.some(tab => Boolean(tab.avatar))}
+          sublabel={tabs.some(tab => Boolean(tab.sublabel))}
+          stretchTabs={stretchTabs}
+          tabAlign={tabAlign}
+          variant={variant}
+          className={className}
+        />
+      ) : (
+        <TabBar
+          tabs={tabs}
+          activeTab={activeTab}
+          onTabChange={handleTabChange}
+          className={className}
+          shadowClassName={shadowClassName}
+          showLeftGradient={showLeftGradient}
+          showRightGradient={showRightGradient}
+          stretchTabs={stretchTabs}
+          tabAlign={tabAlign}
+          progressTransitionMs={progressTransitionMs}
+          variant={variant}
+        />
+      )}
 
       {/* Render children with active tab if provided */}
       {children && children(deferredActiveTab, { isStale })}

package/src/components/ui/table/table-header.tsx

@@ -12,7 +12,7 @@ import type { TableColumn, TableHeaderProps, TableRowData } from './types';
 
 /** The default header label: wraps inside its cell with a balanced split. */
 const TABLE_HEADER_LABEL_CLASS = 'min-w-0 text-balance uppercase text-ods-text-secondary text-h5';
-import { getHideClasses } from './utils';
+import { getHideClasses, TABLE_ACTIONS_COLUMN_KEY } from './utils';
 
 /** @deprecated Use `DataTableHeader` from `data-table` instead. */
 export function TableHeader<T = TableRowData>({
@@ -94,7 +94,7 @@ export function TableHeader<T = TableRowData>({
       )}
 
       {columns.map(column => {
-        const isActionsColumn = column.key === '__actions__';
+        const isActionsColumn = column.key === TABLE_ACTIONS_COLUMN_KEY;
         const filterable = column.filterable && column.filterOptions && onFilterChange;
 
         // Hide columns on mobile if they are not actions or filterable

package/src/components/ui/table/table-row.tsx

@@ -3,6 +3,7 @@
 import type React from 'react';
 import Link from '../../../embed-shims/next-link';
 import { cn } from '../../../utils/cn';
+import { isOwnClick } from '../../../utils/own-click';
 import { Checkbox } from '../checkbox';
 import { TableCell } from './table-cell';
 import { COMPACT_ROW_MIN_HEIGHT, ROW_HEIGHT_DESKTOP } from './table-skeleton';
@@ -42,10 +43,7 @@ export function TableRow<T = TableRowData>({
     : {};
 
   const handleRowClick = (e: React.MouseEvent) => {
-    const target = e.target as HTMLElement;
-    if (target.closest('[data-no-row-click]')) {
-      return;
-    }
+    if (!isOwnClick(e.target, e.currentTarget)) return;
 
     if (onClick) {
       onClick(item);

package/src/components/ui/table/table-skeleton.tsx

@@ -1,8 +1,10 @@
 'use client';
 
 import { cn } from '../../../utils/cn';
-import { UnifiedSkeleton } from '../../loading/unified-skeleton';
+import { InteractiveSkeleton, TextLineSkeleton, UnifiedSkeleton } from '../../loading/unified-skeleton';
+import { CHECKBOX_BOX_CLASS } from '../checkbox';
 import type { TableCardSkeletonProps } from './types';
+import { getHideClasses, TABLE_ACTIONS_COLUMN_KEY, TABLE_CHEVRON_COLUMN_KEY } from './utils';
 
 // INNER row heights: the bordered row card adds 1px top + bottom, so the
 // outer block totals the designed 68px / 80px.
@@ -19,12 +21,18 @@ const COMPACT_ROW_MIN_HEIGHT = 'min-h-[56px]';
 const ROW_HEIGHT_MOBILE = 'h-[66px]';
 
 /** @deprecated Use `DataTableSkeleton` from `data-table` instead. */
+/**
+ * Rows a table's skeleton draws when its host states no count: one screen of rows under a page's header (a 68px row
+ * card and its 8px gap; about ten fit under the header of a 1440x900 screen, nine of a phone's 66px rows).
+ */
+export const TABLE_SKELETON_ROWS = 10;
+
 export function TableCardSkeleton({
   columns,
-  rows = 10,
+  rows = TABLE_SKELETON_ROWS,
   compact = false,
-  hasActions = false,
-  hasChevron = false,
+  actions,
+  selectable = false,
   className,
   rowClassName,
 }: TableCardSkeletonProps) {
@@ -39,64 +47,50 @@ export function TableCardSkeleton({
           key={index}
           className={cn('relative overflow-hidden rounded-[6px] border border-ods-border bg-ods-card', className)}
         >
-          {/* Desktop Skeleton */}
-          {/* Matches the ROW it stands in for: a compact row is content-sized
-              with a floor, a normal row is a fixed height. Using the taller of
-              the two here made every compact table jump on its first paint. */}
+          {/* `TableRow`'s own row: the same frame, gap and height at every breakpoint, each column in its own cell
+              width (the synthetic actions and chevron columns included), so a loaded row takes the skeleton's place. */}
           <div
             className={cn(
-              'hidden items-center gap-4 px-4 content-md:flex',
+              'relative flex items-center gap-4 px-4',
               compact ? cn('py-2', COMPACT_ROW_MIN_HEIGHT) : cn('py-0', ROW_HEIGHT_DESKTOP),
               rowClassName,
             )}
           >
-            {columns.map(column => (
-              <div key={column.key} className={cn('flex shrink-0 flex-col justify-center', column.width || 'flex-1')}>
-                <UnifiedSkeleton className="mb-1 h-5 w-3/4 rounded" />
-                {/* second line simulates multi-line content on the primary column */}
-                {index % 2 === 0 && column.key === primaryKey && (
-                  <UnifiedSkeleton className="h-4 w-1/2 rounded opacity-60" />
-                )}
-              </div>
-            ))}
-
-            {/* Actions skeleton */}
-            {hasActions && (
-              <div className={cn('flex shrink-0 items-center gap-2', !hasChevron && 'ml-auto')}>
-                <UnifiedSkeleton className="h-12 w-12 rounded" />
-                <UnifiedSkeleton className="h-12 w-24 rounded" />
-              </div>
-            )}
-
-            {/* Chevron skeleton */}
-            {hasChevron && (
-              <div className={cn('flex w-12 shrink-0 items-center justify-end', !hasActions && 'ml-auto')}>
-                <UnifiedSkeleton className="h-8 w-8 rounded" />
+            {selectable && (
+              <div className="flex w-10 shrink-0 items-center justify-center">
+                <UnifiedSkeleton className={CHECKBOX_BOX_CLASS} />
               </div>
             )}
-          </div>
-
-          {/* Mobile Skeleton */}
-          <div
-            className={cn(
-              'flex items-center justify-start gap-3 px-3 content-md:hidden',
-              // Mirror the real row on mobile too: a compact row is
-              // content-sized with a floor, a normal row a fixed height.
-              // Hard-wiring ROW_HEIGHT_MOBILE made every COMPACT table jump
-              // 68px -> 58px per row when the data replaced the skeleton.
-              compact ? cn('py-2', COMPACT_ROW_MIN_HEIGHT) : cn('py-0', ROW_HEIGHT_MOBILE),
-              rowClassName,
-            )}
-          >
-            {/* The inner padding is the NON-compact row's; a compact row is
-                sized by its own `py-2` + floor, so adding `py-3` here made the
-                compact mobile skeleton 78px against a real row's 58. */}
-            <div className={cn('flex min-w-0 flex-1 flex-col justify-center', compact ? 'py-0' : 'py-3')}>
-              <UnifiedSkeleton className="mb-2 h-4 w-3/4 rounded" />
-              <UnifiedSkeleton className="h-3 w-1/2 rounded opacity-60" />
-            </div>
-            {hasActions && <UnifiedSkeleton className="h-12 w-12 shrink-0 rounded" />}
-            {hasChevron && <UnifiedSkeleton className="h-8 w-8 shrink-0 rounded" />}
+            {columns.map(column => {
+              const cellClass = cn('flex shrink-0', column.width || 'min-w-0 flex-1', getHideClasses(column.hideAt));
+              if (column.key === TABLE_ACTIONS_COLUMN_KEY) {
+                // One button per row action, at the real buttons' size: an icon-only action an icon button. A host
+                // that renders its own actions (`renderRowActions`) gets one icon button in the column's width.
+                return (
+                  <div key={column.key} className={cn(cellClass, 'items-center justify-end gap-2')}>
+                    {(actions ?? [{ iconOnly: true }]).map((action, i) => (
+                      // biome-ignore lint/suspicious/noArrayIndexKey: skeleton buttons never reorder
+                      <InteractiveSkeleton.Button key={i} size={action.iconOnly ? 'icon' : 'default'} />
+                    ))}
+                  </div>
+                );
+              }
+              if (column.key === TABLE_CHEVRON_COLUMN_KEY) {
+                return (
+                  <div key={column.key} className={cn(cellClass, 'items-center justify-end')}>
+                    <InteractiveSkeleton.Button size="icon" />
+                  </div>
+                );
+              }
+              return (
+                <div key={column.key} className={cn(cellClass, 'flex-col justify-center overflow-hidden')}>
+                  {/* A cell's text (`TableCell`: the primary face), and on the primary column every other row a
+                      second, secondary line (a description or an id under it). */}
+                  <TextLineSkeleton type="h4" className="w-3/4" />
+                  {index % 2 === 0 && column.key === primaryKey && <TextLineSkeleton type="h6" className="w-1/2" />}
+                </div>
+              );
+            })}
           </div>
         </div>
       ))}

package/src/components/ui/table/table.tsx

@@ -5,14 +5,16 @@ import { cn } from '../../../utils/cn';
 import { Chevron02RightIcon } from '../../icons-v2-generated';
 import { Pagination } from '../../pagination';
 import { Button } from '../button';
-import { CursorPagination } from '../cursor-pagination';
+import { CursorPagination, CursorPaginationSkeleton } from '../cursor-pagination';
 import { PlaceholderRows, ReservedEmptyState } from '../data-table/data-table-skeleton';
+import { useLoadingScope } from '../loading-scope';
 import { TableEmptyState } from './table-empty-state';
 import { TableHeader } from './table-header';
 import { TableRow } from './table-row';
-import { COMPACT_ROW_MIN_HEIGHT, TableCardSkeleton } from './table-skeleton';
+import { COMPACT_ROW_MIN_HEIGHT, TABLE_SKELETON_ROWS, TableCardSkeleton } from './table-skeleton';
 import type { RowAction, TableColumn, TableProps, TableRowData } from './types';
 import { useTableMotion } from './use-table-motion';
+import { TABLE_ACTIONS_COLUMN_KEY, TABLE_CHEVRON_COLUMN_KEY } from './utils';
 
 /**
  * Injects synthetic columns (row actions and/or row-level chevron link) at the end of the columns array.
@@ -35,7 +37,7 @@ function injectSyntheticColumns<T>(
 
   if (hasActions) {
     const actionsColumn: TableColumn<T> = {
-      key: '__actions__',
+      key: TABLE_ACTIONS_COLUMN_KEY,
       label: '',
       // A caller-fixed width keeps the header and every row on ONE grid
       // (see `actionsColumnWidth` in types.ts); the default stays
@@ -68,7 +70,7 @@ function injectSyntheticColumns<T>(
 
   if (rowHref) {
     const chevronColumn: TableColumn<T> = {
-      key: '__chevron__',
+      key: TABLE_CHEVRON_COLUMN_KEY,
       label: '',
       width: 'w-12 shrink-0 flex-none',
       align: 'right',
@@ -100,9 +102,9 @@ export function Table<T = TableRowData>({
   data,
   columns,
   rowKey,
-  loading = false,
+  loading: loadingProp = false,
   emptyMessage,
-  skeletonRows = 10,
+  skeletonRows = TABLE_SKELETON_ROWS,
   minRows,
   emptyState,
   keepHeightWhenEmpty,
@@ -135,10 +137,22 @@ export function Table<T = TableRowData>({
   animateRowReorder,
   actionsColumnWidth,
 }: TableProps<T>) {
+  // In a page's loading state the table is loading: its header real, its rows the row skeletons.
+  const loading = useLoadingScope() || loadingProp;
   // Opt-in row-reorder animation: framer-motion is loaded lazily (its own chunk)
   // ONLY when `animateRowReorder` is set, so the default table stays motion-free.
   const tableMotion = useTableMotion(Boolean(animateRowReorder));
   const columnsWithActions = injectSyntheticColumns(columns, rowActions, renderRowActions, rowHref, actionsColumnWidth);
+  // The rows' skeleton: the rows' own columns (the synthetic actions and chevron columns at their widths), its
+  // action buttons as the row draws them.
+  const skeletonShape = {
+    columns: columnsWithActions,
+    compact,
+    selectable,
+    actions: renderRowActions
+      ? undefined
+      : rowActions?.map(action => ({ iconOnly: Boolean(action.icon) && !action.label })),
+  };
 
   // ONE resolution of the two vocabularies, so the render below never asks
   // which spelling the caller used. `minRows` is the current one; the two
@@ -274,13 +288,7 @@ export function Table<T = TableRowData>({
       {/* Table Body */}
       <div className={cn('flex w-full flex-col gap-2', className)}>
         {loading && data.length === 0 ? (
-          <TableCardSkeleton
-            columns={columns}
-            rows={skeletonRows}
-            compact={compact}
-            hasActions={(rowActions?.length ?? 0) > 0}
-            hasChevron={Boolean(rowHref)}
-          />
+          <TableCardSkeleton {...skeletonShape} rows={skeletonRows} />
         ) : data.length === 0 ? (
           /* `minRows` promises a STABLE height, and an empty table is exactly
              when a collapsing one is most visible — the pagination and
@@ -331,12 +339,7 @@ export function Table<T = TableRowData>({
             })()}
             {/* Infinite scroll: skeleton rows */}
             {infiniteScroll?.isFetchingNextPage && (
-              <TableCardSkeleton
-                columns={columns}
-                rows={infiniteScroll.skeletonRows ?? 3}
-                hasActions={(rowActions?.length ?? 0) > 0}
-                hasChevron={Boolean(rowHref)}
-              />
+              <TableCardSkeleton {...skeletonShape} rows={infiniteScroll.skeletonRows ?? 3} />
             )}
             {/* Infinite scroll: sentinel element */}
             {infiniteScroll?.hasNextPage && <div ref={sentinelRef} className="h-1" aria-hidden="true" />}
@@ -376,6 +379,20 @@ export function Table<T = TableRowData>({
         />
       )}
 
+      {/* While the first page is read: the pager's skeleton in its place (its buttons real and inert). */}
+      {!infiniteScroll && cursorPagination && loading && data.length === 0 && (
+        <CursorPaginationSkeleton
+          hasPreviousPage={cursorPagination.hasPreviousPage}
+          onPrevious={cursorPagination.onPrevious}
+          onReset={cursorPagination.onReset}
+          showInfo={cursorPagination.showInfo ?? true}
+          compact={cursorPagination.compact}
+          resetButtonLabel={cursorPagination.resetButtonLabel}
+          resetButtonIcon={cursorPagination.resetButtonIcon}
+          className={cn('mt-2 border-t border-ods-border pt-3', paginationClassName)}
+        />
+      )}
+
       {!infiniteScroll && pagePagination && !cursorPagination && data.length > 0 && (
         <div className={cn('mt-2 border-t border-ods-border pt-3', paginationClassName)}>
           <Pagination

package/src/components/ui/table/types.ts

@@ -297,13 +297,21 @@ export interface TableCellProps {
 
 /** @deprecated Use types from `data-table` instead. */
 export interface TableCardSkeletonProps {
-  /** Only `key` and `width` are read, so any `TableColumn<T>[]` fits. */
-  columns: ReadonlyArray<Pick<TableColumn, 'key' | 'width'>>;
+  /**
+   * The table's columns as its rows draw them, the synthetic actions and chevron columns included (`Table` passes
+   * its own). Only `key`, `width` and `hideAt` are read, so any `TableColumn<T>[]` fits.
+   */
+  columns: ReadonlyArray<Pick<TableColumn, 'key' | 'width' | 'hideAt'>>;
   rows?: number; // Number of skeleton rows to display (default: 10)
   /** Match a `compact` table's row height, so the first paint does not jump. */
   compact?: boolean;
-  hasActions?: boolean;
-  hasChevron?: boolean;
+  /**
+   * The row actions in the actions column, one button each (`iconOnly`: an icon button). Absent: the column's
+   * actions are the host's own (`renderRowActions`), drawn as one icon button.
+   */
+  actions?: ReadonlyArray<{ iconOnly: boolean }>;
+  /** The table's selection checkbox column. */
+  selectable?: boolean;
   className?: string;
   rowClassName?: string; // Additional classes for each skeleton row
 }

package/src/components/ui/table/utils.ts

@@ -1,5 +1,10 @@
 import type { TableColumn, TailwindBreakpoint } from './types';
 
+/** The synthetic column `Table` adds for its row actions (`rowActions` / `renderRowActions`). */
+export const TABLE_ACTIONS_COLUMN_KEY = '__actions__';
+/** The synthetic column `Table` adds for its row link (`rowHref`): one chevron icon button. */
+export const TABLE_CHEVRON_COLUMN_KEY = '__chevron__';
+
 /** @deprecated Use `data-table` instead. */
 export function getHideClasses(hideAt?: TailwindBreakpoint | TailwindBreakpoint[]): string {
   if (!hideAt) {