Move submit button throbber into the button

The proposed patch is attached as promised.

Could we have screenshots/videos as appropriate and a merge request so the bots can test it?

I have created an alternative solution that overlays the throbber on top of the button text so the label is not removed, the patch is attached.

I have attached a video of the current behaviour and a screenshot of the current throbber placement as well as screenshots of the proposed solutions found in patch 2 and 3 respectively.

Current throbber placement:

Patch 2 solution:

Patch 3 solution:

What is the theme I see there?

This site uses a custom theme. I did look into the theme to see if this throbber was being controlled and styled there first but I found that the Webform module was handling this so my conclusion was that it should be updated in this contrib module. Of course this is an aesthetic change so I do not expect that everyone would find this to be the best solution, however, if the default implementation simply places the throbber after the button (see the $clickedButton.after(Drupal.theme.ajaxProgressThrobber()); line of code) then I think this is certainly a cleaner implementation. Still, this is open for debate though, one of the advantages of working on open source code like this is that we can improve things together to find better solutions.

Here is an updated patch that adds the aria-disabled=true attribute to the button when it is clicked for improved accessibility.

This feature should be handled via a front-end theme or custom code.

It is straightforward to provide a code snippet that overrides Drupal.behaviors.webformSubmitOnce and is placed in the custom JS via /admin/structure/webform/config/libraries.

You can share the code snippet as a recipe → .

For those who would like to make use of the patch despite the fact that it will not be included in a release - I have created and attached a more generic solution that has much less impact on the original code. The tradeoff is that you need to handle styling in your local theme for it to display perfectly. This is based on this approach to handle a throbber within a button - https://www.linkedin.com/posts/wesbos_how-do-you-make-a-button-that-does.... Here is a simple scss example of how it could be implemented:
&.submit-button {
display: grid;
grid-template-areas: "stack";

& .text {
grid-area: stack;
}

&.submit-clicked {
& .throbber {
grid-area: stack;
visibility: visible;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

& .text {
visibility: hidden;
}
}
}

I moved the button positioning back into the js - there were some issues applying the styling on time with custom classes added so this simplified things for me.