This task builds on the account creation form cleanup (T409236) by improving the existing username validation experience. Currently, validation triggers almost immediately as users type, jumping straight from no feedback to a validation result. This can feel abrupt - especially on mobile where the keyboard covers half the screen and users are still mid-thought on their username choice.
The goal is a more gradual validation UX: show a lightweight "checking" state early so users know the system is working, but delay the actual validation result until there's a meaningful typing pause. This gives users time to finish typing before seeing success or failure feedback.
User story & summary:
As a new user creating an account on mobile web, I want the username availability check to feel responsive but not rushed so that I have time to finish typing before seeing whether my username is taken.
Design:
Scope: this task is scoped to Mobile only.
Acceptance Criteria:
AC1 - Checking state
- Given I am on the account creation page on mobile web
- When I focus the username field and begin typing
- Then after 250ms, a "Checking availability" message with a spinner is displayed below the username field
AC2 - Validation timing
- Given the "Checking availability" message is displayed
- When I continue typing
- Then the system waits for a 2000ms typing pause (debounce) before running the availability check
AC3 - Available state
- Given the typing pause threshold has been reached and the availability check has completed
- When the username is available
- Then a success message "Username available" with a green checkmark replaces the checking message
AC4 - Taken state (warning)
- Given the typing pause threshold has been reached and the availability check has completed
- When the username is taken
- Then a warning message "[username] is taken" with a warning icon replaces the checking message
AC5 - Taken state (error on submit)
- Given I have entered a username that is taken
- When I submit the form by tapping "Create your account"
- Then an error message "[username] is taken" with an error icon is displayed below the username field
- And the username field is highlighted with an error state (red border)
AC6 - Revalidation on edit
- Given a validation result (available or taken) is currently displayed
- When I modify the username text
- Then the validation resets to the "Checking availability" state and a new debounce cycle begins
AC7 - Validation on blur
- Given I am typing in the username field and the debounce threshold has not yet been reached
- When I blur the field (e.g., tap into the password field)
- Then the system immediately runs the availability check without waiting for the full debounce
Open questions:
- What should the exact copy be for the "username is taken" message, and how should it work together with the existing error messages listed in https://phabricator.wikimedia.org/T414235#11549867?