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

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

@@ -20,10 +20,11 @@ import { Refresh02VrIcon } from '../icons-v2-generated/media-playback/refresh-02
 import { QuestionCircleIcon } from '../icons-v2-generated/signs-and-symbols/question-circle-icon';
 import { XmarkCircleIcon } from '../icons-v2-generated/signs-and-symbols/xmark-circle-icon';
 import { LoadingRegion } from '../loading/loading-region';
-import { UnifiedSkeleton } from '../loading/unified-skeleton';
+import { TextLineSkeleton, UnifiedSkeleton } from '../loading/unified-skeleton';
 import { Autocomplete, type AutocompleteOption } from '../ui/autocomplete';
 import { Button } from '../ui/button';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '../ui/dropdown-menu';
+import { useLoadingScope } from '../ui/loading-scope';
 import { Slider } from '../ui/slider';
 import { TabSelector } from '../ui/tab-selector';
 import { PushButtonSelector } from './push-button-selector';
@@ -115,6 +116,18 @@ function providerMark(providerType: string, stated: string | null | undefined, c
 
 const PAD_X = 'px-[var(--spacing-system-s)]';
 const ROW = 'flex items-center gap-[var(--spacing-system-s)]';
+/** The table's header row, body row and unit line, read by the table and by its skeleton. */
+const HEADER_ROW_CLASS = cn(
+  ROW,
+  PAD_X,
+  'shrink-0 py-[var(--spacing-system-xs)] uppercase tracking-[-0.02em] text-ods-text-secondary text-h5',
+);
+const BODY_ROW_CLASS = cn(ROW, PAD_X, 'py-[var(--spacing-system-xxs)] text-ods-text-primary text-h6');
+const UNIT_LINE_CLASS = cn(
+  'shrink-0 border-t border-ods-border py-[var(--spacing-system-xs)] text-ods-text-secondary text-h6',
+  PAD_X,
+);
+const TABS_ROW_CLASS = cn('shrink-0 border-b border-ods-border py-[var(--spacing-system-xs)]', PAD_X);
 /** Fixed width, so the figures of separate rows line up as columns. */
 const NUMBER_CELL = 'w-16 shrink-0 whitespace-nowrap text-right tabular-nums';
 
@@ -180,6 +193,7 @@ const TABLE_SKELETON_ROWS = 8;
  * about the subscription, not about the rates.
  */
 export function ModelTokenRates({ rates = [], status = 'ready', autoTopUpEnabled, className }: ModelTokenRatesProps) {
+  const loading = useLoadingScope() || status === 'loading';
   return (
     <div
       className={cn(
@@ -188,7 +202,7 @@ export function ModelTokenRates({ rates = [], status = 'ready', autoTopUpEnabled
       )}
     >
       {autoTopUpEnabled != null && <AutoTopUpLine enabled={autoTopUpEnabled} />}
-      {status === 'loading' ? (
+      {loading ? (
         <ModelTokenRatesSkeleton />
       ) : status === 'error' ? (
         <ModelTokenRatesUnavailable className="flex-1" />
@@ -268,22 +282,10 @@ function ModelTokenRatesTable({ rates }: { rates: readonly ModelTokenRate[] }) {
   return (
     <>
       {groups.length > 1 && (
-        <ProviderTabs
-          groups={groups}
-          value={group.providerType}
-          onValueChange={setPicked}
-          className={cn('shrink-0 border-b border-ods-border py-[var(--spacing-system-xs)]', PAD_X)}
-        />
+        <ProviderTabs groups={groups} value={group.providerType} onValueChange={setPicked} className={TABS_ROW_CLASS} />
       )}
       <div role="table" aria-label={MODEL_TOKEN_RATES_COPY.unit} className="flex min-h-0 flex-1 flex-col">
-        <div
-          role="row"
-          className={cn(
-            ROW,
-            PAD_X,
-            'shrink-0 py-[var(--spacing-system-xs)] uppercase tracking-[-0.02em] text-ods-text-secondary text-h5',
-          )}
-        >
+        <div role="row" className={HEADER_ROW_CLASS}>
           <span role="columnheader" className="min-w-0 flex-1 truncate">
             {MODEL_TOKEN_RATES_COPY.model}
           </span>
@@ -297,11 +299,7 @@ function ModelTokenRatesTable({ rates }: { rates: readonly ModelTokenRate[] }) {
         {/* Every model of the provider, scrolling under the pinned header. */}
         <div role="rowgroup" className="min-h-0 flex-1 overflow-y-auto">
           {group.rates.map(rate => (
-            <div
-              key={rate.modelName}
-              role="row"
-              className={cn(ROW, PAD_X, 'py-[var(--spacing-system-xxs)] text-ods-text-primary text-h6')}
-            >
+            <div key={rate.modelName} role="row" className={BODY_ROW_CLASS}>
               <span role="rowheader" className="min-w-0 flex-1 truncate">
                 {rate.displayName || rate.modelName}
               </span>
@@ -316,14 +314,7 @@ function ModelTokenRatesTable({ rates }: { rates: readonly ModelTokenRate[] }) {
         </div>
       </div>
       {/* The unit, stated once, where it has room to wrap. */}
-      <p
-        className={cn(
-          'shrink-0 border-t border-ods-border py-[var(--spacing-system-xs)] text-ods-text-secondary text-h6',
-          PAD_X,
-        )}
-      >
-        {MODEL_TOKEN_RATES_COPY.unit}
-      </p>
+      <p className={UNIT_LINE_CLASS}>{MODEL_TOKEN_RATES_COPY.unit}</p>
     </>
   );
 }
@@ -354,27 +345,29 @@ export function ModelTokenRatesSkeleton({
   /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
   region?: boolean;
 } = {}) {
-  const cells = (
-    <>
-      <div className="flex-1" />
-      <UnifiedSkeleton className="h-4 w-12" />
-      <UnifiedSkeleton className="h-4 w-12" />
-    </>
-  );
   return (
     <LoadingRegion label="Loading the model token rates" announce={region} className="min-h-0 flex-1 overflow-hidden">
-      <div className={cn('border-b border-ods-border py-[var(--spacing-system-xs)]', PAD_X)}>
+      <div className={TABS_ROW_CLASS}>
         <UnifiedSkeleton className={TABS_SKELETON_CLASS} />
       </div>
-      <div className={cn(ROW, PAD_X, 'py-[var(--spacing-system-xs)]')}>
-        <UnifiedSkeleton className="h-4 w-14" />
-        {cells}
+      {/* The column headings are the table's own words. */}
+      <div className={HEADER_ROW_CLASS}>
+        <span className="min-w-0 flex-1 truncate">{MODEL_TOKEN_RATES_COPY.model}</span>
+        <span className={NUMBER_CELL}>{MODEL_TOKEN_RATES_COPY.input}</span>
+        <span className={NUMBER_CELL}>{MODEL_TOKEN_RATES_COPY.output}</span>
       </div>
       {Array.from({ length: TABLE_SKELETON_ROWS }, (_, index) => (
         // biome-ignore lint/suspicious/noArrayIndexKey: identical placeholder rows
-        <div key={index} className={cn(ROW, PAD_X, 'py-[var(--spacing-system-xxs)]')}>
-          <UnifiedSkeleton className="h-4 w-36" />
-          {cells}
+        <div key={index} className={BODY_ROW_CLASS}>
+          <span className="min-w-0 flex-1">
+            <TextLineSkeleton type="inherit" as="span" className="w-36 max-w-full" />
+          </span>
+          <span className={NUMBER_CELL}>
+            <TextLineSkeleton type="inherit" as="span" className="ml-auto w-12" />
+          </span>
+          <span className={NUMBER_CELL}>
+            <TextLineSkeleton type="inherit" as="span" className="ml-auto w-12" />
+          </span>
         </div>
       ))}
     </LoadingRegion>
@@ -421,11 +414,8 @@ export interface ModelTokenExchangeProps {
 export const MODEL_TOKEN_EXCHANGE_BALANCE = 1_000_000;
 export const MODEL_TOKEN_EXCHANGE_RANGE = { min: 1_000_000, max: 50_000_000, step: 1_000_000 } as const;
 
-/** The provider rows drawn while the providers load: as many as OpenFrame has had. */
-const PROVIDER_PLACEHOLDERS = ['loading-1', 'loading-2', 'loading-3'] as const;
-
-/** A figure while it loads: a bar of the surrounding text's own line, inside its phrasing span. */
-const FIGURE_SKELETON_CLASS = 'inline-block h-[0.8lh] rounded align-middle';
+/** The provider rows drawn while the providers load: the step's fold (three rows beside the calculator's step). */
+const PROVIDER_ROWS_FOLD = 3;
 
 /** A model as a picker option: its name, its provider under it, the provider's mark beside it. */
 function modelOption(rate: ModelTokenRate): AutocompleteOption<string> {
@@ -474,14 +464,10 @@ function ExchangeFigure({
       <span
         className={cn('whitespace-nowrap tabular-nums text-ods-text-primary', size === 'hero' ? 'text-h1' : 'text-h2')}
       >
-        {loading ? <UnifiedSkeleton as="span" aria-hidden className={cn(FIGURE_SKELETON_CLASS, 'w-20')} /> : figure}
+        {loading ? <TextLineSkeleton type="inherit" as="span" className="w-20" /> : figure}
       </span>
       <span className="min-h-[2lh] text-ods-text-secondary text-h4">
-        {loading ? (
-          <UnifiedSkeleton as="span" aria-hidden className={cn(FIGURE_SKELETON_CLASS, 'w-full max-w-xs')} />
-        ) : (
-          words
-        )}
+        {loading ? <TextLineSkeleton type="inherit" as="span" className="w-full max-w-xs" /> : words}
       </span>
     </div>
   );
@@ -524,8 +510,8 @@ export function ModelTokenExchange({
   className,
 }: ModelTokenExchangeProps) {
   const copy = MODEL_TOKEN_RATES_COPY.exchange;
-  const loading = status === 'loading';
-  const failed = status === 'error' || (status === 'ready' && !rate);
+  const loading = useLoadingScope() || status === 'loading';
+  const failed = !loading && (status === 'error' || (status === 'ready' && !rate));
   const sliderId = useId();
   // The amount bought: what the visitor set, else what the host opens on. The slider reaches every preset.
   const [chosen, setChosen] = useState<number | null>(null);
@@ -586,31 +572,22 @@ export function ModelTokenExchange({
       </ExchangeStep>
 
       <ExchangeStep step={2} title={copy.use.title}>
-        {/*
-          While the providers load, the SAME selector draws placeholder rows (not its own skeleton,
-          whose rows are a different height), so the step is one height loading and loaded.
-        */}
+        {/* While the providers load the selector draws its own skeleton (its rows, the option row's own boxes). */}
         <PushButtonSelector<string>
-          options={
-            providers.length === 0 && !failed
-              ? PROVIDER_PLACEHOLDERS.map(id => ({
-                  id,
-                  name: '\u00a0',
-                  icon: <UnifiedSkeleton className="size-8 rounded" />,
-                  disabled: true,
-                }))
-              : providers.map(providerType => {
-                  // What the server stated for the provider rides its models' rows.
-                  const stated =
-                    models.find(option => option.providerType === providerType) ??
-                    (rate?.providerType === providerType ? rate : null);
-                  return {
-                    id: providerType,
-                    name: tokenRateProviderLabel(providerType, stated?.providerLabel),
-                    icon: providerMark(providerType, stated?.providerIcon, 'size-8 text-ods-text-secondary'),
-                  };
-                })
-          }
+          isLoading={providers.length === 0 && !failed}
+          skeletonCount={PROVIDER_ROWS_FOLD}
+          optionDescriptions={false}
+          options={providers.map(providerType => {
+            // What the server stated for the provider rides its models' rows.
+            const stated =
+              models.find(option => option.providerType === providerType) ??
+              (rate?.providerType === providerType ? rate : null);
+            return {
+              id: providerType,
+              name: tokenRateProviderLabel(providerType, stated?.providerLabel),
+              icon: providerMark(providerType, stated?.providerIcon, 'size-8 text-ods-text-secondary'),
+            };
+          })}
           selectedIds={provider ? [provider] : []}
           onSelectionChange={ids => {
             // A single choice that cannot be cleared: choosing the chosen provider changes nothing.
@@ -618,7 +595,10 @@ export function ModelTokenExchange({
           }}
           multiSelect={false}
         />
+        {/* While the rates load (the priming search included) the field draws its own skeleton, its label real. A
+            spinner is for a search the reader typed. */}
         <Autocomplete<string>
+          fieldLoading={loading}
           label={copy.use.model}
           value={rate?.modelName ?? null}
           onChange={modelName => {
@@ -628,7 +608,7 @@ export function ModelTokenExchange({
           inputValue={query}
           onInputChange={value => onQueryChange?.(value)}
           disableClientFilter
-          loading={searching}
+          loading={searching && Boolean(query)}
           disabled={providers.length === 0}
           placeholder={copy.use.search}
           noOptionsText={copy.use.noMatch}
@@ -658,7 +638,7 @@ export function ModelTokenExchange({
         >
           <span className="min-h-[2lh] text-ods-text-secondary text-h4">
             {loading || !rate ? (
-              <UnifiedSkeleton as="span" aria-hidden className={cn(FIGURE_SKELETON_CLASS, 'w-full max-w-xs')} />
+              <TextLineSkeleton type="inherit" as="span" className="w-full max-w-xs" />
             ) : (
               copy.charge.so(balancePrice ?? copy.buy.tokens(tokens), model)
             )}
@@ -666,7 +646,7 @@ export function ModelTokenExchange({
           {/* The number is the headline, alone on its line: a longer number never pushes its unit to a new line and the box taller. */}
           <span className="min-h-[1lh] whitespace-nowrap tabular-nums text-ods-text-primary text-h1">
             {loading || !rate ? (
-              <UnifiedSkeleton as="span" aria-hidden className={cn(FIGURE_SKELETON_CLASS, 'w-40')} />
+              <TextLineSkeleton type="inherit" as="span" className="w-40" />
             ) : (
               formatTokenAmount(tokensForBalance(balance, rate.inputTokenRate))
             )}
@@ -674,7 +654,7 @@ export function ModelTokenExchange({
           <span className="min-h-[1lh] text-ods-text-primary text-h3">{copy.charge.read}</span>
           <span className="min-h-[1lh] text-ods-text-secondary text-h4">
             {loading || !rate ? (
-              <UnifiedSkeleton as="span" aria-hidden className={cn(FIGURE_SKELETON_CLASS, 'w-48')} />
+              <TextLineSkeleton type="inherit" as="span" className="w-48" />
             ) : (
               copy.charge.orWritten(formatTokenAmount(tokensForBalance(balance, rate.outputTokenRate)))
             )}

package/src/components/features/notifications/approval-request-notification-tile.tsx

@@ -7,17 +7,15 @@ import { ExpandChevron } from '../../chat/expand-chevron';
 import { useCollapsible } from '../../chat/hooks/use-collapsible';
 import type { ChatApprovalStatus } from '../../chat/types';
 import { Button } from '../../ui/button';
-import { NotificationTile } from './notification-tile';
+import {
+  APPROVAL_BUTTON_CLASS,
+  APPROVAL_TOGGLE_BUTTON_CLASS,
+  LOCKSCREEN_APPROVAL_BUTTON_CLASS,
+  NotificationTile,
+} from './notification-tile';
 import { approvalMetaToBatchData, getApprovalMeta, resolutionToStatus } from './types';
 import type { Notification } from './types';
 
-/**
- * The two buttons on a lock-screen notification: compact and their own width.
- * Stretched to fill the tile they dwarfed the notification wherever the tile
- * is wide (a phone-width page shows it at the full content width).
- */
-const LOCKSCREEN_BUTTON = 'h-9 min-w-24';
-
 export interface ApprovalRequestNotificationTileProps {
   notification: Notification;
   onApprove: (approvalRequestId: string) => void | Promise<void>;
@@ -126,7 +124,7 @@ export function ApprovalRequestNotificationTile({
                 data-pressed={approvePressed || undefined}
                 className={cn(
                   'ease-[cubic-bezier(.2,0,0,1)] transition-[filter,transform] duration-200 motion-reduce:transition-none',
-                  lockscreen && LOCKSCREEN_BUTTON,
+                  lockscreen ? LOCKSCREEN_APPROVAL_BUTTON_CLASS : APPROVAL_BUTTON_CLASS,
                   approvePressed && 'scale-[0.98] brightness-75',
                 )}
               >
@@ -137,7 +135,7 @@ export function ApprovalRequestNotificationTile({
                 size="small"
                 onClick={() => resolve('rejected', onReject)}
                 disabled={processing}
-                className={lockscreen ? LOCKSCREEN_BUTTON : undefined}
+                className={lockscreen ? LOCKSCREEN_APPROVAL_BUTTON_CLASS : APPROVAL_BUTTON_CLASS}
               >
                 Reject
               </Button>
@@ -160,7 +158,7 @@ export function ApprovalRequestNotificationTile({
               }}
               aria-expanded={expanded}
               aria-label={toggleLabel}
-              className="ml-auto w-6 shrink-0 px-0 md:w-8"
+              className={APPROVAL_TOGGLE_BUTTON_CLASS}
             >
               <ExpandChevron expanded={expanded} />
             </Button>

package/src/components/features/notifications/notification-tile.tsx

@@ -2,11 +2,12 @@
 
 import { useEffect, useState, type ReactNode } from 'react';
 import Image from '../../../embed-shims/next-image';
+import { ICON_SIZE } from '../../../styles/component-sizes';
 import { cn } from '../../../utils/cn';
 import { formatTicketRelativeTime } from '../../../utils/date-utils';
 import { CheckCircleIcon } from '../../icons-v2-generated/signs-and-symbols/check-circle-icon';
 import { XmarkIcon } from '../../icons-v2-generated/signs-and-symbols/xmark-icon';
-import { UnifiedSkeleton } from '../../loading/unified-skeleton';
+import { InteractiveSkeleton, TextLineSkeleton, UnifiedSkeleton } from '../../loading/unified-skeleton';
 import { dotColorByVariant, progressColorByVariant as toastProgressColorByVariant } from '../../ui/toaster';
 import type { Notification, NotificationSeverity, NotificationVariant } from './types';
 
@@ -42,6 +43,10 @@ const progressColorByVariant: Record<NotificationVariant, string> = {
 const headerControlClass =
   'absolute inset-0 flex items-center justify-center text-ods-text-secondary transition-opacity duration-200 hover:text-ods-text-primary';
 
+/** The header's icon box and its trailing control's box, read by the tile and by its skeleton. */
+const TILE_ICON_BOX_CLASS = `flex ${ICON_SIZE.sm} shrink-0 items-center justify-center`;
+const TILE_CONTROL_BOX_CLASS = `relative ${ICON_SIZE.sm} shrink-0`;
+
 export interface NotificationTileProps {
   notification: Notification;
   liveDurationMs?: number;
@@ -153,7 +158,7 @@ export function NotificationTile({
       >
         {/* Header: icon/image + type label (both severity-colored) + time + dismiss/complete control. */}
         <div className="flex items-center gap-[var(--spacing-system-xs)]">
-          <span className={cn('flex size-4 shrink-0 items-center justify-center', typeColorByVariant[accentVariant])}>
+          <span className={cn(TILE_ICON_BOX_CLASS, typeColorByVariant[accentVariant])}>
             {image ? (
               <Image
                 src={image}
@@ -195,7 +200,7 @@ export function NotificationTile({
             <>
               {/* Live X and settled check swap in the same 16px slot; the inactive
               one is removed from the a11y tree and disabled, not just faded. */}
-              <span className="relative size-4 shrink-0">
+              <span className={TILE_CONTROL_BOX_CLASS}>
                 {[
                   {
                     active: isLive,
@@ -270,30 +275,54 @@ export function NotificationTile({
   );
 }
 
+/**
+ * The two buttons on a lock-screen approval tile: compact and their own width. Stretched to fill the tile they
+ * dwarfed the notification wherever the tile is wide (a phone-width page shows it at the full content width). Shared
+ * by the approval tile and its skeleton.
+ */
+export const LOCKSCREEN_APPROVAL_BUTTON_CLASS = 'h-9 min-w-24';
+
+/**
+ * The Approve and Reject buttons on a card approval tile: one fixed width that holds either label at every
+ * breakpoint, so the tile's skeleton draws the buttons at their loaded width. Shared by the tile and its skeleton.
+ */
+export const APPROVAL_BUTTON_CLASS = 'w-20';
+
+/** The card approval tile's trailing toggle (the command section's chevron). Shared by the tile and its skeleton. */
+export const APPROVAL_TOGGLE_BUTTON_CLASS = 'ml-auto w-6 shrink-0 px-0 md:w-8';
+
 export interface NotificationTileSkeletonProps {
   /** `approval`: the approval tile, which adds a row of small buttons under the body. */
   variant?: 'default' | 'approval';
+  /** The tile's `presentation`: a lock screen has no trailing control and its approval buttons are compact. */
+  presentation?: 'card' | 'lockscreen';
+  /** The lines the description takes (2 by default: a host that rotates tiles in one cell is as tall as its tallest tile). */
+  descriptionLines?: number;
   className?: string;
 }
 
-/** One row of the tile: the LINE BOX of the text it stands in for, with its bar centred inside. */
-function TileLine({ box, bar, width }: { box: string; bar: string; width: string }) {
+/** The header's icon and trailing control: the box each sits in, with a bar filling it. */
+function TileSquare({ box, bar }: { box: string; bar: string }) {
   return (
-    <span className={cn('flex items-center', box)}>
-      <UnifiedSkeleton as="span" width={width} className={bar} />
+    <span className={box}>
+      <UnifiedSkeleton as="span" width="1rem" className={cn('h-4', bar)} />
     </span>
   );
 }
 
 /**
- * A tile while its notification is read, box for box: the tile's frame and pad,
- * the header (icon, type, time, trailing control), a one-line title over a
- * TWO-line description (a host that rotates tiles in one cell is as tall as its
- * tallest tile), and for `approval` the button row. Each row is its text's line
- * box (h5/h6 20px, the h4 title 24px), so a host panel sizes itself against the
- * height it will have when loaded.
+ * A tile while its notification is read, box for box: the tile's frame and pad, the header (icon, type, time, and on
+ * a card the trailing control), a one-line title over the description's lines, and for `approval` the button row.
+ * Each text row is its text's own line box (`TextLineSkeleton` at the tile's type steps), so the skeleton is the
+ * loaded tile's height at every breakpoint.
  */
-export function NotificationTileSkeleton({ variant = 'default', className }: NotificationTileSkeletonProps) {
+export function NotificationTileSkeleton({
+  variant = 'default',
+  presentation = 'card',
+  descriptionLines = 2,
+  className,
+}: NotificationTileSkeletonProps) {
+  const lockscreen = presentation === 'lockscreen';
   return (
     <output
       aria-hidden
@@ -304,21 +333,27 @@ export function NotificationTileSkeleton({ variant = 'default', className }: Not
     >
       <span className="relative flex flex-col gap-[var(--spacing-system-xs)] p-[var(--spacing-system-s)]">
         <span className="flex items-center gap-[var(--spacing-system-xs)]">
-          <TileLine box="size-4" width="1rem" bar="h-4 rounded-[2px]" />
-          <TileLine box="h-5" width="7rem" bar="h-3 rounded" />
+          <TileSquare box={TILE_ICON_BOX_CLASS} bar="rounded-[2px]" />
+          <TextLineSkeleton as="span" type={lockscreen ? 'h6' : 'h5'} className="w-28" />
           <span className="min-w-0 flex-1" />
-          <TileLine box="h-5" width="3.5rem" bar="h-3 rounded" />
-          <TileLine box="size-4" width="1rem" bar="h-4 rounded-full" />
+          <TextLineSkeleton as="span" type="h6" className={cn('w-14', lockscreen && 'self-start')} />
+          {!lockscreen && <TileSquare box={TILE_CONTROL_BOX_CLASS} bar="rounded-full" />}
         </span>
         <span className="grid min-w-0 grid-cols-1">
-          <TileLine box="h-6" width="60%" bar="h-4 rounded" />
-          <TileLine box="h-5" width="88%" bar="h-3 rounded" />
-          <TileLine box="h-5" width="52%" bar="h-3 rounded" />
+          <TextLineSkeleton as="span" type="h4" className="w-3/5" />
+          <TextLineSkeleton as="span" type="h6" lines={descriptionLines} />
         </span>
         {variant === 'approval' && (
           <span className="flex w-full items-center gap-[var(--spacing-system-xs)]">
-            <TileLine box="h-6 md:h-8" width="5.5rem" bar="h-6 rounded md:h-8" />
-            <TileLine box="h-6 md:h-8" width="4.5rem" bar="h-6 rounded md:h-8" />
+            <InteractiveSkeleton.Button
+              size="small"
+              className={lockscreen ? LOCKSCREEN_APPROVAL_BUTTON_CLASS : APPROVAL_BUTTON_CLASS}
+            />
+            <InteractiveSkeleton.Button
+              size="small"
+              className={lockscreen ? LOCKSCREEN_APPROVAL_BUTTON_CLASS : APPROVAL_BUTTON_CLASS}
+            />
+            {!lockscreen && <InteractiveSkeleton.Button size="small" className={APPROVAL_TOGGLE_BUTTON_CLASS} />}
           </span>
         )}
       </span>

package/src/components/features/paths-display.tsx

@@ -3,6 +3,8 @@
 import type React from 'react';
 import { cn } from '../../utils/cn';
 import { Copy02Icon } from '../icons-v2-generated/documents/copy-02-icon';
+import { TextLineSkeleton } from '../loading/unified-skeleton';
+import { useLoadingScope } from '../ui/loading-scope';
 
 export interface PathsDisplayProps {
   /**
@@ -48,6 +50,18 @@ export interface PathsDisplayProps {
   leadingIcon?: React.ReactNode;
 }
 
+/** The list's layout, read by the list and by its skeleton, so the skeleton is the list's size. */
+const PATHS_CLASS = 'flex flex-col gap-3';
+const PATHS_TITLE_CLASS = 'text-ods-text-primary text-h4';
+const PATHS_DESCRIPTION_CLASS = 'text-ods-text-secondary text-h6';
+const PATHS_FRAME_CLASS = 'overflow-hidden rounded-[6px] border border-ods-border bg-ods-bg';
+const PATHS_ROW_CLASS = 'flex items-center gap-4 border-b border-ods-border p-4 last:border-b-0';
+const PATHS_COPY_BUTTON_CLASS =
+  'shrink-0 rounded-md text-ods-text-secondary transition-colors hover:text-ods-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-focus';
+/** How many rows the skeleton draws when the paths are read with the page. */
+export const PATHS_DISPLAY_SKELETON_ROWS = 2;
+const PATH_SKELETON_WIDTHS = ['w-3/5', 'w-2/5', 'w-1/2', 'w-1/3'] as const;
+
 /**
  * PathsDisplay - Unified component for displaying file/folder paths with copy functionality
  *
@@ -87,17 +101,32 @@ export function PathsDisplay({
   copyIconSize = 'w-6 h-6',
   leadingIcon,
 }: PathsDisplayProps) {
+  // Paths that are read arrive empty in a page's loading state: the list is its skeleton, never left out.
+  // Paths a page states itself (`OPENFRAME_PATHS`) are its own words and draw as they are.
+  const inScope = useLoadingScope();
   if (!paths || paths.length === 0) {
+    if (inScope) {
+      return (
+        <PathsDisplaySkeleton
+          title={title}
+          description={description}
+          showCopyButtons={showCopyButtons && !!onCopyPath}
+          copyIconSize={copyIconSize}
+          leadingIcon={leadingIcon}
+          className={className}
+        />
+      );
+    }
     return null;
   }
 
   return (
-    <div className={cn('flex flex-col gap-3', className)}>
-      {title && <div className="text-ods-text-primary text-h4">{title}</div>}
-      {description && <div className="text-ods-text-secondary text-h6">{description}</div>}
-      <div className="overflow-hidden rounded-[6px] border border-ods-border bg-ods-bg">
+    <div className={cn(PATHS_CLASS, className)}>
+      {title && <div className={PATHS_TITLE_CLASS}>{title}</div>}
+      {description && <div className={PATHS_DESCRIPTION_CLASS}>{description}</div>}
+      <div className={PATHS_FRAME_CLASS}>
         {paths.map(path => (
-          <div key={path} className="flex items-center gap-4 border-b border-ods-border p-4 last:border-b-0">
+          <div key={path} className={PATHS_ROW_CLASS}>
             {leadingIcon && <span className="shrink-0 text-ods-text-primary">{leadingIcon}</span>}
             <span className="min-w-0 flex-1 truncate text-ods-text-primary text-h4">{path}</span>
             {showCopyButtons && onCopyPath && (
@@ -105,7 +134,7 @@ export function PathsDisplay({
                 type="button"
                 onClick={() => onCopyPath(path)}
                 aria-label={`Copy ${path}`}
-                className="shrink-0 rounded-md text-ods-text-secondary transition-colors hover:text-ods-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-focus"
+                className={PATHS_COPY_BUTTON_CLASS}
               >
                 <Copy02Icon className={copyIconSize} />
               </button>
@@ -117,6 +146,44 @@ export function PathsDisplay({
   );
 }
 
+/**
+ * The paths list while its paths are read: the same frame, its title, description, leading icon and copy glyph for
+ * real, and `rows` rows with a bar of a path each.
+ */
+export function PathsDisplaySkeleton({
+  rows = PATHS_DISPLAY_SKELETON_ROWS,
+  title,
+  description,
+  showCopyButtons = true,
+  copyIconSize = 'w-6 h-6',
+  leadingIcon,
+  className,
+}: Pick<PathsDisplayProps, 'title' | 'description' | 'showCopyButtons' | 'copyIconSize' | 'leadingIcon' | 'className'> & {
+  rows?: number;
+}) {
+  return (
+    <div className={cn(PATHS_CLASS, className)} aria-hidden>
+      {title && <div className={PATHS_TITLE_CLASS}>{title}</div>}
+      {description && <div className={PATHS_DESCRIPTION_CLASS}>{description}</div>}
+      <div className={PATHS_FRAME_CLASS}>
+        {Array.from({ length: rows }, (_, i) => (
+          <div key={i} className={PATHS_ROW_CLASS}>
+            {leadingIcon && <span className="shrink-0 text-ods-text-primary">{leadingIcon}</span>}
+            <div className="min-w-0 flex-1">
+              <TextLineSkeleton type="h4" className={PATH_SKELETON_WIDTHS[i % PATH_SKELETON_WIDTHS.length]} />
+            </div>
+            {showCopyButtons && (
+              <span className={PATHS_COPY_BUTTON_CLASS}>
+                <Copy02Icon className={copyIconSize} />
+              </span>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
 /**
  * Pre-defined path sets for common use cases
  */