Summary
In TextArea's isLoading (busy) state, the loading Spinner is misaligned — it doesn't sit inside the textarea where you'd expect it. It should appear inside the resizable textarea (e.g. anchored to a corner of the field), consistent with how the status icon is placed.
Steps to reproduce
- Render a
<TextArea isLoading /> (or a controlled TextArea whose optimisticValue !== value, which also sets busy).
- Observe the spinner position.
Expected
Spinner appears inside the textarea's box (anchored to a corner, like the status icon), not disrupting layout.
Actual
Spinner is misaligned (see screenshot) — it renders in normal flow, not positioned within the field.
Root cause
In TextArea.tsx the spinner is rendered with no positioning styles at all:
{isBusy && <Spinner size="sm" />}
Compare the status icon right below it, which IS correctly anchored:
statusIcon: {
position: 'absolute',
top: spacingVars['--spacing-2'],
insetInlineEnd: spacingVars['--spacing-2'],
...
}
The spinner has no equivalent absolute-positioning style, so it falls into the flow of the relative wrapper instead of sitting inside the textarea's corner.
Fix direction
Give the busy spinner the same absolute-positioning treatment as statusIcon (anchored inside the field), reusing the existing spacing tokens. Consider: (a) the spinner and status icon can both be present — ensure they don't overlap (stack or share the same corner slot with the spinner taking precedence while busy); (b) the textarea reserves end-padding for the status icon via textareaWithStatus — the busy state should reserve the same space so text doesn't flow under the spinner.
Acceptance
- Spinner is visually anchored inside the resizable textarea (corner), aligned like the status icon.
- No overlap between spinner and status icon; end-padding reserved when busy.
- Storybook story for the isLoading state; test asserting the spinner renders with the positioned class.
Summary
In
TextArea'sisLoading(busy) state, the loadingSpinneris misaligned — it doesn't sit inside the textarea where you'd expect it. It should appear inside the resizable textarea (e.g. anchored to a corner of the field), consistent with how the status icon is placed.Steps to reproduce
<TextArea isLoading />(or a controlled TextArea whoseoptimisticValue !== value, which also sets busy).Expected
Spinner appears inside the textarea's box (anchored to a corner, like the status icon), not disrupting layout.
Actual
Spinner is misaligned (see screenshot) — it renders in normal flow, not positioned within the field.
Root cause
In
TextArea.tsxthe spinner is rendered with no positioning styles at all:Compare the status icon right below it, which IS correctly anchored:
The spinner has no equivalent absolute-positioning style, so it falls into the flow of the relative wrapper instead of sitting inside the textarea's corner.
Fix direction
Give the busy spinner the same absolute-positioning treatment as
statusIcon(anchored inside the field), reusing the existing spacing tokens. Consider: (a) the spinner and status icon can both be present — ensure they don't overlap (stack or share the same corner slot with the spinner taking precedence while busy); (b) the textarea reserves end-padding for the status icon viatextareaWithStatus— the busy state should reserve the same space so text doesn't flow under the spinner.Acceptance