Form validation error messages flash and disappear
Description
On the registration form, validation error messages appear for approximately 200ms then vanish. The user can see a brief red flash but cannot read the error text. This happens specifically when the form uses real-time validation (validate on change) combined with debounced input.
Reproduction Steps
- 1
Navigate to /register
- 2
Type an invalid email (e.g., 'test@')
- 3
Wait 300ms — observe red error flash (~200ms visible)
- 4
Error message disappears before it can be read
- 5
Type another character — same flash behavior
- 6
Tab away from field — error persists correctly (blur validation works)
Root Cause Hypothesis
The debounced validation runs 300ms after the last keystroke. When it finds an error, it sets the error state. However, the onChange handler also runs and clears the error state because the field is 'dirty' and re-validation hasn't completed yet. The race condition between synchronous state clearing and async validation causes the flash.
Resolution
Refactored validation to use a single source of truth: validation errors are only cleared when validation passes, never on input change alone. Added a `validating` state to show a subtle loading indicator during debounce delay. Errors now persist until the next successful validation pass.