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

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

@@ -4,20 +4,101 @@ import { Monitor } from 'lucide-react';
 import type React from 'react';
 import Link from '../../embed-shims/next-link';
 import { cn } from '../../utils/cn';
-import {
-  OrganizationCardSkeleton,
-  ORGANIZATION_CARD_RADIUS_CLASS,
-  ORGANIZATION_CARD_LAYOUT_CLASS,
-  ORGANIZATION_CARD_SURFACE_CLASS,
-  ORGANIZATION_CARD_HEADER_CLASS,
-  ORGANIZATION_CARD_TEXT_CLASS,
-  ORGANIZATION_CARD_DESCRIPTION_CLASS,
-  ORGANIZATION_CARD_FOOTER_CLASS,
-  ORGANIZATION_CARD_STATS_CLASS,
-  ORGANIZATION_CARD_STAT_CLASS,
-} from '../loading/organization-card-skeleton';
+import { MediaSkeleton, TextLineSkeleton } from '../loading/unified-skeleton';
+import { Button } from './button';
 import { EntityImage } from './entity-image';
-import { useLoadingScope } from './loading-scope';
+import { loadingItemProps, useLoadingScope } from './loading-scope';
+
+/** The card's corner radius, read by `OrganizationCard` and by its skeleton here. */
+export const ORGANIZATION_CARD_RADIUS_CLASS = 'rounded-[6px]';
+/** The card's layout, read by `OrganizationCard` and by its skeleton here, so the skeleton is the card's size. */
+export const ORGANIZATION_CARD_LAYOUT_CLASS = 'relative flex w-full flex-col gap-3 overflow-clip p-4';
+export const ORGANIZATION_CARD_SURFACE_CLASS = 'border border-ods-border bg-ods-card';
+export const ORGANIZATION_CARD_HEADER_CLASS = 'flex w-full items-start gap-3';
+export const ORGANIZATION_CARD_TEXT_CLASS = 'flex min-w-0 flex-1 flex-col justify-center py-2';
+export const ORGANIZATION_CARD_DESCRIPTION_CLASS = 'h-12 w-full overflow-hidden';
+export const ORGANIZATION_CARD_FOOTER_CLASS = 'flex w-full min-w-0 items-center justify-between gap-2';
+export const ORGANIZATION_CARD_STATS_CLASS = 'flex min-w-0 flex-shrink items-center gap-3 content-md:gap-4';
+export const ORGANIZATION_CARD_STAT_CLASS = 'flex flex-shrink-0 items-center gap-1';
+
+interface OrganizationCardSkeletonProps {
+  /**
+   * Additional CSS classes
+   */
+  className?: string;
+
+  /**
+   * Show footer stats area
+   */
+  showFooter?: boolean;
+
+  /**
+   * Show description area
+   */
+  showDescription?: boolean;
+
+  /** Optional tailwind classes to override the card container background & border */
+  containerClassName?: string;
+  /** `data-*` markers (`data-loading-item` on a grid's cards), on the card's root. */
+  [key: `data-${string}`]: unknown;
+}
+
+/** The two footer stats a loading card draws (a value and its label each). */
+const ORGANIZATION_CARD_SKELETON_STAT_WIDTHS = ['w-16', 'w-20'] as const;
+
+/**
+ * OrganizationCard while its organization is read: the card's own layout constants (frame, header, description
+ * box, footer), so it is the card's size by construction. Drawn only in a loading scope: the logo is `EntityImage` (its own loading form), the name and its
+ * second line `text-h3` and `text-h6` bars, the description two `text-h4` lines, the footer two stats.
+ */
+function OrganizationCardSkeleton({
+  className,
+  containerClassName,
+  showFooter = true,
+  showDescription = true,
+  ...props
+}: OrganizationCardSkeletonProps) {
+  return (
+    <div
+      className={cn(
+        ORGANIZATION_CARD_LAYOUT_CLASS,
+        containerClassName || ORGANIZATION_CARD_SURFACE_CLASS,
+        ORGANIZATION_CARD_RADIUS_CLASS,
+        className,
+      )}
+      aria-hidden
+      {...loadingItemProps(props)}
+    >
+      <div className={ORGANIZATION_CARD_HEADER_CLASS}>
+        <EntityImage src={null} />
+        <div className={ORGANIZATION_CARD_TEXT_CLASS}>
+          <TextLineSkeleton type="h3" className="w-3/4" />
+          <TextLineSkeleton type="h6" className="w-1/2" />
+        </div>
+      </div>
+      {showDescription && (
+        <div className={ORGANIZATION_CARD_DESCRIPTION_CLASS}>
+          <TextLineSkeleton type="h4" lines={2} className="w-full" />
+        </div>
+      )}
+      {showFooter && (
+        <div className={ORGANIZATION_CARD_FOOTER_CLASS}>
+          <div className={ORGANIZATION_CARD_STATS_CLASS}>
+            {ORGANIZATION_CARD_SKELETON_STAT_WIDTHS.map(width => (
+              <div key={width} className={ORGANIZATION_CARD_STAT_CLASS}>
+                <MediaSkeleton.Icon size="sm" />
+                <TextLineSkeleton type="h6" className={width} />
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+/** What the description box shows for an organization with no description. */
+const ORGANIZATION_CARD_EMPTY_MARK = '—';
 
 export interface Organization {
   id: string;
@@ -56,6 +137,8 @@ export interface OrganizationCardProps {
   }>;
   customFooter?: React.ReactNode;
   deviceCount?: number;
+  /** `data-*` markers (`data-loading-item` on a grid's cards), on the card's outermost element in both forms. */
+  [key: `data-${string}`]: unknown;
 }
 
 export function OrganizationCard({
@@ -68,15 +151,13 @@ export function OrganizationCard({
   footerStats,
   customFooter,
   deviceCount,
+  ...props
 }: OrganizationCardProps) {
+  const markers = loadingItemProps(props);
   // In a page's loading state the organization is read: the card is its skeleton.
   if (useLoadingScope()) {
     return (
-      <OrganizationCardSkeleton
-        className={className}
-        showDescription={Boolean(organization.description)}
-        showFooter={Boolean(customFooter || footerStats)}
-      />
+      <OrganizationCardSkeleton className={className} showFooter={Boolean(customFooter || footerStats)} {...markers} />
     );
   }
   const handleActionClick = (e: React.MouseEvent) => {
@@ -95,6 +176,7 @@ export function OrganizationCard({
         href && 'cursor-pointer hover:border-ods-border-hover hover:bg-ods-card-hover',
         className,
       )}
+      {...(href ? {} : markers)}
     >
       {/* Device count (top-right) */}
       {deviceCount !== undefined && (
@@ -106,19 +188,17 @@ export function OrganizationCard({
 
       {/* Action button (top-right) - only if no device count */}
       {!deviceCount && showActionButton && actionButton && (
-        <button
-          className={cn(
-            'absolute right-2 top-2 z-10 flex h-8 w-8 items-center justify-center rounded transition-colors',
-            actionButton.variant === 'primary'
-              ? 'bg-ods-accent text-ods-text-on-accent hover:bg-ods-accent-hover'
-              : 'text-ods-text-secondary hover:bg-ods-error-secondary hover:text-ods-error',
-          )}
+        <Button
+          variant={actionButton.variant === 'primary' ? 'accent' : 'transparent'}
+          size="icon-sm"
+          type="button"
+          className="absolute right-2 top-2 z-10"
           onClick={handleActionClick}
           disabled={actionButton.disabled}
           aria-label={actionButton.label}
         >
           {actionButton.icon}
-        </button>
+        </Button>
       )}
 
       {/* Header */}
@@ -138,14 +218,17 @@ export function OrganizationCard({
         </div>
       </div>
 
-      {/* Description */}
-      {organization.description && (
-        <div className={ORGANIZATION_CARD_DESCRIPTION_CLASS}>
+      {/* Description: most organizations have one, so its box is always drawn (the loading card draws it too); an
+          organization with none shows the empty mark. */}
+      <div className={ORGANIZATION_CARD_DESCRIPTION_CLASS}>
+        {organization.description ? (
           <p className="line-clamp-2 text-ods-text-primary text-h4" title={organization.description}>
             {organization.description}
           </p>
-        </div>
-      )}
+        ) : (
+          <p className="text-ods-text-secondary text-h4">{ORGANIZATION_CARD_EMPTY_MARK}</p>
+        )}
+      </div>
 
       {/* Footer */}
       {customFooter ? (
@@ -170,7 +253,7 @@ export function OrganizationCard({
 
   if (href) {
     return (
-      <Link href={href} className="block text-inherit no-underline">
+      <Link href={href} className="block text-inherit no-underline" {...markers}>
         {card}
       </Link>
     );

package/src/components/ui/page-actions.tsx

@@ -3,10 +3,11 @@
 import React from 'react';
 import { cn } from '../../utils/cn';
 import { Chevron02DownIcon } from '../icons-v2-generated';
-import { InteractiveSkeleton, UnifiedSkeleton } from '../loading/unified-skeleton';
+import { InteractiveSkeleton } from '../loading/unified-skeleton';
 import { ActionsMenuDropdown, type ActionsMenuGroup, type ActionsMenuItem } from './actions-menu';
 import type { ButtonProps, SplitButtonIconAction } from './button';
 import { Button, SplitButton } from './button';
+import { InertWhileLoading, useLoadingScope } from './loading-scope';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './tooltip';
 
 export type PageActionButton = {
@@ -18,7 +19,10 @@ export type PageActionButton = {
   onClick?: () => void;
   icon?: React.ReactNode;
   /** `overlay` and `glyph` are media chrome and `link` an inline text action; none is a page action, and SplitButton has no divider colour for them. */
-  variant?: Exclude<ButtonProps['variant'], 'overlay' | 'glyph' | 'link' | 'inverted'>;
+  variant?: Exclude<
+    ButtonProps['variant'],
+    'overlay' | 'glyph' | 'link' | 'inverted' | 'field' | 'row' | 'tab' | 'chip' | 'card' | 'cell'
+  >;
   disabled?: boolean;
   /**
    * For SplitButton actions (when `iconAction` is set): disables only the main
@@ -125,9 +129,18 @@ interface RenderOptions {
   iconOnly?: boolean;
   /** Stretch the button to fill flex parent (used in mobile bottom bar). */
   fullWidth?: boolean;
+  /** The page's action set is still being read: the button is drawn for real (the caller's copy is static) and inert. */
+  inert?: boolean;
 }
 
 function renderActionButton(action: PageActionButton, opts: RenderOptions = {}): React.ReactNode {
+  if (opts.inert) {
+    return (
+      <InertWhileLoading className={cn('inline-flex', opts.fullWidth && 'flex-1')}>
+        {renderRawActionButton(action, opts)}
+      </InertWhileLoading>
+    );
+  }
   const button = renderRawActionButton(action, opts);
   if (!action.tooltip) return button;
   return (
@@ -238,9 +251,9 @@ export interface PageActionsProps {
   selector?: React.ReactNode;
   className?: string;
   /**
-   * Render placeholders instead of the actions — for pages whose action SET
-   * depends on data still in flight. Opt-in: a page whose actions are already
-   * final while its title loads keeps rendering them.
+   * The action SET depends on data still in flight: the actions are drawn for real and inert (an empty list is one
+   * placeholder: the set is unknown). Opt-in: a page whose actions are already final while its title loads keeps
+   * rendering them live.
    */
   loading?: boolean;
 }
@@ -248,72 +261,18 @@ export interface PageActionsProps {
 const ACTIONS_GAP = 'gap-[var(--spacing-system-xs)]';
 
 /**
- * Placeholders for actions whose SHAPE isn't known yet — the page is still
- * loading the record that decides which actions exist (e.g. an archived entity
- * offers "Unarchive" where an active one offers "Edit").
+ * While the page reads the record that decides which actions exist (`loading`), the actions the caller passed are
+ * drawn for real and inert: a labelled or icon button is static copy, so its box and its label are the loaded ones,
+ * and an inert control promises nothing and cannot act on a wrong assumption before the data lands. The "…" trigger
+ * is drawn the same way (`ActionsMenuDropdown loading`).
  *
- * Why not render the actions anyway: a button is a promise. Painting the
- * optimistic set means a flash of the wrong header AND a live click target that
- * can act on the wrong assumption before the data lands. A grey box promises
- * nothing and can't be clicked.
- *
- * The placeholders are derived from the actions the caller passed — one per
- * action, each sized like the button that action WILL render — so the common
- * case (the data confirms that set) settles with no layout shift at all. Sizing
- * per action matters: `renderRawActionButton` collapses a label-less action (or
- * one flagged `iconOnlyOnDesktop`) to a square `size="icon"` button, and a
- * 140px-wide placeholder snapping to 48px is exactly the shift this is meant to
- * avoid.
- *
- * An empty list still yields one placeholder: `loading` means the action set is
- * unknown, not known-empty. Its shape comes from `emptyFallback`, because what
- * an empty header settles into differs per variant — `icon-buttons` and
- * `menu-primary` fall back to the square "…" overflow trigger, `primary-buttons`
- * has no overflow trigger at all and settles into a labelled button.
+ * An empty list is the one placeholder: `loading` means the action set is unknown, not known-empty, so nothing real can
+ * be drawn. Its shape is what an empty header settles into for the variant: `icon-buttons` and `menu-primary` the
+ * square "…" trigger (`icon`), `primary-buttons` a labelled button (`label`).
  */
-function ActionSkeletons({
-  actions,
-  fullWidth,
-  emptyFallback = 'icon',
-}: {
-  actions: PageActionButton[];
-  fullWidth?: boolean;
-  emptyFallback?: 'icon' | 'label';
-}) {
-  const items = actions.length > 0 ? actions : [null];
-  return (
-    <>
-      {items.map((action, idx) => {
-        // Mirrors `renderRawActionButton`'s `isIconOnly`. The mobile bottom bar
-        // stretches only labelled buttons (`fullWidth: !!action.label`), so an
-        // icon action keeps its square box there too.
-        const isIconOnly = action ? !action.label || !!action.iconOnlyOnDesktop : emptyFallback === 'icon';
-        // Static placeholder list — index IS the identity here.
-        const key = `action-skeleton-${idx}`;
-        // The square button's own size (`Button size="icon"`).
-        if (isIconOnly) return <InteractiveSkeleton.Button key={key} size="icon" />;
-        // A labelled action is the button it will render (its label is the caller's copy), drawn invisible under one
-        // bar, so the placeholder is that button's box at every breakpoint. Not a control while it loads.
-        if (action) {
-          return (
-            <span key={key} inert aria-hidden className={cn('relative inline-flex', fullWidth && 'flex-1')}>
-              <span className={cn('invisible inline-flex', fullWidth && 'flex-1')}>
-                {renderRawActionButton(action, { fullWidth })}
-              </span>
-              <UnifiedSkeleton className="absolute inset-0 h-full" />
-            </span>
-          );
-        }
-        // An unknown set that settles into a labelled button: the default button's size.
-        return <InteractiveSkeleton.Button key={key} size="default" className={fullWidth ? 'flex-1' : undefined} />;
-      })}
-    </>
-  );
-}
-
-/** Mobile placeholder for the variants that collapse to ONE trigger (icon button or "…"). */
-function MobileTriggerSkeleton() {
-  return <InteractiveSkeleton.Button size="icon" />;
+function UnknownActionSkeleton({ shape, fullWidth }: { shape: 'icon' | 'label'; fullWidth?: boolean }) {
+  if (shape === 'icon') return <InteractiveSkeleton.Button size="icon" />;
+  return <InteractiveSkeleton.Button size="default" className={fullWidth ? 'flex-1' : undefined} />;
 }
 
 export function PageActions({
@@ -322,8 +281,9 @@ export function PageActions({
   menuActions,
   selector,
   className,
-  loading,
+  loading: loadingProp,
 }: PageActionsProps) {
+  const loading = useLoadingScope() || loadingProp;
   if (variant === 'icon-buttons') {
     return (
       <IconButtonsVariant
@@ -356,7 +316,7 @@ function IconButtonsVariant({
   menuActions,
   selector,
   className,
-  loading,
+  loading: loadingProp,
 }: {
   actions: PageActionButton[];
   menuActions?: ActionsMenuGroup[];
@@ -364,6 +324,7 @@ function IconButtonsVariant({
   className?: string;
   loading?: boolean;
 }) {
+  const loading = useLoadingScope() || loadingProp;
   const desktopActions = actions.filter(a => !a.showOnlyMobile);
   const hasMenuActions = !!menuActions && menuActions.some(g => g.items.length > 0);
 
@@ -379,26 +340,22 @@ function IconButtonsVariant({
       {/* Desktop: every action as an icon button + optional overflow menu */}
       <div className={cn('hidden items-center content-md:flex', ACTIONS_GAP, className)}>
         {selector}
-        {loading ? (
-          <ActionSkeletons actions={desktopActions} />
-        ) : (
-          <>
-            {desktopActions.map((action, idx) => (
-              <React.Fragment key={actionKey(action, idx)}>{renderActionButton(action)}</React.Fragment>
-            ))}
-            {hasMenuActions && <ActionsMenuDropdown groups={menuActions} />}
-          </>
-        )}
+        {desktopActions.map((action, idx) => (
+          <React.Fragment key={actionKey(action, idx)}>{renderActionButton(action, { inert: loading })}</React.Fragment>
+        ))}
+        {/* An unknown set with no menu: the trigger's square. With a menu, the trigger already is it. */}
+        {loading && desktopActions.length === 0 && !hasMenuActions && <UnknownActionSkeleton shape="icon" />}
+        {hasMenuActions && <ActionsMenuDropdown groups={menuActions} loading={loading} />}
       </div>
 
       {/* Mobile: single icon button OR all actions merged into one "..." menu */}
       <div className={cn('flex content-md:hidden', className)}>
-        {loading ? (
-          <MobileTriggerSkeleton />
-        ) : useSingleActionMobile && singleAction ? (
-          renderActionButton(singleAction, { iconOnly: true })
+        {useSingleActionMobile && singleAction ? (
+          renderActionButton(singleAction, { iconOnly: true, inert: loading })
         ) : hasMobileMenuItems ? (
-          <ActionsMenuDropdown groups={mobileMenuGroups} />
+          <ActionsMenuDropdown groups={mobileMenuGroups} loading={loading} />
+        ) : loading ? (
+          <UnknownActionSkeleton shape="icon" />
         ) : null}
       </div>
     </>
@@ -418,12 +375,13 @@ function IconButtonsVariant({
 function PrimaryButtonsVariant({
   actions,
   className,
-  loading,
+  loading: loadingProp,
 }: {
   actions: PageActionButton[];
   className?: string;
   loading?: boolean;
 }) {
+  const loading = useLoadingScope() || loadingProp;
   // Sort: outline first, accent last (rightmost on desktop).
   const sortedActions = [...actions].sort((a, b) => {
     if (a.variant === 'accent' && b.variant !== 'accent') return 1;
@@ -436,19 +394,18 @@ function PrimaryButtonsVariant({
   return (
     <>
       <div className={cn('hidden items-center md:content-md:flex', ACTIONS_GAP, className)}>
-        {loading ? (
-          // No overflow trigger in this variant — an unknown action set settles
-          // into a labelled button, not a square one.
-          <ActionSkeletons actions={desktopActions} emptyFallback="label" />
-        ) : (
-          desktopActions.map((action, idx) => (
-            <React.Fragment key={`desktop-${actionKey(action, idx)}`}>{renderActionButton(action)}</React.Fragment>
-          ))
-        )}
+        {desktopActions.map((action, idx) => (
+          <React.Fragment key={`desktop-${actionKey(action, idx)}`}>
+            {renderActionButton(action, { inert: loading })}
+          </React.Fragment>
+        ))}
+        {/* No overflow trigger in this variant: an unknown action set settles into a labelled button. */}
+        {loading && desktopActions.length === 0 && <UnknownActionSkeleton shape="label" />}
       </div>
 
       <div className={cn('hidden items-center md:content-max-md:flex', ACTIONS_GAP, className)}>
-        {loading ? <MobileTriggerSkeleton /> : <CompactPrimaryActions actions={desktopActions} />}
+        <CompactPrimaryActions actions={desktopActions} loading={loading} />
+        {loading && desktopActions.length === 0 && <UnknownActionSkeleton shape="icon" />}
       </div>
 
       <MobileBottomActions actions={sortedActions} loading={loading} />
@@ -465,7 +422,7 @@ function MenuPrimaryVariant({
   menuActions,
   selector,
   className,
-  loading,
+  loading: loadingProp,
 }: {
   actions: PageActionButton[];
   menuActions: ActionsMenuGroup[];
@@ -473,6 +430,7 @@ function MenuPrimaryVariant({
   className?: string;
   loading?: boolean;
 }) {
+  const loading = useLoadingScope() || loadingProp;
   const desktopActions = actions.filter(a => !a.showOnlyMobile);
   const hasMenuActions = menuActions.some(g => g.items.length > 0);
 
@@ -483,28 +441,24 @@ function MenuPrimaryVariant({
     <>
       <div className={cn('hidden items-center content-md:flex', ACTIONS_GAP, className)}>
         {selector}
-        {loading ? (
-          <ActionSkeletons actions={desktopActions} />
-        ) : (
-          <>
-            {hasMenuActions && <ActionsMenuDropdown groups={menuActions} />}
-            {desktopActions.map((action, idx) => (
-              <React.Fragment key={`desktop-${actionKey(action, idx)}`}>
-                {renderActionButton({ ...action, variant: action.variant || 'accent' })}
-              </React.Fragment>
-            ))}
-          </>
-        )}
+        {hasMenuActions && <ActionsMenuDropdown groups={menuActions} loading={loading} />}
+        {desktopActions.map((action, idx) => (
+          <React.Fragment key={`desktop-${actionKey(action, idx)}`}>
+            {renderActionButton({ ...action, variant: action.variant || 'accent' }, { inert: loading })}
+          </React.Fragment>
+        ))}
+        {/* An unknown set with no menu: the trigger's square. With a menu, the trigger already is it. */}
+        {loading && desktopActions.length === 0 && !hasMenuActions && <UnknownActionSkeleton shape="icon" />}
       </div>
 
       <div className={cn('flex content-md:hidden', className)}>
-        {loading ? (
-          <MobileTriggerSkeleton />
-        ) : hasMobileMenuItems || selector ? (
+        {hasMobileMenuItems || selector ? (
           // The selector rides into the menu as its header row: on mobile the
           // title row has no room for it, and hiding it entirely (what
           // `icon-buttons` does) would leave no way to switch views at all.
-          <ActionsMenuDropdown groups={mobileMenuGroups} header={selector} />
+          <ActionsMenuDropdown groups={mobileMenuGroups} header={selector} loading={loading} />
+        ) : loading ? (
+          <UnknownActionSkeleton shape="icon" />
         ) : null}
       </div>
     </>
@@ -516,21 +470,25 @@ function MenuPrimaryVariant({
  * icon-only) actions stay buttons, the other labelled ones fold into one "..."
  * menu — unless that menu would hold a single action, which stays a button.
  */
-function CompactPrimaryActions({ actions }: { actions: PageActionButton[] }) {
+function CompactPrimaryActions({ actions, loading: loadingProp }: { actions: PageActionButton[]; loading?: boolean }) {
+  const loading = useLoadingScope() || loadingProp;
   const foldable = actions.filter(action => action.variant !== 'accent' && !!action.label);
   const fold = foldable.length > 1;
   const inline = fold ? actions.filter(action => !foldable.includes(action)) : actions;
   return (
     <>
-      {fold && <ActionsMenuDropdown groups={[{ items: foldable.flatMap(actionToMenuItems) }]} />}
+      {fold && <ActionsMenuDropdown groups={[{ items: foldable.flatMap(actionToMenuItems) }]} loading={loading} />}
       {inline.map((action, idx) => (
-        <React.Fragment key={`compact-${actionKey(action, idx)}`}>{renderActionButton(action)}</React.Fragment>
+        <React.Fragment key={`compact-${actionKey(action, idx)}`}>
+          {renderActionButton(action, { inert: loading })}
+        </React.Fragment>
       ))}
     </>
   );
 }
 
-function MobileBottomActions({ actions, loading }: { actions: PageActionButton[]; loading?: boolean }) {
+function MobileBottomActions({ actions, loading: loadingProp }: { actions: PageActionButton[]; loading?: boolean }) {
+  const loading = useLoadingScope() || loadingProp;
   return (
     <div
       className={cn(
@@ -543,15 +501,12 @@ function MobileBottomActions({ actions, loading }: { actions: PageActionButton[]
         ACTIONS_GAP,
       )}
     >
-      {loading ? (
-        <ActionSkeletons actions={actions} fullWidth emptyFallback="label" />
-      ) : (
-        actions.map((action, idx) => (
-          <React.Fragment key={`mobile-${actionKey(action, idx)}`}>
-            {renderActionButton(action, { fullWidth: !!action.label })}
-          </React.Fragment>
-        ))
-      )}
+      {actions.map((action, idx) => (
+        <React.Fragment key={`mobile-${actionKey(action, idx)}`}>
+          {renderActionButton(action, { fullWidth: !!action.label, inert: loading })}
+        </React.Fragment>
+      ))}
+      {loading && actions.length === 0 && <UnknownActionSkeleton shape="label" fullWidth />}
     </div>
   );
 }

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

@@ -4,6 +4,7 @@ import { forwardRef, useState } from 'react';
 import { cn } from '../../utils/cn';
 import { EyeIcon } from '../icons-v2-generated/interface/eye-icon';
 import { EyeOffIcon } from '../icons-v2-generated/interface/eye-off-icon';
+import { Button } from './button';
 import { Input, type InputProps } from './input';
 
 export type PasswordInputProps = Omit<InputProps, 'type' | 'endAdornment'>;
@@ -21,16 +22,17 @@ const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(({ disabl
       // Ellipsize an over-long password/value when the field isn't focused (per the mockup)
       className={cn('[&_input]:text-ellipsis', className)}
       endAdornment={
-        <button
+        <Button
+          variant="transparent"
+          size="icon-sm"
           type="button"
           tabIndex={-1}
           disabled={disabled}
           aria-label={visible ? 'Hide password' : 'Show password'}
           onClick={() => setVisible(value => !value)}
-          className="flex items-center text-ods-text-secondary transition-colors hover:text-ods-text-primary disabled:cursor-not-allowed"
         >
-          <Icon className="h-6 w-6" />
-        </button>
+          <Icon className="text-ods-text-secondary" />
+        </Button>
       }
       {...props}
     />

package/src/components/ui/people-cell.tsx

@@ -6,7 +6,7 @@ import { AvatarStack } from './avatar-stack';
 import { Button } from './button';
 import { FloatingTooltip } from './floating-tooltip';
 import { useLoadingScope } from './loading-scope';
-import { SquareAvatar, SquareAvatarSkeleton } from './square-avatar';
+import { SquareAvatar } from './square-avatar';
 import { TruncateText } from './truncate-text';
 
 /**
@@ -46,6 +46,8 @@ export interface PersonCellProps {
    * (the landing quote chips).
    */
   size?: 'sm' | 'lg';
+  /** The person is still being read: the cell draws its skeleton at its size. A loading scope does the same. */
+  loading?: boolean;
 }
 
 const PERSON_CELL_SIZE = {
@@ -64,9 +66,10 @@ export function PersonCell({
   onClick,
   actionTitle,
   size = 'sm',
+  loading,
 }: PersonCellProps) {
-  // In a page's loading state the person is read: the cell is its skeleton.
-  if (useLoadingScope()) return <PersonCellSkeleton size={size} />;
+  // In a page's loading state (or while the host reads the person) the cell is its skeleton.
+  if (useLoadingScope() || loading) return <PersonCellSkeleton size={size} />;
   const displayName = name || fallbackName;
   const scale = PERSON_CELL_SIZE[size];
   const row = (
@@ -101,11 +104,11 @@ export function PersonCell({
 }
 
 /** The cell while it loads: the SAME avatar box, gap and two lines (the name's type step, then the caption's). */
-export function PersonCellSkeleton({ size = 'sm' }: { size?: PersonCellProps['size'] }) {
+function PersonCellSkeleton({ size = 'sm' }: { size?: PersonCellProps['size'] }) {
   const scale = PERSON_CELL_SIZE[size];
   return (
     <div className={`${PERSON_ROW_CLASS} ${scale.gap}`} aria-hidden>
-      <SquareAvatarSkeleton size={scale.avatar} />
+      <SquareAvatar loading size={scale.avatar} />
       <div className="flex min-w-0 flex-1 flex-col">
         <TextLineSkeleton type={scale.primary} className="w-3/4" />
         <TextLineSkeleton type="h6" className="w-1/2" />