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

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

@@ -1,5 +1,9 @@
+'use client';
+
 import type { ReactNode } from 'react';
 import { cn } from '../../utils/cn';
+import { TextLineSkeleton } from '../loading/unified-skeleton';
+import { useLoadingScope } from './loading-scope';
 
 export interface StripCardProps {
   /** Before the title, at 24px (an icon, a step's number). */
@@ -16,6 +20,20 @@ export interface StripCardProps {
   bodyClassName?: string;
 }
 
+/** The card's frame, head and body, read by the card and by its skeleton. */
+const FRAME_CLASS = 'flex h-full min-w-0 flex-col overflow-hidden rounded-md border border-ods-border bg-ods-card';
+const HEAD_CLASS = 'flex items-center gap-[var(--spacing-system-mf)] border-b border-ods-border';
+const HEAD_TEXT_CLASS = 'flex min-w-0 flex-1 flex-col';
+const LEAD_CLASS = 'flex shrink-0 items-center';
+const headPadding = (roomy: boolean) => (roomy ? 'p-[var(--spacing-system-l)]' : 'p-[var(--spacing-system-m)]');
+const bodyClass = (roomy: boolean) =>
+  cn(
+    'flex min-w-0 flex-1 flex-col bg-ods-bg',
+    roomy
+      ? 'gap-[var(--spacing-system-l)] p-[var(--spacing-system-l)]'
+      : 'gap-[var(--spacing-system-m)] px-[var(--spacing-system-m)] pb-[var(--spacing-system-l)] pt-[var(--spacing-system-m)]',
+  );
+
 /**
  * THE card with a head strip (Figma "Info-card" with a `tag` head): a head on
  * the card surface holding a mark, a title and an optional caption, a hairline,
@@ -33,34 +51,66 @@ export function StripCard({
   bodyClassName,
 }: StripCardProps) {
   const roomy = density === 'roomy';
-  return (
-    <div
-      className={cn(
-        'flex h-full min-w-0 flex-col overflow-hidden rounded-md border border-ods-border bg-ods-card',
-        className,
-      )}
-    >
-      <div
-        className={cn(
-          'flex items-center gap-[var(--spacing-system-mf)] border-b border-ods-border',
-          roomy ? 'p-[var(--spacing-system-l)]' : 'p-[var(--spacing-system-m)]',
-        )}
+  // In a page's loading state a title still being read is empty: the head is its skeleton, the body (whose own
+  // components draw their skeletons) as it is.
+  const inScope = useLoadingScope();
+  if (inScope && !title) {
+    return (
+      <StripCardSkeleton
+        lead={lead}
+        caption={caption !== undefined}
+        density={density}
+        className={className}
+        bodyClassName={bodyClassName}
       >
-        {lead && <span className="flex shrink-0 items-center">{lead}</span>}
-        <div className="flex min-w-0 flex-1 flex-col">
+        {children}
+      </StripCardSkeleton>
+    );
+  }
+  return (
+    <div className={cn(FRAME_CLASS, className)}>
+      <div className={cn(HEAD_CLASS, headPadding(roomy))}>
+        {lead && <span className={LEAD_CLASS}>{lead}</span>}
+        <div className={HEAD_TEXT_CLASS}>
           <Title className="m-0 text-ods-text-primary text-h3">{title}</Title>
           {caption && <span className="text-ods-text-secondary text-h6">{caption}</span>}
         </div>
       </div>
-      <div
-        className={cn(
-          'flex min-w-0 flex-1 flex-col bg-ods-bg',
-          roomy
-            ? 'gap-[var(--spacing-system-l)] p-[var(--spacing-system-l)]'
-            : 'gap-[var(--spacing-system-m)] px-[var(--spacing-system-m)] pb-[var(--spacing-system-l)] pt-[var(--spacing-system-m)]',
-          bodyClassName,
-        )}
-      >
+      <div className={cn(bodyClass(roomy), bodyClassName)}>
+        {children}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * A StripCard while its head is read: the same frame, the lead as given (an icon is static, a picture draws its
+ * 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({
+  lead,
+  caption = false,
+  density = 'default',
+  children,
+  className,
+  bodyClassName,
+}: Pick<StripCardProps, 'lead' | 'density' | 'children' | 'className' | 'bodyClassName'> & {
+  /** The loaded card carries a caption under its title. */
+  caption?: boolean;
+}) {
+  const roomy = density === 'roomy';
+  return (
+    <div className={cn(FRAME_CLASS, className)}>
+      <div className={cn(HEAD_CLASS, headPadding(roomy))} aria-hidden>
+        {lead && <span className={LEAD_CLASS}>{lead}</span>}
+        <div className={HEAD_TEXT_CLASS}>
+          <TextLineSkeleton type="h3" className="w-3/4" />
+          {caption && <TextLineSkeleton type="h6" className="w-1/2" />}
+        </div>
+      </div>
+      {/* The body is the caller's, inert while the card is read (its components draw their own skeletons). */}
+      <div className={cn(bodyClass(roomy), bodyClassName)} inert>
         {children}
       </div>
     </div>

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