Contrib.social

Add progress spinner/message functionality to submit buttons

Open on Drupal.org →
Created on 13 January 2023, over 1 year ago
Updated 20 February 2024, 7 months ago

Problem/Motivation

Several frequently used forms in Drupal core can require the user to wait unreasonably long before there is visual evidence of them having clicked the submit button, in many cases, even on good infrastructure, this results in waits over 1 seconds which means the users flow of thought is interrupted, providing room for thoughts to wander to things like "huh, Drupal is a slow CMS"

Although there's room for improvement, the actual time it takes for Drupal to accomplish the tasks it sets out to do on submit is pretty reasonable, the problem is how long it takes for visual evidence that Drupal is attending to form-submit needs.

Fortunately, this can be addressed fairly easily with Javascript, which can quickly provide a progress spinner/message after submit is clicked without having to wait for things like expensive DB operations.

It should be possible to add this functionality to the form api so it can be customized with something like

$form['submit'] = [
  '#type' => 'submit',
  '#progress' => [
    'message' => t('we are making your tables'),
    'another_setting' => true, 
   ],
];

And this will inform how the JS acts for that particular button.

Steps to reproduce

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

📌 Task
Status

Needs work

Version

11.0 🔥

Component
Form  →

Last updated less than a minute ago

Created by

🇺🇸United States bnjmnm Ann Arbor, MI

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • Merge request !3243Issue #3333445: Add progress spinner/message functionality to submit buttons → (Open) created by bnjmnm
  • Comment over 1 year ago →
    🇺🇸United States tim.plunkett Philadelphia
  • Status changed to Closed: outdated about 1 year ago
  • Comment about 1 year ago →
    🇫🇮Finland lauriii Finland

    Closing this for now since this is likely not going to help with the Field UX efforts. Still a great idea so we should consider re-opening in future if we find another use case for this.

  • Comment 7 months ago →
    🇬🇧United Kingdom joachim

    I think this would be a nice UX addition to various forms. In core, there's the permissions form and the content translation form which are both very slow to submit.

    However, I've found a problem with the MR -- when a form's submit button has the '#progress' set, neither the validateForm() nor the submitForm() methods get any values in $form_state->getValues().

  • Status changed to Needs work 7 months ago
  • Comment 7 months ago →
    🇬🇧United Kingdom joachim

    I've had a go at fixing the issue with other non-progress buttons causing the progress-enabled button to get the message.

    That works... but with two progress-enabled buttons, the second one gets the message for either of them, so still not quite right :/

    Reopening this as I think there's a use case.

  • Comment 7 months ago →
    🇬🇧United Kingdom joachim

    > when a form's submit button has the '#progress' set, neither the validateForm() nor the submitForm() methods get any values in $form_state->getValues().

    The culprit is this line in the JS

    > button.parentNode.innerHTML += throbber;

    The moment the button is clicked, all the form elements get their values cleared.

    I have no idea why that's happening.

  • Comment 7 months ago →
    🇺🇸United States bnjmnm Ann Arbor, MI

    Re #10
    I haven't looked at this for a bit, but I recall running into multiple issues when there were DOM changes to the form. This could be mitigated by adding the progress throbber outside of the form, perhaps something like a bar at the top or bottom of the viewport. If we went that route, it may be simplest to not bother with progress messages in this issue's scope as I could see that opening a design rabbit hole that would probably be worthwhile, but not worth blocking some incremental progress.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024