Page MenuHomePhabricator

[S] Implement inline progress bar when submitting form
Open, Needs TriagePublic

Description

Users do not receive feedback when a form is being submitted, which may lead to confusion or multiple submissions.

Steps to Reproduce:

  1. Fill out the form.
  2. Click the submit button.

Expected:
The submit button should show a progress indicator while waiting for the API request to complete.

Actual:
No visual feedback is provided during form submission.

Solution:
Implement an inline progress bar as in T350801: Progress elements: Explore alternatives to Button loading states

Acceptance Criteria:

  • Progress indicator is visible to the user during form submission.

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript
kostajh added subscribers: TAdeleye_WMF, Madalina.

See also T350768: Disable submit button on form submission to prevent duplicate POST requests.

@Madalina @TAdeleye_WMF should we do this task as part of the MTP?

Tagging also Design-System-Team, as I don't think a "pending" state exists for the Button component (https://doc.wikimedia.org/codex/latest/components/demos/button.html), and I think it would make sense to define one. (Or, Codex could otherwise provide a standard way for dialogs to indicate form submission is in progress, as we had in OOUI.)

I'd leave it out of the MTP and add it to our next iteration.

CCiufo-WMF subscribed.

See also T350768: Disable submit button on form submission to prevent duplicate POST requests.

@Madalina @TAdeleye_WMF should we do this task as part of the MTP?

Tagging also Design-System-Team, as I don't think a "pending" state exists for the Button component (https://doc.wikimedia.org/codex/latest/components/demos/button.html), and I think it would make sense to define one. (Or, Codex could otherwise provide a standard way for dialogs to indicate form submission is in progress, as we had in OOUI.)

I believe we previously discussed this as a team and concluded that applying the disabled interactive state would be the recommendation until a more explicit loading state is considered for buttons, so for now I'd go for what's suggested in T350768.

In the meantime I've filed T350801: Progress elements: Explore alternatives to Button loading states to further discuss explicit guidelines from DST on "pending" button states.

kostajh renamed this task from [S] Implement progress indicator style on submit button to [S] Implement inline progress bar when submitting form.Nov 6 2024, 2:10 PM
kostajh updated the task description. (Show Details)
kostajh moved this task from Backlog to Triaged on the Incident-Reporting-System board.