Merge pull request #7 from chiscookeke11/codex/add-helper-for-stable-button-width

Add StableButtonContent helper to reserve button width during loading

Author: chiscookeke11

src/components/common/TradeDialog.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { Button } from '@/components/ui/button';
+import { StableButtonContent } from '@/components/ui/stable-button-content';
 import {
 	Dialog,
 	DialogContent,
@@ -55,7 +56,10 @@ const TradeDialog: React.FC<TradeDialogProps> = ({
 	const confirmLabel = side === 'buy' ? 'Confirm buy' : 'Confirm sell';
 
 	return (
-		<Dialog open={open} onOpenChange={next => !isSubmitting && onOpenChange(next)}>
+		<Dialog
+			open={open}
+			onOpenChange={next => !isSubmitting && onOpenChange(next)}
+		>
 			<DialogContent
 				className="max-w-md"
 				showCloseButton={!isSubmitting}
@@ -91,14 +95,18 @@ const TradeDialog: React.FC<TradeDialogProps> = ({
 						className={cn(
 							'w-full rounded-xl border bg-white/[0.04] px-3 py-2 text-white outline-none transition-colors',
 							'border-white/10 focus:border-amber-500/50 focus:ring-2 focus:ring-amber-500/15',
-							!amountValid && amountText.trim() ? 'border-red-500/40' : ''
+							!amountValid && amountText.trim()
+								? 'border-red-500/40'
+								: ''
 						)}
 						aria-label="Trade amount"
 						data-focus-order="1"
 						data-testid="trade-dialog-amount"
 					/>
 					<div className="flex flex-wrap items-center gap-2 text-xs text-white/45">
-						<span aria-label={`Current wallet holdings: ${formatNumber(availableHoldings)} keys`}>
+						<span
+							aria-label={`Current wallet holdings: ${formatNumber(availableHoldings)} keys`}
+						>
 							Holdings: {formatNumber(availableHoldings)} keys
 						</span>
 						{side === 'sell' &&
@@ -109,7 +117,9 @@ const TradeDialog: React.FC<TradeDialogProps> = ({
 									label="of holdings"
 									value={(parsedAmount / availableHoldings) * 100}
 									tone={
-										parsedAmount > availableHoldings ? 'negative' : 'neutral'
+										parsedAmount > availableHoldings
+											? 'negative'
+											: 'neutral'
 									}
 								/>
 							)}
@@ -145,10 +155,16 @@ const TradeDialog: React.FC<TradeDialogProps> = ({
 						type="button"
 						onClick={() => onConfirm(parsedAmount)}
 						disabled={!amountValid || isSubmitting}
+						aria-busy={isSubmitting || undefined}
 						data-focus-order="3"
 						data-testid="trade-dialog-confirm"
 					>
-						{isSubmitting ? 'Submitting…' : confirmLabel}
+						<StableButtonContent
+							isLoading={isSubmitting}
+							loadingLabel="Submitting…"
+						>
+							{confirmLabel}
+						</StableButtonContent>
 					</Button>
 				</DialogFooter>
 			</DialogContent>

src/components/common/__tests__/TradeDialog.focusOrder.test.tsx

@@ -10,7 +10,9 @@ import TradeDialog from '@/components/common/TradeDialog';
  * DOM (which would also swap them in the tab sequence) or remove markers.
  */
 describe('TradeDialog focus order', () => {
-	function renderDialog(overrides: Partial<React.ComponentProps<typeof TradeDialog>> = {}) {
+	function renderDialog(
+		overrides: Partial<React.ComponentProps<typeof TradeDialog>> = {}
+	) {
 		return render(
 			<TradeDialog
 				open={true}
@@ -45,9 +47,12 @@ describe('TradeDialog focus order', () => {
 		renderDialog();
 
 		const elements = Array.from(
-			document.querySelectorAll('[data-slot="dialog-close"], [data-focus-order]')
+			document.querySelectorAll(
+				'[data-slot="dialog-close"], [data-focus-order]'
+			)
 		).map(el => ({
-			identifier: el.getAttribute('data-testid') || el.getAttribute('data-slot'),
+			identifier:
+				el.getAttribute('data-testid') || el.getAttribute('data-slot'),
 			order: el.getAttribute('data-focus-order') || '0',
 		}));
 
@@ -76,6 +81,17 @@ describe('TradeDialog focus order', () => {
 		expect(cancel.getAttribute('tabindex')).not.toBe('-1');
 	});
 
+	it('reserves the confirm button width while showing the submitting state', () => {
+		renderDialog({ isSubmitting: true });
+
+		const confirm = screen.getByTestId('trade-dialog-confirm');
+
+		expect(confirm).toHaveAttribute('aria-busy', 'true');
+		expect(screen.getByText('Confirm buy')).toHaveClass('invisible');
+		expect(screen.getByText('Submitting…')).toBeVisible();
+		expect(confirm.querySelector('.animate-spin')).toBeInTheDocument();
+	});
+
 	it('preserves the same focus order in the sell variant', () => {
 		renderDialog({ side: 'sell' });
 

src/components/ui/__tests__/stable-button-content.test.tsx

@@ -0,0 +1,44 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { Button } from '@/components/ui/button';
+import { StableButtonContent } from '@/components/ui/stable-button-content';
+
+describe('StableButtonContent', () => {
+	it('keeps idle and loading content mounted so button width can be reserved', () => {
+		render(
+			<Button>
+				<StableButtonContent isLoading={false} loadingLabel="Saving…">
+					Save changes
+				</StableButtonContent>
+			</Button>
+		);
+
+		const idleContent = screen.getByText('Save changes');
+		const loadingContent = screen.getByText('Saving…');
+
+		expect(idleContent).toBeVisible();
+		expect(idleContent).not.toHaveAttribute('aria-hidden');
+		expect(loadingContent).toHaveClass('invisible');
+		expect(loadingContent).toHaveAttribute('aria-hidden', 'true');
+	});
+
+	it('reveals the loading label and spinner while reserving the idle label', () => {
+		render(
+			<Button aria-busy="true">
+				<StableButtonContent isLoading loadingLabel="Saving…">
+					Save changes
+				</StableButtonContent>
+			</Button>
+		);
+
+		const idleContent = screen.getByText('Save changes');
+		const loadingContent = screen.getByText('Saving…');
+
+		expect(idleContent).toHaveClass('invisible');
+		expect(idleContent).toHaveAttribute('aria-hidden', 'true');
+		expect(loadingContent).toBeVisible();
+		expect(loadingContent).not.toHaveAttribute('aria-hidden');
+		expect(document.querySelector('.animate-spin')).toBeInTheDocument();
+	});
+});

src/components/ui/stable-button-content.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { Loader2 } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+
+export interface StableButtonContentProps {
+	/** Whether the loading slot should be visible to sighted users and assistive tech. */
+	isLoading: boolean;
+	/** Button label or content shown when the action is idle. */
+	children: React.ReactNode;
+	/** Optional loading label. Defaults to keeping only the spinner visible. */
+	loadingLabel?: React.ReactNode;
+	/** Override the default spinner. Pass null to hide it. */
+	spinner?: React.ReactNode;
+	className?: string;
+	idleClassName?: string;
+	loadingClassName?: string;
+}
+
+/**
+ * Renders idle and loading button content in the same grid cell so both states
+ * contribute to the button's intrinsic width. The inactive state stays
+ * invisible (not `display: none`), which reserves enough space before a loading
+ * transition and prevents neighboring layout from jumping.
+ */
+export function StableButtonContent({
+	isLoading,
+	children,
+	loadingLabel,
+	spinner = <Loader2 className="size-4 animate-spin" aria-hidden="true" />,
+	className,
+	idleClassName,
+	loadingClassName,
+}: StableButtonContentProps) {
+	return (
+		<span className={cn('grid items-center justify-items-center', className)}>
+			<span
+				className={cn(
+					'col-start-1 row-start-1 inline-flex items-center justify-center gap-2',
+					isLoading && 'invisible',
+					idleClassName
+				)}
+				aria-hidden={isLoading || undefined}
+			>
+				{children}
+			</span>
+			<span
+				className={cn(
+					'col-start-1 row-start-1 inline-flex items-center justify-center gap-2',
+					!isLoading && 'invisible',
+					loadingClassName
+				)}
+				aria-hidden={!isLoading || undefined}
+			>
+				{spinner}
+				{loadingLabel}
+			</span>
+		</span>
+	);
+}