Refine Stimulus progress controller (button-longrunning)

- use milliseconds instead of seconds for duration
- allow `em` to be used without target attribute
- added connect method for labelTarget
- closes #8232
- closes #9910

client/src/controllers/ProgressController.test.js

@@ -75,7 +75,7 @@ describe('ProgressController', () => {
     // change to 4 seconds
     document
       .getElementById('button')
-      .setAttribute('data-w-progress-duration-seconds-value', '4');
+      .setAttribute('data-w-progress-duration-value', '4000');
 
     button.click();
     jest.runAllTimers();

client/src/controllers/ProgressController.ts

@@ -25,7 +25,7 @@ export class ProgressController extends Controller {
   static targets = ['label'];
   static values = {
     active: { default: '', type: String },
-    durationSeconds: { default: 30, type: Number },
+    duration: { default: 30000, type: Number },
     label: { default: '', type: String },
     loading: { default: false, type: Boolean },
   };
@@ -33,7 +33,7 @@ export class ProgressController extends Controller {
   declare activeClass: string;
   /** Label to use when loading */
   declare activeValue: string;
-  declare durationSecondsValue: number;
+  declare durationValue: number;
   /** Label to store the original text on the button */
   declare labelValue: string;
   declare loadingValue: boolean;
@@ -61,9 +61,26 @@ export class ProgressController extends Controller {
             `.${DEFAULT_CLASS}:not([${controllerAttribute}~='${identifier}'])`,
           )
           .forEach((button) => {
-            button.setAttribute(controllerAttribute, identifier);
-            button.setAttribute(actionAttribute, `${identifier}#activate`);
+            // set the controller attribute, appending to existing if present
+            button.setAttribute(
+              controllerAttribute,
+              [button.getAttribute(controllerAttribute) || '', identifier]
+                .filter(Boolean)
+                .join(' '),
+            );
 
+            // set the action attribute, appending to existing if present
+            button.setAttribute(
+              actionAttribute,
+              [
+                button.getAttribute(actionAttribute) || '',
+                `${identifier}#activate`,
+              ]
+                .filter(Boolean)
+                .join(' '),
+            );
+
+            // set the active text label to replace the legacy data-click-text
             const activeText = button.getAttribute('data-clicked-text');
             if (activeText) {
               button.setAttribute(
@@ -72,22 +89,19 @@ export class ProgressController extends Controller {
               );
               button.removeAttribute('data-clicked-text');
             }
-
-            const labelElement = button.querySelector('em');
-            if (labelElement) {
-              labelElement.setAttribute(`data-${identifier}-target`, 'label');
-            }
-
-            button.setAttribute(
-              `data-${identifier}-duration-seconds-value`,
-              '30',
-            );
           });
       },
       { once: true, passive: true },
     );
   }
 
+  connect() {
+    if (this.hasLabelTarget) return;
+    const labelElement = this.element.querySelector('em');
+    if (!labelElement) return;
+    labelElement.setAttribute(`data-${this.identifier}-target`, 'label');
+  }
+
   activate() {
     // If client-side validation is active on this form, and is going to block submission of the
     // form, don't activate the spinner
@@ -105,11 +119,9 @@ export class ProgressController extends Controller {
     window.setTimeout(() => {
       this.loadingValue = true;
 
-      const durationMs = this.durationSecondsValue * 1000;
-
       this.timer = window.setTimeout(() => {
         this.loadingValue = false;
-      }, durationMs);
+      }, this.durationValue);
     });
   }
 

docs/releases/5.0.md

@@ -73,3 +73,40 @@ The following features deprecated in Wagtail 4.0 have been fully removed. See [W
 ### `Page.get_static_site_paths` method removed
 
 The undocumented `Page.get_static_site_paths` method (which returns a generator of URL paths for use by static site generator packages) has been removed. Packages relying on this functionality should provide their own fallback implementation.
+
+### Progress button (`button-longrunning`) now implemented with Stimulus
+
+The `button-longrunning` class usage has been updated to use the newly adopted Stimulus approach, the previous data attributes will be deprecated in a future release.
+
+If using the old approach, ensure any HTML templates are updated to the new approach before the next major release.
+
+### Old syntax
+
+```html+django
+<button type="submit" class="button action-save button-longrunning" data-clicked-text="{% trans 'Creating…' %}">
+  {% icon name="spinner" %}
+  <em>{% trans 'Create' %}</em>
+</button>
+```
+
+### New syntax
+
+Minimum required attributes are `data-controller` and a `data-action`.
+
+```html+django
+<button type="submit" class="button action-save button-longrunning" data-controller="w-progress" data-action="w-progress#activate" data-w-progress-active-value="{% trans 'Creating…' %}">
+  {% icon name="spinner" %}
+  <em data-w-progress-target="label">{% trans 'Create' %}</em>
+</button>
+```
+
+### Examples of additional capabilities
+
+Stimulus [targets](https://stimulus.hotwired.dev/reference/targets) and [actions](https://stimulus.hotwired.dev/reference/actions) can be leveraged to revise the behaviour via data attributes.
+
+* `<button ... data-w-progress-duration-value="500" ...>` - custom duration can be declared on the element
+* `<button ... class="custom-button" data-w-progress-active-class="custom-button--busy" ...>` - custom 'active' class to replace the default `button-longrunning-active` (must be a single string without spaces)
+* `<button ... ><strong data-w-progress-target="label">{% trans 'Create' %}</strong></button>` - any element can be the button label (not just `em`)
+* `<button ... data-action="w-progress#activate focus->w-progress#activate" ...>` - any event can be used to trigger the in progress behaviour
+* `<button ... data-action="w-progress#activate:once" ...>` - only trigger the progress behaviour once
+* `<button ... data-action="readystatechange@document->w-progress#activate:once" data-w-progress-duration-value="5000" disabled ...>` - disabled on load (once JS starts) and becomes enabled after 5s duration

wagtail/admin/templates/wagtailadmin/generic/chooser/creation_form.html

@@ -17,7 +17,16 @@
             {% endfor %}
             <li>
                 {% if create_action_clicked_label %}
-                    <button type="submit" class="button button-longrunning" data-clicked-text="{{ create_action_clicked_label }}">{% icon name="spinner" %}<em>{{ create_action_label }}</em></button>
+                    <button
+                        type="submit"
+                        class="button button-longrunning"
+                        data-controller="w-progress"
+                        data-action="w-progress#activate"
+                        data-w-progress-active-value="{{ create_action_clicked_label }}"
+                    >
+                        {% icon name="spinner" %}
+                        <em data-w-progress-target="label">{{ create_action_label }}</em>
+                    </button>
                 {% else %}
                     <button type="submit" class="button">{{ create_action_label }}</button>
                 {% endif %}

wagtail/admin/templates/wagtailadmin/generic/multiple_upload/edit_form.html

@@ -13,7 +13,14 @@
             {% endif %}
         {% endfor %}
         <li>
-            <button type="submit" class="button button-longrunning">{% icon name="spinner" %}{% trans 'Update' %}</button>
+            <button
+                type="submit"
+                class="button button-longrunning"
+                data-controller="w-progress"
+                data-action="w-progress#activate"
+            >
+                {% icon name="spinner" %}{% trans 'Update' %}
+            </button>
             <a href="{{ delete_action }}" class="delete button no">{% trans "Delete" %}</a>
         </li>
     </ul>

wagtail/admin/templates/wagtailadmin/login.html

@@ -50,7 +50,16 @@
             {% endblock %}
             <footer class="form-actions">
                 {% block submit_buttons %}
-                    <button type="submit" class="button button-longrunning" data-clicked-text="{% trans 'Signing in…' %}">{% icon name="spinner" %}<em>{% trans 'Sign in' %}</em></button>
+                    <button
+                        type="submit"
+                        class="button button-longrunning"
+                        data-controller="w-progress"
+                        data-action="w-progress#activate"
+                        data-w-progress-active-value="{% trans 'Signing in…' %}"
+                    >
+                        {% icon name="spinner" %}
+                        <em data-w-progress-target="label">{% trans 'Sign in' %}</em>
+                    </button>
                 {% endblock %}
             </footer>
         </form>

wagtail/admin/templates/wagtailadmin/pages/action_menu/publish.html

@@ -1,5 +1,14 @@
 {% load i18n wagtailadmin_tags %}
-<button type="submit" name="action-publish" value="action-publish" class="button button-longrunning {% if is_revision %}warning{% endif %}" data-clicked-text="{% trans 'Publishing…' %}">
+<button
+    type="submit"
+    name="action-publish"
+    value="action-publish"
+    class="button button-longrunning {% if is_revision %}warning{% endif %}"
+    data-controller="w-progress"
+    data-action="w-progress#activate"
+    data-w-progress-active-value="{% trans 'Publishing…' %}"
+>
     {% if icon_name %}{% icon name=icon_name classname="button-longrunning__icon" %}{% endif %}
-    {% icon name="spinner" %}<em>{% if is_revision %}{% trans 'Publish this version' %}{% else %}{% trans 'Publish' %}{% endif %}</em>
+    {% icon name="spinner" %}
+    <em data-w-progress-target="label">{% if is_revision %}{% trans 'Publish this version' %}{% else %}{% trans 'Publish' %}{% endif %}</em>
 </button>

wagtail/admin/templates/wagtailadmin/pages/action_menu/save_draft.html

@@ -1,5 +1,12 @@
 {% load i18n wagtailadmin_tags %}
-<button type="submit" class="button action-save button-longrunning {% if is_revision %}warning{% endif %}" data-clicked-text="{% trans 'Saving…' %}">
+<button
+    type="submit"
+    class="button action-save button-longrunning {% if is_revision %}warning{% endif %}"
+    data-controller="w-progress"
+    data-action="w-progress#activate"
+    data-w-progress-active-value="{% trans 'Saving…' %}"
+>
     {% icon name="draft" classname="button-longrunning__icon" %}
-    {% icon name="spinner" %}<em>{% if is_revision %}{% trans 'Replace current draft' %}{% else %}{% trans 'Save draft' %}{% endif %}</em>
+    {% icon name="spinner" %}
+    <em data-w-progress-target="label">{% if is_revision %}{% trans 'Replace current draft' %}{% else %}{% trans 'Save draft' %}{% endif %}</em>
 </button>

wagtail/admin/templates/wagtailadmin/panels/publishing/schedule_publishing_panel.html

@@ -16,7 +16,13 @@
 {% dialog id='schedule-publishing-dialog' dialog_root_selector='[data-edit-form]' classname=classname icon_name='calendar-alt' title=schedule_publishing_dialog_title subtitle=schedule_publishing_dialog_subtitle message_icon_name='info' message_status='info' message_heading=message_heading message_description=message_description %}
     {% include 'wagtailadmin/panels/multi_field_panel.html' %}
 
-    <button type="submit" class="button action-save button-longrunning" data-clicked-text="{% trans 'Saving…' %}">
-        <em>{% trans 'Save schedule' %}</em>
+    <button
+        type="submit"
+        class="button action-save button-longrunning"
+        data-controller="w-progress"
+        data-action="w-progress#activate"
+        data-w-progress-active-value="{% trans 'Saving…' %}"
+    >
+        <em data-w-progress-target="label">{% trans 'Save schedule' %}</em>
     </button>
 {% enddialog %}

wagtail/admin/templates/wagtailadmin/shared/button.stories.tsx

@@ -273,47 +273,68 @@ const Template = ({ url }) => (
       Currently only <code>button</code> elements are supported.
     </p>
 
-    <button type="button" className="button button-longrunning">
-      <svg className="icon icon-spinner icon" aria-hidden="true">
-        <use href="#icon-spinner" />
-      </svg>
-      Click me
-    </button>
     <button
       type="button"
-      className="button button-secondary button-longrunning"
+      className="button button-longrunning"
+      data-controller="w-progress"
+      data-action="w-progress#activate"
+      data-w-progress-duration-value="5000"
     >
       <svg className="icon icon-spinner icon" aria-hidden="true">
         <use href="#icon-spinner" />
       </svg>
-      Click me
+      Click me 5s
     </button>
-    <button type="button" className="button button-small button-longrunning">
+    <button
+      type="button"
+      className="button button-secondary button-longrunning"
+      data-controller="w-progress"
+      data-action="w-progress#activate"
+      data-w-progress-duration-value="5000"
+    >
       <svg className="icon icon-spinner icon" aria-hidden="true">
         <use href="#icon-spinner" />
       </svg>
-      Click me
+      Click me 5s
+    </button>
+    <button
+      type="button"
+      className="button button-small button-longrunning"
+      data-controller="w-progress"
+      data-action="w-progress#activate"
+      data-w-progress-duration-value="5000"
+    >
+      <svg className="icon icon-spinner icon" aria-hidden="true">
+        <use href="#icon-spinner" />
+      </svg>
+      Click me 5s
     </button>
 
     <h4>Buttons where the text is replaced on click</h4>
     <button
       type="button"
       className="button button-longrunning"
-      data-clicked-text="Test"
+      data-controller="w-progress"
+      data-action="w-progress#activate"
+      data-w-progress-duration-value="5000"
+      data-w-progress-active-value="Test"
     >
       <svg className="icon icon-spinner icon" aria-hidden="true">
         <use href="#icon-spinner" />
       </svg>
-      <em>Click me</em>
+      <em data-w-progress-target="label">Click me</em>
     </button>
     <button
       type="button"
       className="button disabled button-longrunning--active"
+      data-controller="w-progress"
+      data-action="w-progress#activate"
+      data-w-progress-duration-value="5000"
     >
       <svg className="icon icon-spinner icon" aria-hidden="true">
         <use href="#icon-spinner" />
       </svg>
-      <span>Test</span>
+      <span data-w-progress-target="label">Test</span>
     </button>
 
     <h3>Mixtures</h3>

wagtail/admin/templates/wagtailadmin/shared/filters.html

@@ -3,7 +3,14 @@
 <div class="filterable__filters">
     <h2>{% trans 'Filter' %}</h2>
     <form method="get">
-        <button class="button button-longrunning" type="submit">{% icon name="spinner" %}{% trans 'Apply filters' %}</button>
+        <button
+            class="button button-longrunning"
+            type="submit"
+            data-controller="w-progress"
+            data-action="w-progress#activate"
+        >
+            {% icon name="spinner" %}{% trans 'Apply filters' %}
+        </button>
 
         {% for field in filters.form %}
             {% field field=field %}

wagtail/admin/templates/wagtailadmin/shared/workflow_action_modal.html

@@ -14,7 +14,16 @@
                     {% include "wagtailadmin/shared/field.html" with field=field %}
                 {% endif %}
             {% endfor %}
-            <li><button type="submit" class="button button-longrunning">{% icon name="spinner" %}{{ action_verbose }}</button></li>
+            <li>
+                <button
+                    type="submit"
+                    class="button button-longrunning"
+                    data-controller="w-progress"
+                    data-action="w-progress#activate"
+                >
+                    {% icon name="spinner" %}{{ action_verbose }}
+                </button>
+            </li>
         </ul>
     </form>
 </div>

wagtail/admin/templates/wagtailadmin/workflows/create.html

@@ -42,8 +42,15 @@
                     <li class="actions footer__container">
                         {% block form_actions %}
                             <div class="dropdown dropup dropdown-button match-width">
-                                <button type="submit" class="button action-save button-longrunning" data-clicked-text="{% trans 'Creating…' %}">
-                                    {% icon name="spinner" %}<em>{% trans 'Create' %}</em>
+                                <button
+                                    type="submit"
+                                    class="button action-save button-longrunning"
+                                    data-controller="w-progress"
+                                    data-action="w-progress#activate"
+                                    data-w-progress-active-value="{% trans 'Creating…' %}"
+                                >
+                                    {% icon name="spinner" %}
+                                    <em data-w-progress-target="label">{% trans 'Create' %}</em>
                                 </button>
                             </div>
                         {% endblock %}

wagtail/admin/templates/wagtailadmin/workflows/create_task.html

@@ -31,8 +31,15 @@
                     <li class="actions footer__container">
                         {% block form_actions %}
                             <div class="dropdown dropup dropdown-button match-width">
-                                <button type="submit" class="button action-save button-longrunning" data-clicked-text="{% trans 'Creating…' %}">
-                                    {% icon name="spinner" %}<em>{% trans 'Create' %}</em>
+                                <button
+                                    type="submit"
+                                    class="button action-save button-longrunning"
+                                    data-controller="w-progress"
+                                    data-action="w-progress#activate"
+                                    data-w-progress-active-value="{% trans 'Creating…' %}"
+                                >
+                                    {% icon name="spinner" %}
+                                    <em data-w-progress-target="label">{% trans 'Create' %}</em>
                                 </button>
                             </div>
                         {% endblock %}

wagtail/admin/templates/wagtailadmin/workflows/edit.html

@@ -65,8 +65,15 @@
                     <li class="actions footer__container">
                         {% block form_actions %}
                             <div class="dropdown dropup dropdown-button match-width">
-                                <button type="submit" class="button action-save button-longrunning" data-clicked-text="{% trans 'Saving…' %}">
-                                    {% icon name="spinner" %}<em>{% trans 'Save' %}</em>
+                                <button
+                                    type="submit"
+                                    class="button action-save button-longrunning"
+                                    data-controller="w-progress"
+                                    data-action="w-progress#activate"
+                                    data-w-progress-active-value="{% trans 'Saving…' %}"
+                                >
+                                    {% icon name="spinner" %}
+                                    <em data-w-progress-target="label">{% trans 'Save' %}</em>
                                 </button>
                                 <div class="dropdown-toggle">{% icon name="arrow-up" %}</div>
                                 <ul>

wagtail/admin/templates/wagtailadmin/workflows/edit_task.html

@@ -46,10 +46,10 @@
                                     class="button action-save button-longrunning"
                                     data-controller="w-progress"
                                     data-action="w-progress#activate"
-                                    data-w-progress-active-class="button-longrunning-active"
                                     data-w-progress-active-value="{% trans 'Saving…' %}"
                                 >
-                                    {% icon name="spinner" %}<em data-w-progress-target="label">{% trans 'Save' %}</em>
+                                    {% icon name="spinner" %}
+                                    <em data-w-progress-target="label">{% trans 'Save' %}</em>
                                 </button>
 
                                 <div class="dropdown-toggle">{% icon name="arrow-up" %}</div>

wagtail/admin/templates/wagtailadmin/workflows/task_chooser/includes/create_form.html

@@ -19,7 +19,16 @@
             {% endif %}
         {% endfor %}
         <li>
-            <button type="submit" class="button button-longrunning" data-clicked-text="{% trans 'Creating…' %}">{% icon name="spinner" %}<em>{% trans "Create" %}</em></button>
+            <button
+                type="submit"
+                class="button button-longrunning"
+                data-controller="w-progress"
+                data-action="w-progress#activate"
+                data-w-progress-active-value="{% trans 'Creating…' %}"
+            >
+                {% icon name="spinner" %}
+                <em data-w-progress-target="label">{% trans "Create" %}</em>
+            </button>
         </li>
     </ul>
 </form>

wagtail/admin/tests/pages/test_edit_page.py

@@ -1622,18 +1622,18 @@ class TestPageEdit(WagtailTestUtils, TestCase):
             )
 
         publish_button = """
-            <button type="submit" name="action-publish" value="action-publish" class="button button-longrunning " data-clicked-text="Publishing…">
+            <button type="submit" name="action-publish" value="action-publish" class="button button-longrunning " data-controller="w-progress" data-action="w-progress#activate" data-w-progress-active-value="Publishing…">
                 <svg class="icon icon-upload button-longrunning__icon" aria-hidden="true"><use href="#icon-upload"></use></svg>
 
-                <svg class="icon icon-spinner icon" aria-hidden="true"><use href="#icon-spinner"></use></svg><em>Publish</em>
+                <svg class="icon icon-spinner icon" aria-hidden="true"><use href="#icon-spinner"></use></svg><em data-w-progress-target="label">Publish</em>
             </button>
         """
         save_button = """
-            <button type="submit" class="button action-save button-longrunning " data-clicked-text="Saving…" >
+            <button type="submit" class="button action-save button-longrunning " data-controller="w-progress" data-action="w-progress#activate" data-w-progress-active-value="Saving…" >
                 <svg class="icon icon-draft button-longrunning__icon" aria-hidden="true"><use href="#icon-draft"></use></svg>
 
                 <svg class="icon icon-spinner icon" aria-hidden="true"><use href="#icon-spinner"></use></svg>
-                <em>Save draft</em>
+                <em data-w-progress-target="label">Save draft</em>
             </button>
         """
 

wagtail/contrib/forms/templates/wagtailforms/submissions_index.html

@@ -113,7 +113,14 @@
         <div class="filterable__filters">
             <h2>{% trans 'Filter' %}</h2>
             <form action="" method="get" novalidate>
-                <button class="button button-longrunning" type="submit">{% icon name="spinner" %}{% trans 'Apply filters' %}</button>
+                <button
+                    class="button button-longrunning"
+                    type="submit"
+                    data-controller="w-progress"
+                    data-action="w-progress#activate"
+                >
+                    {% icon name="spinner" %}{% trans 'Apply filters' %}
+                </button>
                 {% for field in select_date_form %}
                     {% include "wagtailadmin/shared/field_as_li.html" with field=field %}
                 {% endfor %}

wagtail/contrib/modeladmin/templates/modeladmin/create.html

@@ -50,8 +50,15 @@
                     <li class="actions footer__container">
                         {% block form_actions %}
                             <div class="dropdown dropup dropdown-button match-width">
-                                <button type="submit" class="button action-save button-longrunning" data-clicked-text="{% trans 'Saving…' %}">
-                                    {% icon name="spinner" %}<em>{% trans 'Save' %}</em>
+                                <button
+                                    type="submit"
+                                    class="button action-save button-longrunning"
+                                    data-controller="w-progress"
+                                    data-action="w-progress#activate"
+                                    data-w-progress-active-value="{% trans 'Saving…' %}"
+                                >
+                                    {% icon name="spinner" %}
+                                    <em data-w-progress-target="label">{% trans 'Save' %}</em>
                                 </button>
                             </div>
                         {% endblock %}

wagtail/contrib/modeladmin/templates/modeladmin/edit.html

@@ -9,8 +9,15 @@
 
 {% block form_actions %}
     <div class="dropdown dropup dropdown-button match-width">
-        <button type="submit" class="button action-save button-longrunning" data-clicked-text="{% trans 'Saving…' %}">
-            {% icon name="spinner" %}<em>{% trans 'Save' %}</em>
+        <button
+            type="submit"
+            class="button action-save button-longrunning"
+            data-controller="w-progress"
+            data-action="w-progress#activate"
+            data-w-progress-active-value="{% trans 'Saving…' %}"
+        >
+            {% icon name="spinner" %}
+            <em data-w-progress-target="label">{% trans 'Save' %}</em>
         </button>
 
         {% if user_can_delete %}

wagtail/contrib/settings/templates/wagtailsettings/edit.html

@@ -28,7 +28,16 @@
         <footer class="footer">
             <ul>
                 <li class="actions dropdown dropup match-width footer__container">
-                    <button type="submit" class="button button-longrunning" data-clicked-text="{% trans 'Saving…' %}">{% icon name="spinner" %}<em>{% trans 'Save' %}</em></button>
+                    <button
+                        type="submit"
+                        class="button button-longrunning"
+                        data-controller="w-progress"
+                        data-action="w-progress#activate"
+                        data-w-progress-active-value="{% trans 'Saving…' %}"
+                    >
+                        {% icon name="spinner" %}
+                        <em data-w-progress-target="label">{% trans 'Save' %}</em>
+                    </button>
                 </li>
             </ul>
         </footer>

wagtail/contrib/styleguide/templates/wagtailstyleguide/base.html

@@ -287,12 +287,56 @@
             <p>Currently only <code>button</code> elements are supported.</p>
             <p class="help-block help-warning">{% icon name='warning' %}Note that in some browsers, clicking these buttons minutely affects the appearance of Dropdown buttons, below. This is yet to be resolved.</p>
 
-            <button class="button button-longrunning" type="button">{% icon name="spinner" %}Click me</button>
-            <button class="button button-secondary button-longrunning" type="button">{% icon name="spinner" %}Click me</button>
-            <button class="button button-small button-longrunning" type="button">{% icon name="spinner" %}Click me</button>
+            <button
+                class="button button-longrunning"
+                type="button"
+                data-controller="w-progress"
+                data-action="w-progress#activate"
+                data-w-progress-duration-value="5000"
+            >
+                {% icon name="spinner" %}Click me 5s
+            </button>
+            <button
+                class="button button-longrunning"
+                type="button"
+                data-controller="w-progress"
+                data-action="readystatechange@document->w-progress#activate:once"
+                data-w-progress-duration-value="20000"
+                disabled
+            >
+                Disabled until 20s after load
+            </button>
+            <button
+                class="button button-secondary button-longrunning"
+                type="button"
+                data-controller="w-progress"
+                data-action="w-progress#activate"
+                data-w-progress-duration-value="5000"
+            >
+                {% icon name="spinner" %}Click me 5s
+            </button>
+            <button
+                class="button button-small button-longrunning"
+                type="button"
+                data-controller="w-progress"
+                data-action="w-progress#activate"
+                data-w-progress-duration-value="5000"
+            >
+                {% icon name="spinner" %}Click me 5s
+            </button>
 
             <h4>Buttons where the text is replaced on click</h4>
-            <button class="button button-longrunning" data-clicked-text="Test" type="button">{% icon name="spinner" %}<em>Click me</em></button>
+            <button
+                class="button button-longrunning"
+                type="button"
+                data-controller="w-progress"
+                data-action="w-progress#activate"
+                data-w-progress-active-value="Test"
+                data-w-progress-duration-value="5000"
+            >
+                {% icon name="spinner" %}
+                <em data-w-progress-target="label">Click me 5s</em>
+            </button>
 
             <h3>Mixtures</h3>
 

wagtail/documents/templates/wagtaildocs/documents/add.html

@@ -65,7 +65,16 @@
                     {% endif %}
                 {% endfor %}
                 <li>
-                    <button type="submit" class="button button-longrunning" data-clicked-text="{% trans 'Uploading…' %}">{% icon name="spinner" %}<em>{% trans 'Upload' %}</em></button>
+                    <button
+                        type="submit"
+                        class="button button-longrunning"
+                        data-controller="w-progress"
+                        data-action="w-progress#activate"
+                        data-w-progress-active-value="{% trans 'Uploading…' %}"
+                    >
+                        {% icon name="spinner" %}
+                        <em data-w-progress-target="label">{% trans 'Upload' %}</em>
+                    </button>
                 </li>
             </ul>
         </form>

wagtail/embeds/templates/wagtailembeds/chooser/chooser.html

@@ -11,7 +11,17 @@
                 {% for field in form %}
                     {% include "wagtailadmin/shared/field_as_li.html" with field=field %}
                 {% endfor %}
-                <li><button type="submit" class="button  button-longrunning">{% icon name="spinner" %}<em>{% trans 'Insert' %}</em></button></li>
+                <li>
+                    <button
+                        type="submit"
+                        class="button button-longrunning"
+                        data-controller="w-progress"
+                        data-action="w-progress#activate"
+                    >
+                        {% icon name="spinner" %}
+                        <em data-w-progress-target="label">{% trans 'Insert' %}</em>
+                    </button>
+                </li>
             </ul>
         </form>
     </section>

wagtail/images/templates/wagtailimages/chooser/confirm_duplicate_upload.html

@@ -23,7 +23,12 @@
         </a>
         <form method="POST">
             {% csrf_token %}
-            <a href="{{ cancel_duplicate_upload_action }}" class="use-existing-image button button-longrunning">
+            <a
+                href="{{ cancel_duplicate_upload_action }}"
+                class="use-existing-image button button-longrunning"
+                data-controller="w-progress"
+                data-action="w-progress#activate"
+            >
                 {% trans "Use existing and delete new" %}
             </a>
         </form>

wagtail/images/templates/wagtailimages/images/confirm_duplicate_upload.html

@@ -6,7 +6,13 @@
         <figcaption>{{ existing_image.title }}</figcaption>
     </figure>
     <div>
-        <button class="button button-longrunning confirm-upload">{% icon name="spinner" %}{% trans 'Keep new image' %}</button>
+        <button
+            class="button button-longrunning confirm-upload"
+            data-controller="w-progress"
+            data-action="w-progress#activate"
+        >
+            {% icon name="spinner" %}{% trans 'Keep new image' %}
+        </button>
         <form method="POST">
             {% csrf_token %}
             <a href="{{ delete_action }}" class="delete button no">{% trans "Delete new image" %}</a>

wagtail/snippets/templates/wagtailsnippets/snippets/action_menu/publish.html

@@ -1,5 +1,14 @@
 {% load i18n wagtailadmin_tags %}
-<button type="submit" name="{{ name }}" value="{{ name }}" class="button action-save button-longrunning{% if is_revision %} warning{% endif %}" data-clicked-text="{% trans 'Publishing…' %}">
+<button
+    type="submit"
+    name="{{ name }}"
+    value="{{ name }}"
+    class="button action-save button-longrunning{% if is_revision %} warning{% endif %}"
+    data-controller="w-progress"
+    data-action="w-progress#activate"
+    data-w-progress-active-value="{% trans 'Publishing…' %}"
+>
     {% icon name=icon_name classname="button-longrunning__icon" %}
-    {% icon name="spinner" %}<em>{% if is_revision %}{% trans 'Publish this version' %}{% else %}{% trans 'Publish' %}{% endif %}</em>
+    {% icon name="spinner" %}
+    <em data-w-progress-target="label">{% if is_revision %}{% trans 'Publish this version' %}{% else %}{% trans 'Publish' %}{% endif %}</em>
 </button>

wagtail/snippets/templates/wagtailsnippets/snippets/action_menu/save.html

@@ -1,8 +1,14 @@
 {% load i18n wagtailadmin_tags %}
-<button type="submit" class="button action-save button-longrunning{% if is_revision %} warning{% endif %}" data-clicked-text="{% trans 'Saving…' %}">
+<button
+    type="submit"
+    class="button action-save button-longrunning{% if is_revision %} warning{% endif %}"
+    data-controller="w-progress"
+    data-action="w-progress#activate"
+    data-w-progress-active-value="{% trans 'Saving…' %}"
+>
     {% icon name=icon_name classname="button-longrunning__icon" %}
     {% icon name="spinner" %}
-    <em>
+    <em data-w-progress-target="label">
         {% if is_revision %}
             {% if draftstate_enabled %}
                 {% trans 'Replace current draft' %}

wagtail/snippets/tests/test_locking.py

@@ -428,7 +428,7 @@ class TestEditLockedSnippet(BaseLockingTestCase):
                 # Should show Save action menu item
                 self.assertContains(
                     response,
-                    f"<em>{self.save_button_label}</em>",
+                    f'<em data-w-progress-target="label">{self.save_button_label}</em>',
                     html=True,
                 )
 
@@ -486,7 +486,7 @@ class TestEditLockedSnippet(BaseLockingTestCase):
         # Should not show Save action menu item
         self.assertNotContains(
             response,
-            f"<em>{self.save_button_label}</em>",
+            f'<em data-w-progress-target="label">{self.save_button_label}</em>',
             html=True,
         )
 
@@ -540,7 +540,7 @@ class TestEditLockedSnippet(BaseLockingTestCase):
         # Should not show Save action menu item
         self.assertNotContains(
             response,
-            f"<em>{self.save_button_label}</em>",
+            f'<em data-w-progress-target="label">{self.save_button_label}</em>',
             html=True,
         )
 
@@ -591,7 +591,7 @@ class TestEditLockedSnippet(BaseLockingTestCase):
         # Should show Save action menu item
         self.assertContains(
             response,
-            f"<em>{self.save_button_label}</em>",
+            f'<em data-w-progress-target="label">{self.save_button_label}</em>',
             html=True,
         )
 
@@ -636,7 +636,7 @@ class TestEditLockedSnippet(BaseLockingTestCase):
         # Should show Save action menu item
         self.assertContains(
             response,
-            f"<em>{self.save_button_label}</em>",
+            f'<em data-w-progress-target="label">{self.save_button_label}</em>',
             html=True,
         )
 

wagtail/snippets/tests/test_snippets.py

@@ -964,7 +964,7 @@ class TestCreateDraftStateSnippet(WagtailTestUtils, TestCase):
         # The publish button should have name="action-publish"
         self.assertContains(
             response,
-            '<button type="submit" name="action-publish" value="action-publish" class="button action-save button-longrunning" data-clicked-text="Publishing…">',
+            '<button\n    type="submit"\n    name="action-publish"\n    value="action-publish"\n    class="button action-save button-longrunning"\n    data-controller="w-progress"\n    data-action="w-progress#activate"\n',
         )
         # The status side panel should not be shown
         self.assertNotContains(
@@ -1661,7 +1661,7 @@ class TestEditDraftStateSnippet(BaseTestSnippetEditView):
         # The publish button should have name="action-publish"
         self.assertContains(
             response,
-            '<button type="submit" name="action-publish" value="action-publish" class="button action-save button-longrunning" data-clicked-text="Publishing…">',
+            '<button\n    type="submit"\n    name="action-publish"\n    value="action-publish"\n    class="button action-save button-longrunning"\n    data-controller="w-progress"\n    data-action="w-progress#activate"\n',
         )
 
         # The status side panel should show "No publishing schedule set" info
@@ -4217,7 +4217,7 @@ class TestSnippetRevisions(WagtailTestUtils, TestCase):
         # The publish button should have name="action-publish"
         self.assertContains(
             response,
-            '<button type="submit" name="action-publish" value="action-publish" class="button action-save button-longrunning warning" data-clicked-text="Publishing…">',
+            '<button\n    type="submit"\n    name="action-publish"\n    value="action-publish"\n    class="button action-save button-longrunning warning"\n    data-controller="w-progress"\n    data-action="w-progress#activate"\n',
         )
 
         # Should not show the Unpublish action menu item