Skip to content

[remediate-2026-08-18] UX-M5 The Button component's loading spinner has malformed SVG attributes from stray escape characters #457

Description

@juan294

Evidence type: [evidence]
Time horizon: Before launch
Files: frontend/src/components/ui/Button.tsx:52-55

What's happening: The loading <svg> is written with backslash-escaped quotes inside JSX attribute strings, which JSX doesn't interpret as escapes; the resulting attributes carry trailing backslashes, so fill="none\" and stroke="currentColor\" aren't valid paint values.

Why it matters: Every <Button isLoading> in the app renders a malformed, mis-sized, black-filled spinner instead of the intended ring — highly visible exactly when users are already waiting.

Recommendation: Remove the backslashes from all attribute strings, or replace with the existing ui/LoadingSpinner.

Expected impact: Correct loading affordance on every button in the app.

Effort estimate: S

Finding ID: UX-M5

Source: docs/agents/pre-launch-report.md

Metadata

Metadata

Assignees

No one assigned

    Labels

    mediumMedium-severity remediationuxUX and design systemwave-1-before-launchPromoted pre-launch remediation scope

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions