Skip to content

[Bug] TextArea: isLoading spinner is misaligned — should sit inside the resizable textarea (like the status icon) #4232

Description

@cixzhang

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

  1. Render a <TextArea isLoading /> (or a controlled TextArea whose optimisticValue !== value, which also sets busy).
  2. 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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workingcomponentNew or improved UI component

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions