@12-apps/ui 6.77.1 → 6.78.0

package/src/components/feedback/SequenceResolver/sequence-model.ts

@@ -0,0 +1,181 @@
+import type { SequenceItem, SequenceSummary } from './SequenceResolver.types';
+
+/**
+ * THE RUN, as pure data: what was answered or passed over, and what is ahead.
+ *
+ * The queue is the host's live data, not a snapshot. An answer can resolve
+ * other entries with it (one limit saved for every sibling of a product), a
+ * refetch can drop the entry just answered, and a realtime push can add one —
+ * so the run is NOT an index into the queue. It keeps the visited steps in the
+ * order they were visited, and the steps still ahead in the order the queue
+ * gave them; `syncRun` reconciles the second list with each new queue.
+ */
+
+/** How a visited step was left. */
+export type Visit<I extends SequenceItem, R> =
+  | { item: I; outcome: 'resolved'; result: R; alsoResolved?: number }
+  | { item: I; outcome: 'skipped' };
+
+export interface RunState<I extends SequenceItem, R> {
+  /** Every step left behind, oldest first. Back pops the last one. */
+  visits: Visit<I, R>[];
+  /** The steps still ahead; the first is on screen. Empty means the end screen. */
+  ahead: I[];
+  /**
+   * The step whose answer is being written, kept ahead even while the queue
+   * lacks it (the host's refetch may drop it before the write returns).
+   * Cleared when the run leaves it.
+   */
+  pinned?: string;
+  /**
+   * The steps Back returned to, kept ahead while the queue lacks them (the
+   * host's inverse ran, its refetch has not put the entry back yet). A SET:
+   * two Backs before one refetch hold both. A key leaves it when the queue
+   * confirms the entry or the run leaves the step.
+   */
+  held: readonly string[];
+}
+
+function dedupe<I extends SequenceItem>(items: readonly I[], skip: ReadonlySet<string>): I[] {
+  const seen = new Set(skip);
+  const out: I[] = [];
+  for (const item of items) {
+    if (seen.has(item.key)) continue;
+    seen.add(item.key);
+    out.push(item);
+  }
+  return out;
+}
+
+/** A fresh run over `queue` (a repeated key counts once). */
+export function startRun<I extends SequenceItem, R>(queue: readonly I[]): RunState<I, R> {
+  return { visits: [], ahead: dedupe(queue, new Set()), held: [] };
+}
+
+/**
+ * The run against a new queue.
+ *
+ * - A step ahead that the queue no longer has is dropped — it was resolved
+ *   elsewhere (siblings answered together, another device) — unless it is
+ *   `pinned` or `held`.
+ * - A held key the queue has again is released: the host confirmed it.
+ * - A queue entry the run has not seen is appended, in queue order.
+ * - The entries kept are refreshed from the queue (same key, newer data).
+ * - Visited steps are history and never change.
+ */
+export function syncRun<I extends SequenceItem, R>(
+  state: RunState<I, R>,
+  queue: readonly I[],
+): RunState<I, R> {
+  const fresh = new Map(queue.map((item) => [item.key, item] as const));
+  const kept = state.ahead.flatMap((item) => {
+    const next = fresh.get(item.key);
+    if (next) return [next];
+    return item.key === state.pinned || state.held.includes(item.key) ? [item] : [];
+  });
+  const known = new Set([...state.visits.map((visit) => visit.item.key), ...kept.map((item) => item.key)]);
+  const held = state.held.filter((key) => !fresh.has(key));
+  return { ...state, ahead: [...kept, ...dedupe(queue, known)], held };
+}
+
+/** Keep `key` ahead whatever the queue says, until the run moves on (see {@link RunState.pinned}). */
+export function pinRun<I extends SequenceItem, R>(state: RunState<I, R>, key: string): RunState<I, R> {
+  return { ...state, pinned: key };
+}
+
+/** The step on screen, or `undefined` at the end. */
+export function currentOf<I extends SequenceItem, R>(state: RunState<I, R>): I | undefined {
+  return state.ahead[0];
+}
+
+/** The pins once the run leaves `key`: neither the write pin nor the held set keeps it. */
+function leaving<I extends SequenceItem, R>(state: RunState<I, R>, key: string): Pick<RunState<I, R>, 'pinned' | 'held'> {
+  return {
+    pinned: state.pinned === key ? undefined : state.pinned,
+    held: state.held.filter((held) => held !== key),
+  };
+}
+
+/**
+ * Answer `item` — the step that was on screen when the answer began (a pending
+ * write keeps it there, see {@link RunState.pinned}). An item no longer ahead
+ * was already answered (a double call): a no-op, as at the end.
+ */
+export function resolveRun<I extends SequenceItem, R>(
+  state: RunState<I, R>,
+  result: R,
+  item: I | undefined = state.ahead[0],
+  alsoResolved = 0,
+): RunState<I, R> {
+  if (!item || !state.ahead.some((entry) => entry.key === item.key)) return state;
+  const visit: Visit<I, R> = alsoResolved > 0 ? { item, outcome: 'resolved', result, alsoResolved } : { item, outcome: 'resolved', result };
+  return {
+    visits: [...state.visits, visit],
+    ahead: state.ahead.filter((entry) => entry.key !== item.key),
+    ...leaving(state, item.key),
+  };
+}
+
+/**
+ * Pass over the step on screen. Given the `key` that was on screen when the
+ * skip began, a step that has moved on since (a double call) is left alone. At
+ * the end it is a no-op.
+ */
+export function skipRun<I extends SequenceItem, R>(state: RunState<I, R>, key?: string): RunState<I, R> {
+  const [item, ...rest] = state.ahead;
+  if (!item || (key !== undefined && item.key !== key)) return state;
+  return { visits: [...state.visits, { item, outcome: 'skipped' }], ahead: rest, ...leaving(state, item.key) };
+}
+
+/** The step Back would return to, or `undefined` on the first one. */
+export function previousOf<I extends SequenceItem, R>(state: RunState<I, R>): Visit<I, R> | undefined {
+  return state.visits[state.visits.length - 1];
+}
+
+/**
+ * Return to the previous step: it is on screen again, ahead of the rest, and
+ * held until the queue confirms it. Given the `key` Back began from, a step
+ * already returned to (a double call) is left alone.
+ */
+export function backRun<I extends SequenceItem, R>(state: RunState<I, R>, key?: string): RunState<I, R> {
+  const last = previousOf(state);
+  if (!last || (key !== undefined && last.item.key !== key)) return state;
+  const ahead = state.ahead.filter((item) => item.key !== last.item.key);
+  // The step being left keeps no write pin: `pinned` is for a write in flight
+  // on the step ON SCREEN, and a failed one must not hold an entry the
+  // host's refetch has since dropped (it was applied server-side).
+  const leftKey = state.ahead[0]?.key;
+  return {
+    ...state,
+    pinned: state.pinned === leftKey ? undefined : state.pinned,
+    visits: state.visits.slice(0, -1),
+    ahead: [last.item, ...ahead],
+    held: [...state.held.filter((held) => held !== last.item.key), last.item.key],
+  };
+}
+
+/** Where the run stands. */
+export function summaryOf<I extends SequenceItem, R>(state: RunState<I, R>): SequenceSummary {
+  const resolved = state.visits.filter((visit) => visit.outcome === 'resolved').length;
+  const alsoResolved = state.visits.reduce(
+    (sum, visit) => sum + (visit.outcome === 'resolved' ? Math.max(0, visit.alsoResolved ?? 0) : 0),
+    0,
+  );
+  return {
+    alsoResolved,
+    resolved,
+    skipped: state.visits.length - resolved,
+    total: state.visits.length + state.ahead.length,
+  };
+}
+
+/** 1-based position of the step on screen (`total + 1` never happens: at the end it is `total`). */
+export function positionOf<I extends SequenceItem, R>(state: RunState<I, R>): number {
+  return Math.min(state.visits.length + 1, state.visits.length + state.ahead.length);
+}
+
+/** How far along, 0..100. An empty run is complete. */
+export function progressOf<I extends SequenceItem, R>(state: RunState<I, R>): number {
+  const total = state.visits.length + state.ahead.length;
+  return total === 0 ? 100 : Math.round((state.visits.length / total) * 100);
+}

package/src/components/feedback/SequenceResolver/useSequenceRun.ts

@@ -0,0 +1,205 @@
+import { useCallback, useRef, useState } from 'react';
+
+import {
+  backRun,
+  currentOf,
+  pinRun,
+  previousOf,
+  resolveRun,
+  skipRun,
+  startRun,
+  syncRun,
+  type RunState,
+} from './sequence-model';
+import type { SequenceItem, SequenceResolveOptions } from './SequenceResolver.types';
+
+interface RunInputs<I extends SequenceItem, R> {
+  /** The resolver is open. Opening it, intro or not, starts a fresh run. */
+  open: boolean;
+  /** True while the run is on screen: open, and past the intro. */
+  active: boolean;
+  queue: readonly I[];
+  onBack?: (item: I, result: R) => Promise<void> | void;
+  /** The message for a rejection that carries none. */
+  failed: string;
+}
+
+export interface SequenceRun<I extends SequenceItem, R> {
+  run: RunState<I, R>;
+  busy: boolean;
+  error: string | null;
+  resolve: (result: R | PromiseLike<R>, options?: SequenceResolveOptions) => void;
+  skip: () => void;
+  back: () => void;
+}
+
+interface Tracked<I extends SequenceItem, R> {
+  run: RunState<I, R>;
+  /** The queue `run` was last reconciled with, by reference. */
+  queue: readonly I[];
+  active: boolean;
+  open: boolean;
+}
+
+/** The screen key an error belongs to: the step's key, or the end screen's. */
+const END_SCREEN = '\u0000end';
+const screenOf = (item: SequenceItem | undefined): string => item?.key ?? END_SCREEN;
+
+/** A rejection's message, and the screen it was raised on. */
+interface GateError {
+  message: string;
+  screen: string;
+}
+
+function isThenable<R>(value: R | PromiseLike<R>): value is PromiseLike<R> {
+  return typeof (value as { then?: unknown } | null)?.then === 'function';
+}
+
+function messageOf(reason: unknown, fallback: string): string {
+  if (reason instanceof Error && reason.message) return reason.message;
+  if (typeof reason === 'string' && reason) return reason;
+  return fallback;
+}
+
+/** What the pending work is: an answer being written, or Back's inverse. */
+type Work = 'resolve' | 'back';
+
+interface AsyncGate {
+  /** The pending work, or `null` when idle. */
+  busy: Work | null;
+  error: GateError | null;
+  /** True from the moment work starts — read before React re-renders with `busy`. */
+  isPending: () => boolean;
+  clearError: () => void;
+  /** Run `work`; on success apply `onDone`, on failure keep the screen and show why. */
+  settle: <T>(work: PromiseLike<T>, kind: Work, screen: string, onDone: (value: T) => void) => void;
+  /** Forget pending work (a restart): whatever settles later touches nothing. */
+  reset: () => void;
+}
+
+/**
+ * `busy` while a promise settles, the rejection's message as `error`, and
+ * nothing double-fired. Refs, not state, for the guard: a second tap in the
+ * same frame reads them before React has re-rendered with `busy`, and a
+ * promise settling after a restart must not touch the new run.
+ */
+function useAsyncGate(failed: string): AsyncGate {
+  const [busy, setBusy] = useState<Work | null>(null);
+  const [error, setError] = useState<GateError | null>(null);
+  const pending = useRef(false);
+  const generation = useRef(0);
+
+  const settle = useCallback(
+    <T,>(work: PromiseLike<T>, kind: Work, screen: string, onDone: (value: T) => void) => {
+      const mine = generation.current;
+      pending.current = true;
+      setBusy(kind);
+      setError(null);
+      const finish = (): boolean => {
+        if (mine !== generation.current) return false;
+        pending.current = false;
+        setBusy(null);
+        return true;
+      };
+      work.then(
+        (value) => {
+          if (finish()) onDone(value);
+        },
+        (reason: unknown) => {
+          if (finish()) setError({ message: messageOf(reason, failed), screen });
+        },
+      );
+    },
+    [failed],
+  );
+
+  const reset = (): void => {
+    generation.current += 1;
+    pending.current = false;
+    if (busy) setBusy(null);
+    if (error) setError(null);
+  };
+
+  return {
+    busy,
+    error,
+    isPending: () => pending.current,
+    clearError: () => setError(null),
+    settle,
+    reset,
+  };
+}
+
+/**
+ * The run, restarted from the queue each time the resolver OPENS (intro or
+ * not — a closed-and-reopened resolver never reports the previous run) and
+ * each time it becomes ACTIVE (the intro is dropped). While active, each new queue
+ * is reconciled into it during render (`syncRun`) rather than in an effect, so
+ * no frame ever shows a step the queue has already dropped.
+ */
+function useTrackedRun<I extends SequenceItem, R>(
+  inputs: { open: boolean; active: boolean; queue: readonly I[] },
+  onRestart: () => void,
+): { run: RunState<I, R>; update: (step: (run: RunState<I, R>) => RunState<I, R>) => void } {
+  const { open, active, queue } = inputs;
+  const [tracked, setTracked] = useState<Tracked<I, R>>(() => ({ run: startRun(queue), queue, active, open }));
+  let current = tracked;
+  if (active !== tracked.active || open !== tracked.open || queue !== tracked.queue) {
+    const restart = (active && !tracked.active) || (open && !tracked.open);
+    current = { run: restart ? startRun(queue) : syncRun(tracked.run, queue), queue, active, open };
+    if (restart) onRestart();
+    setTracked(current);
+  }
+  const update = useCallback((step: (run: RunState<I, R>) => RunState<I, R>) => {
+    setTracked((prev) => ({ ...prev, run: step(prev.run) }));
+  }, []);
+  return { run: current.run, update };
+}
+
+/** The run's state and its verbs — the index/back/skip/done logic, once (FUT-3671). */
+export function useSequenceRun<I extends SequenceItem, R>(inputs: RunInputs<I, R>): SequenceRun<I, R> {
+  const { open, active, queue, onBack, failed } = inputs;
+  const gate = useAsyncGate(failed);
+  const { run, update } = useTrackedRun<I, R>({ open, active, queue }, gate.reset);
+  const { settle, isPending, clearError } = gate;
+
+  const onScreen = currentOf(run);
+  const resolve = (result: R | PromiseLike<R>, options?: SequenceResolveOptions): void => {
+    const also = options?.alsoResolved ?? 0;
+    if (isPending() || !onScreen) return;
+    if (isThenable(result)) {
+      // The host's refetch may drop the entry before its write returns: keep
+      // it on screen meanwhile, and answer THIS entry when it does.
+      update((prev) => pinRun(prev, onScreen.key));
+      settle(result, 'resolve', onScreen.key, (value) => update((prev) => resolveRun(prev, value, onScreen, also)));
+      return;
+    }
+    clearError();
+    update((prev) => resolveRun(prev, result, onScreen, also));
+  };
+
+  const skip = (): void => {
+    if (isPending() || !onScreen) return;
+    clearError();
+    update((prev) => skipRun(prev, onScreen.key));
+  };
+
+  const back = (): void => {
+    const last = previousOf(run);
+    if (isPending() || !last) return;
+    if (last.outcome === 'resolved' && onBack) {
+      // `new Promise` so a handler that throws synchronously lands in the same
+      // rejection path as one that rejects.
+      const undo = new Promise<void>((done) => done(onBack(last.item, last.result)));
+      settle(undo, 'back', screenOf(onScreen), () => update((prev) => backRun(prev, last.item.key)));
+      return;
+    }
+    clearError();
+    update((prev) => backRun(prev, last.item.key));
+  };
+
+  // An error belongs to the screen it was raised on: once a queue change (or
+  // anything else) moves the run to another step, it no longer shows.
+  const error = gate.error && gate.error.screen === screenOf(onScreen) ? gate.error.message : null;
+  return { run, busy: gate.busy !== null, error, resolve, skip, back };
+}

package/src/components/feedback/index.ts

@@ -2,6 +2,7 @@ export * from './ConfirmAction';
 export * from './Dialog';
 export * from './Modal';
 export * from './NotificationStatusNotice';
+export * from './SequenceResolver';
 export * from './Sonner';
 export * from './StackedModal';
 export * from './Toast';

package/src/components/form/Button/Button.md

@@ -10,11 +10,11 @@ The Button component is a versatile and highly customizable interactive element
 - **Color Themes**: primary, secondary, success, warning, info, danger, neutral
 - **Size Options**: xs, sm, md, lg, xl
 - **Special Effects**: glow, pulse animations
-- **Loading States**: Built-in loading spinner
+- **Loading States**: Built-in loading spinner over the label, which stays as the button's accessible name
 - **Icon Support**: Leading icons with automatic loading state handling
 - **Renders As Anything**: `component` swaps the element, carrying that
   component's own props through the types (a router link, an `<a>`, a label)
-- **Accessibility**: Full ARIA support, keyboard navigation
+- **Accessibility**: Native `<button>` semantics, keyboard navigation; a loading button keeps its name and sets `aria-busy`
 - **Responsive Design**: Adapts to different screen sizes
 
 ## Usage
@@ -56,7 +56,7 @@ import { Button } from '@procurement/ui';
 | `variant`    | `'solid' \| 'outline' \| 'ghost' \| 'text' \| 'glass' \| 'gradient'`                | `'solid'`   | Visual style variant                      |
 | `color`      | `'primary' \| 'secondary' \| 'success' \| 'warning' \| 'info' \| 'danger' \| 'neutral'`      | `'primary'` | Color theme                               |
 | `size`       | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`                                        | `'md'`      | Button size                               |
-| `loading`    | `boolean`                                                                     | `false`     | Shows loading spinner and disables button |
+| `loading`    | `boolean`                                                                     | `false`     | Shows loading spinner over the label, sets `aria-busy`, disables button |
 | `disabled`   | `boolean`                                                                     | `false`     | Disables button interaction               |
 | `icon`       | `ReactNode`                                                                   | -           | Icon element to display before text       |
 | `glow`       | `boolean`                                                                     | `false`     | Adds glow visual effect                   |
@@ -274,6 +274,7 @@ The Button component includes comprehensive test IDs for reliable automated test
 | Button          | `{dataTestId}` or `'button'`       | Main button element                  |
 | Icon            | `{dataTestId}-icon` or `'button-icon'` | Icon wrapper when icon prop provided |
 | Loading Spinner | `{dataTestId}-loading` or `'button-loading'` | Circular progress during loading state |
+| Loading Label | `{dataTestId}-busy-label` or `'button-busy-label'` | The label kept, transparent, under the spinner while loading |
 
 ### Testing Best Practices
 

package/src/components/form/Button/Button.native.loading.tsx

@@ -0,0 +1,89 @@
+import * as React from 'react';
+import { ActivityIndicator, Platform, StyleSheet, View } from 'react-native';
+import type { TextStyle } from 'react-native';
+
+import { BUTTON_SPINNER_SIZE } from './Button.metrics';
+import { renderTextChildren } from '../../../platform/text-children';
+
+/**
+ * The native Button's loading state (FUT-3646): the label and icon stay laid
+ * out under the spinner — so the button keeps its width and shape — and the
+ * button keeps its name. Split from `Button.native.tsx` to keep that file
+ * under the line ceiling.
+ */
+
+/**
+ * The spinner over the label while loading, across the whole button; `role`
+ * comes from react-native's ActivityIndicator. It used to REPLACE the label, so
+ * a loading button had no accessible name (FUT-3646).
+ */
+export function Spinner({ color, testID }: { color: string; testID: string }): React.JSX.Element {
+  return (
+    <View style={styles.spinner}>
+      <ActivityIndicator
+        size={Platform.OS === 'ios' ? 'small' : BUTTON_SPINNER_SIZE}
+        color={color}
+        testID={testID}
+        accessibilityLabel="loading"
+      />
+    </View>
+  );
+}
+
+/**
+ * The button's name while loading: its text label, said outright. The label
+ * stays laid out (transparent) so the width holds, but a screen reader may skip
+ * a view at opacity 0 — VoiceOver does — so the name cannot ride on it alone.
+ * A caller's own `aria-label` still wins, being spread after this.
+ */
+export const loadingName = (loading: boolean | undefined, children: React.ReactNode): string | undefined =>
+  loading ? textOf(children) : undefined;
+
+/**
+ * The text of a label made only of strings and numbers — `Salvar`, or
+ * `Salvar {n}`, which React hands over as an array. Anything else (an element)
+ * has no text to say here, so the name is left to the label itself.
+ */
+function textOf(children: React.ReactNode): string | undefined {
+  const parts = React.Children.toArray(children);
+  const textual = parts.every((part) => typeof part === 'string' || typeof part === 'number');
+  return textual && parts.length > 0 ? parts.join('') : undefined;
+}
+
+/** Laid out but unseen under the spinner while loading, so the width holds. */
+export const hiddenWhile = (loading: boolean | undefined) => (loading ? styles.hidden : null);
+
+/** The text label; while loading, kept laid out but unseen under the spinner. */
+export function Label({
+  loading,
+  label,
+  testID,
+  children,
+}: {
+  loading: boolean | undefined;
+  label: TextStyle;
+  testID: string;
+  children: React.ReactNode;
+}): React.ReactNode {
+  const text = renderTextChildren(children, label, 1);
+  return loading ? (
+    <View style={styles.hidden} testID={testID}>
+      {text}
+    </View>
+  ) : (
+    text
+  );
+}
+
+const styles = StyleSheet.create({
+  // The label and icon under the spinner: laid out, so the width holds, but unseen.
+  hidden: {
+    opacity: 0,
+  },
+  spinner: {
+    ...StyleSheet.absoluteFillObject,
+    pointerEvents: 'none',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/components/form/Button/Button.native.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import {
-  ActivityIndicator,
   Animated,
   Easing,
   Platform,
@@ -20,7 +19,6 @@ import {
   BUTTON_ICON_GAP_UNITS,
   BUTTON_LINE_HEIGHT,
   BUTTON_SIZES,
-  BUTTON_SPINNER_SIZE,
   BUTTON_WASH_ALPHA,
   GLASS_BACKGROUND_ALPHA,
   GLASS_BACKGROUND_ALPHA_PRESSED,
@@ -35,7 +33,7 @@ import {
   quietInk,
 } from './Button.metrics';
 import type { ButtonProps, ButtonVariant } from './Button.types.native';
-import { renderTextChildren } from '../../../platform/text-children';
+import { hiddenWhile, Label, loadingName, Spinner } from './Button.native.loading';
 import { childTestId, resolveTestId, withoutTestIdProps } from '../../../platform/test-id';
 import { useUiTheme } from '../../../provider/use-ui-theme.native';
 import { resolveFieldEdge } from '../../../tokens/field-edge.core';
@@ -238,7 +236,8 @@ interface ButtonLook {
 function buttonLook(theme: UiTheme, props: ResolvedProps): ButtonLook {
   const { variant, color, size, loading, icon, children, glow, pulse, active, disabled, style } = props;
   const palette = buttonPalette(theme, color);
-  const iconOnly = !loading && icon != null && children == null;
+  // Loading keeps the icon (transparent), so it changes neither the shape nor the gap (FUT-3646).
+  const iconOnly = icon != null && children == null;
   const inactive = Boolean(disabled) || loading;
   const paint = inactive ? disabledPaint(theme, variant) : paintFor(theme, variant, color, palette, active);
   // The theme's one field radius, so a button and the input beside it agree.
@@ -248,7 +247,7 @@ function buttonLook(theme: UiTheme, props: ResolvedProps): ButtonLook {
   // ring turns it visible; on native the glow's shadow needs it visible too,
   // because a view's own shadow is clipped by its own overflow there.
   const overflow: ViewStyle['overflow'] = pulse || glow ? 'visible' : 'hidden';
-  const sized = sizeStyle(theme, size, iconOnly, icon != null && !loading);
+  const sized = sizeStyle(theme, size, iconOnly, icon != null);
   const glowing = glow && !inactive ? glowStyle(palette) : null;
 
   return {
@@ -275,18 +274,6 @@ function buttonLook(theme: UiTheme, props: ResolvedProps): ButtonLook {
   };
 }
 
-/** The spinner that replaces the label while loading; `role` comes from react-native's ActivityIndicator. */
-function Spinner({ color, testID }: { color: string; testID: string }): React.JSX.Element {
-  return (
-    <ActivityIndicator
-      size={Platform.OS === 'ios' ? 'small' : BUTTON_SPINNER_SIZE}
-      color={color}
-      testID={testID}
-      accessibilityLabel="loading"
-    />
-  );
-}
-
 export const Button = React.forwardRef<View, ButtonProps>((rawProps, ref) => {
   const resolved = resolveButtonProps(rawProps);
   const { loading, icon, iconPosition, pulse, ripple, children, onClick, onPress, ...others } = resolved;
@@ -306,12 +293,11 @@ export const Button = React.forwardRef<View, ButtonProps>((rawProps, ref) => {
     onPress?.(event);
   };
 
-  const iconNode =
-    !loading && icon ? (
-      <View style={styles.icon} testID={idFor('icon')}>
-        {icon}
-      </View>
-    ) : null;
+  const iconNode = icon ? (
+    <View style={[styles.icon, hiddenWhile(loading)]} testID={idFor('icon')}>
+      {icon}
+    </View>
+  ) : null;
 
   return (
     <Pressable
@@ -319,6 +305,7 @@ export const Button = React.forwardRef<View, ButtonProps>((rawProps, ref) => {
       role="button"
       aria-disabled={look.inactive}
       aria-busy={loading}
+      aria-label={loadingName(loading, children)}
       disabled={look.inactive}
       onPress={handlePress}
       android_ripple={ripple && !look.inactive ? { color: alpha(look.palette.main, 0.2), borderless: false } : undefined}
@@ -328,8 +315,11 @@ export const Button = React.forwardRef<View, ButtonProps>((rawProps, ref) => {
     >
       {pulse && !look.inactive ? <Pulse color={look.palette.main} radius={look.radius} testID={idFor('pulse')} /> : null}
       {iconPosition === 'left' ? iconNode : null}
-      {loading ? <Spinner color={look.label.color as string} testID={idFor('loading')} /> : renderTextChildren(children, look.label, 1)}
+      <Label loading={loading} label={look.label} testID={idFor('busy-label')}>
+        {children}
+      </Label>
       {iconPosition === 'right' ? iconNode : null}
+      {loading ? <Spinner color={look.label.color as string} testID={idFor('loading')} /> : null}
     </Pressable>
   );
 });