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

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

package/src/components/ui/tabs.tsx

@@ -4,6 +4,8 @@ import * as TabsPrimitive from '@radix-ui/react-tabs';
 import { type ComponentPropsWithoutRef, type ElementRef, forwardRef } from 'react';
 
 import { cn } from '../../utils/cn';
+import { TextLineSkeleton } from '../loading/unified-skeleton';
+import { useLoadingScope } from './loading-scope';
 
 /**
  * @deprecated Use `TabNavigation` from `components/ui/tab-navigation` — the
@@ -81,12 +83,70 @@ interface TabsTriggerProps extends ComponentPropsWithoutRef<typeof TabsPrimitive
 
 /** @deprecated for `variant="default"` — use `TabNavigation`. `variant="admin-rail"` is the sanctioned admin tabs styling. See {@link Tabs}. */
 const TabsTrigger = forwardRef<ElementRef<typeof TabsPrimitive.Trigger>, TabsTriggerProps>(
-  ({ className, variant = 'default', ...props }, ref) => (
-    <TabsPrimitive.Trigger ref={ref} className={cn(tabsTriggerVariantClasses[variant], className)} {...props} />
-  ),
+  ({ className, variant = 'default', ...props }, ref) => {
+    // In a loading scope the tab is its skeleton: the trigger's own box; a tab named by a string (a tab name the page
+    // states) keeps its name, any other label is a bar.
+    if (useLoadingScope()) {
+      const label = typeof props.children === 'string' && props.children !== '' ? props.children : undefined;
+      return <TabsTriggerSkeleton variant={variant} label={label} className={className} />;
+    }
+    return <TabsPrimitive.Trigger ref={ref} className={cn(tabsTriggerVariantClasses[variant], className)} {...props} />;
+  },
 );
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
 
+/** The label's type step per variant: the step its trigger's classes set. */
+const TRIGGER_LABEL_TYPE: Record<TabsVariant, 'h4' | 'h6'> = { default: 'h6', 'admin-rail': 'h4' };
+
+/**
+ * A tab while it is read: the trigger's own box (padding, border, type step). `label` is a tab name the page states,
+ * drawn as it is; without one the label is a bar.
+ */
+function TabsTriggerSkeleton({
+  variant = 'default',
+  label,
+  className,
+}: {
+  variant?: TabsVariant;
+  label?: string;
+  className?: string;
+}) {
+  return (
+    <div aria-hidden className={cn(tabsTriggerVariantClasses[variant], className)}>
+      {label ?? <TextLineSkeleton type={TRIGGER_LABEL_TYPE[variant]} className="w-20" />}
+    </div>
+  );
+}
+
+/**
+ * A tab list whose tabs are not known until a read: the list's own frame (the bordered rail for `admin-rail`) and
+ * `count` trigger skeletons.
+ */
+function TabsListSkeleton({
+  variant = 'default',
+  count,
+  labels,
+  className,
+}: {
+  variant?: TabsVariant;
+  /** How many tabs, when their names are read. */
+  count?: number;
+  /** The tabs' names, when the page states them (drawn as they are). */
+  labels?: string[];
+  className?: string;
+}) {
+  const tabs: Array<string | undefined> = labels ?? Array.from({ length: count ?? 0 }, () => undefined);
+  const list = (
+    <div aria-hidden className={cn(tabsListVariantClasses[variant], className)}>
+      {tabs.map((label, i) => (
+        // biome-ignore lint/suspicious/noArrayIndexKey: skeleton tabs never reorder
+        <TabsTriggerSkeleton key={i} variant={variant} label={label} />
+      ))}
+    </div>
+  );
+  return variant === 'admin-rail' ? <div className={ADMIN_RAIL_WRAPPER_CLASS}>{list}</div> : list;
+}
+
 /** @deprecated Use `TabNavigation` from `components/ui/tab-navigation`. See {@link Tabs}. */
 const TabsContent = forwardRef<
   ElementRef<typeof TabsPrimitive.Content>,
@@ -103,4 +163,4 @@ const TabsContent = forwardRef<
 ));
 TabsContent.displayName = TabsPrimitive.Content.displayName;
 
-export { Tabs, TabsList, TabsTrigger, TabsContent };
+export { Tabs, TabsList, TabsTrigger, TabsContent, TabsTriggerSkeleton, TabsListSkeleton };

package/src/components/ui/tag.tsx

@@ -5,22 +5,28 @@ import type React from 'react';
 import { useIsTruncated } from '../../hooks/ui/use-is-truncated';
 import { cn } from '../../utils/cn';
 import { XmarkCircleIcon } from '../icons-v2-generated/signs-and-symbols/xmark-circle-icon';
+import { UnifiedSkeleton } from '../loading/unified-skeleton';
 import { FloatingTooltip } from './floating-tooltip';
 
-const tagVariants = cva(['inline-flex items-center justify-center rounded-md', 'transition-colors duration-150'], {
+/** The tag's frame: read by `tagVariants` and by `TagSkeleton`. */
+const TAG_FRAME_CLASS = 'inline-flex items-center justify-center rounded-md';
+
+/**
+ * Chip scale, read by `tagVariants` and by `TagSkeleton`. `default` is the classic 32px mono-uppercase tag;
+ * `large` is the Figma "Feature Item" chip (48px, h3 bold body label) used by chip groups acting as tabs
+ * (OpenFrame categories). `sentence`: a sentence, not a label: body type in the case it was written in (a question
+ * a visitor can ask), on the same chip surface. One line, always: a longer sentence clips and shows whole in the
+ * label's tooltip.
+ */
+export const TAG_SIZE_CLASS = {
+  default: 'h-8 gap-[var(--spacing-system-xs)] p-[var(--spacing-system-xsf)] text-h5',
+  large: 'h-12 gap-[var(--spacing-system-xs)] p-[var(--spacing-system-s)] font-bold text-h3',
+  sentence: 'h-9 gap-[var(--spacing-system-xs)] px-[var(--spacing-system-sf)] py-[var(--spacing-system-xsf)] text-h6',
+} as const;
+
+const tagVariants = cva([TAG_FRAME_CLASS, 'transition-colors duration-150'], {
   variants: {
-    // Chip scale. `default` is the classic 32px mono-uppercase tag; `large`
-    // is the Figma "Feature Item" chip (48px, h3 bold body label) used by
-    // chip groups acting as tabs (OpenFrame categories).
-    size: {
-      default: 'h-8 gap-[var(--spacing-system-xs)] p-[var(--spacing-system-xsf)] text-h5',
-      large: 'h-12 gap-[var(--spacing-system-xs)] p-[var(--spacing-system-s)] font-bold text-h3',
-      // A sentence, not a label: body type in the case it was written in (a
-      // question a visitor can ask), on the same chip surface. One line, always:
-      // a longer sentence clips and shows whole in the label's tooltip.
-      sentence:
-        'h-9 gap-[var(--spacing-system-xs)] px-[var(--spacing-system-sf)] py-[var(--spacing-system-xsf)] text-h6',
-    },
+    size: TAG_SIZE_CLASS,
     variant: {
       primary: ['bg-ods-accent text-ods-text-on-accent', 'hover:bg-ods-accent-hover active:bg-ods-accent-active'],
       outline: [
@@ -180,3 +186,17 @@ function Tag({
 }
 
 export { Tag, tagVariants };
+
+/**
+ * A tag while its label is read: one skeleton box of the tag's own frame and size (its height and padding), a fixed
+ * width standing for the label.
+ */
+export function TagSkeleton({
+  size = 'default',
+  className,
+}: {
+  size?: keyof typeof TAG_SIZE_CLASS;
+  className?: string;
+}) {
+  return <UnifiedSkeleton as="span" className={cn(TAG_FRAME_CLASS, TAG_SIZE_CLASS[size], 'w-16 shrink-0', className)} />;
+}

package/src/components/ui/tags-input.tsx

@@ -3,11 +3,33 @@
 import { X, Plus } from 'lucide-react';
 import { type KeyboardEvent, useState } from 'react';
 import { cn } from '../../utils/cn';
+import { InteractiveSkeleton, TextLineSkeleton } from '../loading/unified-skeleton';
 import { Badge } from './badge';
 import { Button } from './button';
 import { Input } from './input';
 import { Label } from './label';
 
+/** The field's layout (label, the input with its Add button, the tags, the count), shared with `TagsInputSkeleton`. */
+export const TAGS_INPUT_CLASS = 'space-y-2';
+/** The input and its Add button on one line. */
+export const TAGS_INPUT_ROW_CLASS = 'flex items-center gap-2';
+const TAGS_INPUT_FIELD_CLASS = 'flex-1';
+const ADD_LABEL = 'Add';
+
+function AddButton({ onClick, disabled }: { onClick?: () => void; disabled: boolean }) {
+  return (
+    <Button
+      type="button"
+      variant="outline"
+      onClick={onClick}
+      disabled={disabled}
+      leftIcon={<Plus className="h-4 w-4" />}
+    >
+      {ADD_LABEL}
+    </Button>
+  );
+}
+
 interface TagsInputProps {
   value: string[];
   onChange: (tags: string[]) => void;
@@ -65,27 +87,22 @@ export function TagsInput({
   };
 
   return (
-    <div className={cn('space-y-2', className)}>
+    <div className={cn(TAGS_INPUT_CLASS, className)}>
       {label && <Label>{label}</Label>}
 
-      <div className="flex items-center gap-2">
+      <div className={TAGS_INPUT_ROW_CLASS}>
         <Input
           value={inputValue}
           onChange={e => setInputValue(e.target.value)}
           onKeyPress={handleKeyPress}
           placeholder={placeholder}
           disabled={disabled || (maxTags ? value.length >= maxTags : false)}
-          className={cn('flex-1 border-ods-border bg-ods-bg text-ods-text-primary', inputClassName)}
+          className={cn(TAGS_INPUT_FIELD_CLASS, 'border-ods-border bg-ods-bg text-ods-text-primary', inputClassName)}
         />
-        <Button
-          type="button"
-          variant="outline"
+        <AddButton
           onClick={handleAddTag}
           disabled={disabled || !inputValue.trim() || (maxTags ? value.length >= maxTags : false)}
-          leftIcon={<Plus className="h-4 w-4" />}
-        >
-          Add
-        </Button>
+        />
       </div>
 
       {value.length > 0 && (
@@ -116,3 +133,24 @@ export function TagsInput({
     </div>
   );
 }
+
+/**
+ * A `TagsInput` while its tags are read, in the field's own layout: the label and the Add button for real (the button
+ * inert), the input's box and the tag count as skeletons. The tags themselves depend on the record and are not drawn.
+ */
+export function TagsInputSkeleton({
+  label,
+  maxTags,
+  className,
+}: Pick<TagsInputProps, 'label' | 'maxTags' | 'className'>) {
+  return (
+    <div className={cn(TAGS_INPUT_CLASS, className)}>
+      {label && <Label>{label}</Label>}
+      <div className={TAGS_INPUT_ROW_CLASS}>
+        <InteractiveSkeleton.Input className={TAGS_INPUT_FIELD_CLASS} />
+        <AddButton disabled />
+      </div>
+      {maxTags ? <TextLineSkeleton type="h6" className="w-16" /> : null}
+    </div>
+  );
+}

package/src/components/ui/textarea.tsx

@@ -2,9 +2,26 @@
 
 import { type ButtonHTMLAttributes, type ReactNode, type TextareaHTMLAttributes, forwardRef, useId } from 'react';
 
+import { CONTROL_SIZE } from '../../styles/component-sizes';
 import { cn } from '../../utils/cn';
+import { UnifiedSkeleton } from '../loading/unified-skeleton';
 import { FieldWrapper } from './field-wrapper';
 
+/**
+ * The plain textarea's box: its type step (which sets the line height its rows are counted in), padding, 1px border,
+ * radius and minimum height. Read by `Textarea` and by `TextareaSkeleton`, so a field's skeleton is the field's box.
+ */
+export const TEXTAREA_BOX_CLASS = `flex ${CONTROL_SIZE.textarea} w-full rounded-[6px] border p-3 text-h4`;
+/** What the box adds around its rows: `p-3` and the 1px border, on both sides. */
+const TEXTAREA_BOX_CHROME_PX = 2 * 12 + 2 * 1;
+/** The browser's own default for a textarea that names no `rows`. */
+const TEXTAREA_DEFAULT_ROWS = 2;
+
+/** The height of a plain textarea of `rows` lines: the rows in the box's own line height, plus its padding and border. */
+export function textareaBoxHeight(rows: number = TEXTAREA_DEFAULT_ROWS): string {
+  return `calc(${rows}lh + ${TEXTAREA_BOX_CHROME_PX}px)`;
+}
+
 export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
   /** When true, renders red error border & ring */
   invalid?: boolean;
@@ -71,8 +88,7 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>((allProps, ref)
       <FieldWrapper label={label} labelVariant={labelVariant} error={error} errorSlot={errorSlot}>
         <textarea
           className={cn(
-            'flex min-h-[96px] w-full rounded-[6px] border p-3',
-            'text-h4',
+            TEXTAREA_BOX_CLASS,
             'focus:border-ods-accent focus-visible:outline-none',
             'touch-manipulation transition-colors duration-200',
             'border-ods-border bg-ods-card text-ods-text-primary placeholder:text-ods-text-secondary',
@@ -223,4 +239,18 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>((allProps, ref)
 });
 Textarea.displayName = 'Textarea';
 
-export { Textarea };
+/**
+ * A plain `Textarea` while its value is read: the textarea's own box (`TEXTAREA_BOX_CLASS`) at the height `rows` lines
+ * take, never under its minimum. The border is transparent so the one skeleton surface fills the whole box. The label
+ * is the host's: it is static copy and renders for real.
+ */
+function TextareaSkeleton({ rows = TEXTAREA_DEFAULT_ROWS, className }: { rows?: number; className?: string }) {
+  return (
+    <UnifiedSkeleton
+      className={cn(TEXTAREA_BOX_CLASS, 'border-transparent', className)}
+      style={{ height: textareaBoxHeight(rows) }}
+    />
+  );
+}
+
+export { Textarea, TextareaSkeleton };

package/src/components/ui/ticket-info-section.tsx

@@ -14,8 +14,6 @@ import type { TicketNote } from './ticket-note-card';
 import { TicketNotesSection } from './ticket-notes-section';
 import { TicketStatusTag, type TicketStatusTagOption } from './ticket-status-tag';
 
-export type { TicketAssigneeOption };
-
 export interface TicketInfoSectionProps {
   /** Organization name and image */
   organization?: {

package/src/components/ui/timezone-select.tsx

@@ -42,6 +42,8 @@ export interface TimezoneSelectProps {
   clearable?: boolean;
   placeholder?: string;
   className?: string;
+  /** The zone is still being resolved or read: the field draws its skeleton (`Autocomplete`'s `fieldLoading`). */
+  loading?: boolean;
 }
 
 /**
@@ -56,11 +58,13 @@ export function TimezoneSelect({
   clearable = false,
   placeholder = 'Search timezone…',
   className,
+  loading = false,
 }: TimezoneSelectProps) {
   const options = useMemo(() => timezoneOptions(value), [value]);
   return (
     <Autocomplete
       className={className}
+      fieldLoading={loading}
       value={value || null}
       disabled={disabled}
       onChange={tz => {

package/src/components/ui/toggle.tsx

@@ -5,6 +5,13 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { type ComponentPropsWithoutRef, type ElementRef, forwardRef } from 'react';
 import { cn } from '../../utils/cn';
 
+/** A toggle's height and side padding per size: read by `toggleVariants` and by every skeleton of a toggle. */
+export const TOGGLE_SIZE_CLASS = {
+  default: 'h-10 px-3',
+  sm: 'h-9 px-2.5',
+  lg: 'h-11 px-5',
+} as const;
+
 const toggleVariants = cva(
   'inline-flex items-center justify-center rounded-md transition-colors text-h6 hover:bg-ods-bg-hover hover:text-ods-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-focus focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-ods-accent data-[state=on]:text-ods-text-on-accent',
   {
@@ -12,12 +19,11 @@ const toggleVariants = cva(
       variant: {
         default: 'bg-transparent',
         outline: 'border border-ods-border bg-transparent hover:bg-ods-accent hover:text-ods-text-on-accent',
+        // One answer of several (a form's choice chips): a quiet hover, and the picked one keeps its accent under the pointer.
+        choice:
+          'border border-ods-border bg-transparent data-[state=on]:hover:bg-ods-accent-hover data-[state=on]:hover:text-ods-text-on-accent',
       },
-      size: {
-        default: 'h-10 px-3',
-        sm: 'h-9 px-2.5',
-        lg: 'h-11 px-5',
-      },
+      size: TOGGLE_SIZE_CLASS,
     },
     defaultVariants: {
       variant: 'default',

package/src/components/unified-pagination.tsx

@@ -3,6 +3,7 @@
 import { useSearchParams, usePathname } from '../embed-shims/next-navigation';
 import { withQuery } from '../utils/search-params';
 import { Pagination } from './pagination';
+import { useLoadingScope } from './ui/loading-scope';
 
 interface UnifiedPaginationProps {
   currentPage: number;
@@ -20,6 +21,8 @@ interface UnifiedPaginationProps {
    * nothing. Stops a one-page result from shifting the content above it.
    */
   reserveSpace?: boolean;
+  /** The list is still being read: the pager draws its own skeleton (also in a page's loading scope). */
+  loading?: boolean;
 }
 
 export function UnifiedPagination({
@@ -29,9 +32,11 @@ export function UnifiedPagination({
   className = 'mt-8 flex justify-center w-full',
   syncUrl = true,
   reserveSpace = false,
+  loading: loadingProp = false,
 }: UnifiedPaginationProps) {
   const searchParams = useSearchParams();
   const pathname = usePathname();
+  const loading = useLoadingScope() || loadingProp;
 
   /**
    * The address of a page of this list: the current URL with `page` set. Page 1
@@ -70,6 +75,16 @@ export function UnifiedPagination({
     }, 0);
   };
 
+  // While the list is read its page count may not be known (0 in a loading state): the pager draws its own skeleton,
+  // never left out, so the content above it keeps its place.
+  if (loading) {
+    return (
+      <div className={className}>
+        <Pagination loading currentPage={currentPage} totalPages={totalPages} onPageChange={handlePageChange} />
+      </div>
+    );
+  }
+
   // Don't render pagination if there's only one page (optionally holding the
   // row's height so the content above it does not shift).
   //

package/src/components/user-display.tsx

@@ -1,8 +1,10 @@
 'use client';
 
 import { cn } from '../utils/cn';
-import { getProxiedImageUrl } from '../utils/image-proxy';
-import { SquareAvatar } from './ui/square-avatar';
+import { useProxiedImageUrl } from './chat/hooks/use-proxied-image-url';
+import { TextLineSkeleton } from './loading/unified-skeleton';
+import { useLoadingScope } from './ui/loading-scope';
+import { SquareAvatar, SquareAvatarSkeleton } from './ui/square-avatar';
 
 interface UserDisplayProps {
   name: string;
@@ -18,6 +20,10 @@ interface UserDisplayProps {
   className?: string;
 }
 
+/** The row's layout, read by the row and by its skeleton, so the skeleton is the row's size. */
+const USER_ROW_CLASS = 'flex min-w-0 items-center gap-2';
+const USER_TEXT_CLASS = 'min-w-0 flex-1';
+
 /**
  * Reusable horizontal avatar + name (+ optional subtitle) row that follows
  * the visual pattern used in CommentCard headers.
@@ -31,18 +37,53 @@ export function UserDisplay({
   compact = false,
   className,
 }: UserDisplayProps) {
-  return (
-    <div className={cn('flex min-w-0 items-center gap-2', className)}>
-      <SquareAvatar
-        src={avatarUrl ? getProxiedImageUrl(avatarUrl) || avatarUrl : undefined}
-        fallback={name}
-        alt={name}
-        sizePx={size}
-        variant={shape}
+  const avatarSrc = useProxiedImageUrl(avatarUrl);
+  if (useLoadingScope()) {
+    return (
+      <UserDisplaySkeleton
+        size={size}
+        shape={shape}
+        compact={compact}
+        subtitle={subtitle !== undefined}
+        className={className}
       />
-      <div className="min-w-0 flex-1">
+    );
+  }
+  return (
+    <div className={cn(USER_ROW_CLASS, className)}>
+      <SquareAvatar src={avatarSrc || undefined} fallback={name} alt={name} sizePx={size} variant={shape} />
+      <div className={USER_TEXT_CLASS}>
         <p className={cn('truncate text-ods-text-primary', compact ? 'text-h6' : 'text-h4')}>{name}</p>
-        {subtitle && <span className={cn('block truncate text-ods-text-secondary text-h6')}>{subtitle}</span>}
+        {subtitle && <span className="block truncate text-ods-text-secondary text-h6">{subtitle}</span>}
+      </div>
+    </div>
+  );
+}
+
+export interface UserDisplaySkeletonProps {
+  /** Avatar size in px (defaults 32). */
+  size?: number;
+  shape?: 'square' | 'round';
+  compact?: boolean;
+  /** Whether the row has a second line. */
+  subtitle?: boolean;
+  className?: string;
+}
+
+/** The row while it is read: the avatar's box, a bar for the name and, with `subtitle`, one for the second line. */
+export function UserDisplaySkeleton({
+  size = 32,
+  shape = 'square',
+  compact = false,
+  subtitle = false,
+  className,
+}: UserDisplaySkeletonProps) {
+  return (
+    <div className={cn(USER_ROW_CLASS, className)} aria-hidden>
+      <SquareAvatarSkeleton sizePx={size} variant={shape} />
+      <div className={USER_TEXT_CLASS}>
+        <TextLineSkeleton type={compact ? 'h6' : 'h4'} className="w-28" />
+        {subtitle && <TextLineSkeleton type="h6" className="w-16" />}
       </div>
     </div>
   );