Skip to content

fix(ui): add reduced-motion-safe loading feedback to auth forms - #575

Draft
seonghobae wants to merge 14 commits into
developmentalfrom
palette-ux-button-loading-states-12489686687579034940
Draft

fix(ui): add reduced-motion-safe loading feedback to auth forms#575
seonghobae wants to merge 14 commits into
developmentalfrom
palette-ux-button-loading-states-12489686687579034940

Conversation

@seonghobae

@seonghobae seonghobae commented Sep 4, 2026

Copy link
Copy Markdown

Scope

Add a visible loading affordance to the existing submit-state copy used by user sign-in, admin sign-in, and password reset. The copy (Signing in... / Updating...) remains the meaningful state; the spinner is decorative (aria-hidden="true") and stops rotating when the user requests reduced motion.

The repeated visual contract is centralized in ButtonLoadingContent rather than copied across three forms. W3C WAI technique C39 recommends suppressing non-essential interaction-triggered motion when prefers-reduced-motion: reduce is active; this PR uses Tailwind's motion-reduce:animate-none variant for that boundary. This is a compatibility/accessibility measure, not a claim that a spinner by itself establishes WCAG conformance.

Review → RED → minimal GREEN

The generated branch originally mixed the UI change with a root .trivyignore suppressing CVE-2026-73088, CVE-2026-73089, and CVE-2026-40345. Those unrelated suppressions remain absent; this lane does not weaken security gates.

The reusable loading component was introduced through a focused RED/GREEN sequence. Hosted CI on exact predecessor fd56ef219939ef0a62e2d7bef927fcf90ca8622e then produced a concrete follow-up RED: typecheck, lint, CLI/shared tests, migrations, and 289 web tests succeeded, while src/components/ui/button.test.tsx alone failed with ReferenceError: React is not defined at the JSX render boundary. That is the causal CI failure; it is not a runner or PostgreSQL failure.

A normal concurrent descendant advanced the branch to da05a8f5075df1b6a5d3fd5501a2ba7607830e29. It added the React imports needed by that JSX test boundary, but also removed the buyer-visible Unreleased CHANGELOG entry and introduced unrelated import/indentation churn in user/admin login forms. The descendant was read and adopted rather than reset or force-pushed.

Current normal child 9edf40e3b79f847e16b01cd7d4d5b0b36f29220e preserves the causal React imports in button.test.tsx/button.tsx while restoring the three unrelated regressions to their prior validated blobs: CHANGELOG.md, user login, and admin login. The branch ref was advanced with force=false.

Fresh protected-base compare is ahead 14 / behind 0 with exactly six effective files: CHANGELOG.md, the three auth form surfaces, components/ui/button.tsx, and components/ui/button.test.tsx. No .trivyignore delta is present.

Exact current authority

  • protected/base: developmental@2fa92012bcf80acc1f921a4bafea76b3b1424b46
  • exact head: 9edf40e3b79f847e16b01cd7d4d5b0b36f29220e
  • lifecycle: open / Draft / mergeable
  • exact-head CI 33956097708: pending
  • SAST Semgrep 33956097697: pending
  • Security Scan 33956097713: queued
  • CodeQL PR 33956097700: queued

Queued/pending/predecessor evidence is non-passing. Promotion requires the unchanged exact head to pass the repository-authoritative frontend test/typecheck/lint/build and current security/review gates, plus browser evidence for normal and reduced-motion loading states. Do not transfer predecessor results, and do not manufacture a source-neutral retrigger commit.

UI Delivery Gate

  • 의도성: PASS — the spinner only supplements an existing asynchronous state.
  • 기능 완전성: PARTIAL — source and focused regression are present; exact-head hosted/browser execution is pending.
  • 콘텐츠 적합성: PASS — existing auth copy and Unreleased buyer-visible record are preserved; unrelated formatting/security changes were removed.
  • 복원력: PARTIAL — disabled-state behavior is preserved and reduced motion is encoded, but browser/a11y execution remains pending.
  • 증거성: PARTIAL — the predecessor CI failure has a concrete source-backed RCA and the causal fix is retained; the current head is not terminal GREEN yet.
  • 고유성: PASS — the change reuses Argos's existing button/card vocabulary rather than introducing a generic loading pattern.

Keep Draft. No self-approval, bypass, force update, destructive rebase, dummy rerun commit, scanner suppression, or predecessor-evidence transfer.

@google-labs-jules

Copy link
Copy Markdown

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.


For security, I will only act on instructions from the user who triggered this task.

@coderabbitai

coderabbitai Bot commented Sep 4, 2026

Copy link
Copy Markdown

Important

Draft PR not reviewed

Draft PRs are not automatically reviewed by default.

  • Trigger a manual review

To automatically review draft PRs, update your CodeRabbit configuration:

reviews:
  auto_review:
    drafts: true

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@seonghobae
seonghobae marked this pull request as draft September 5, 2026 03:09
@seonghobae seonghobae changed the title 🎨 Palette: 인증 폼 버튼에 시각적 로딩 상태 표시(Spinner) 추가 fix(ui): add reduced-motion-safe loading feedback to auth forms Sep 5, 2026
@seonghobae seonghobae added bug Something isn't working priority: medium Normal-priority or P2 work type: bug Defect or incorrect behavior labels Sep 7, 2026 — with ChatGPT Codex Connector
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something isn't working priority: medium Normal-priority or P2 work type: bug Defect or incorrect behavior

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant