UX: Form submit button shows text change but no loading spinner/animation #130

New Issue

Closed

opened 2026-05-17 21:28:06 -05:00 by null · 0 comments

null commented

2026-05-17 21:28:06 -05:00

Owner

Problem

Both Contact and Support forms change the button text to 'Submitting...' during submission, but there is no visual spinner or animation. On slow connections, users may not notice the text change and could double-submit.

The form wrapper does add opacity-70 pointer-events-none during submission, which prevents double-clicks. But there is no visible loading indicator (spinner, progress bar, etc.).

Fix

Add a simple spinner SVG next to the 'Submitting...' text:

{mutation.isPending ? (
  <><Spinner className="mr-2 h-4 w-4 animate-spin" /> Submitting...</>
) : 'Request Consultation'}

Or use the lucide-react Loader2 icon with animate-spin.

Files

src/pages/Contact.jsx — submit button
src/pages/Support.jsx — submit button

Severity

Low — double-submit is prevented by pointer-events-none, but UX could be improved

## Problem Both Contact and Support forms change the button text to 'Submitting...' during submission, but there is no visual spinner or animation. On slow connections, users may not notice the text change and could double-submit. The form wrapper does add `opacity-70 pointer-events-none` during submission, which prevents double-clicks. But there is no visible loading indicator (spinner, progress bar, etc.). ## Fix Add a simple spinner SVG next to the 'Submitting...' text: ```jsx {mutation.isPending ? ( <><Spinner className="mr-2 h-4 w-4 animate-spin" /> Submitting...</> ) : 'Request Consultation'} ``` Or use the lucide-react Loader2 icon with animate-spin. ## Files - src/pages/Contact.jsx — submit button - src/pages/Support.jsx — submit button ## Severity Low — double-submit is prevented by pointer-events-none, but UX could be improved