From e7a5b6e548e4c665cfed77940ca1a0ea5fe02788 Mon Sep 17 00:00:00 2001
From: Urban Sanden <hej@urre.me>
Date: Fri, 20 Feb 2026 15:35:05 +0100
Subject: [PATCH 1/2] IS-11032 Change submit button to have spinners and
 disabled behavior on submit

---
 .../attribute-prompt/index.vm                 |  7 +-
 .../auto-link-account/index.vm                | 15 +--
 .../opt-in-mfa/manage.vm                      | 19 ++--
 .../opt-in-mfa/recovery-code.vm               |  5 +-
 .../opt-in-mfa/recovery-codes-reset.vm        |  7 +-
 .../opt-in-mfa/register-confirm.vm            |  5 +-
 .../opt-in-mfa/select-to-manage.vm            |  5 +-
 .../opt-in-mfa/select.vm                      |  9 +-
 .../opt-in-mfa/setup-confirm.vm               |  9 +-
 .../authentication-action/opt-in-mfa/setup.vm |  9 +-
 .../request-acknowledgement/index.vm          | 11 ++-
 .../require-active-account/get.vm             | 21 ++--
 .../reset-password/index.vm                   |  5 +-
 .../core/authentication-action/signup/get.vm  |  3 +-
 .../core/authenticator/bankid/launch/index.vm |  9 +-
 .../core/authenticator/bankid/wait/index.vm   |  5 +-
 .../authenticator/duo/enter-username/index.vm |  7 +-
 .../duo/register/register-device.vm           |  5 +-
 .../authenticator/email/enter-otp/index.vm    |  3 +-
 .../email/enter-username/index.vm             |  5 +-
 .../html-form/account-activation/otp.vm       | 11 ++-
 .../request-new-activation.vm                 |  3 +-
 .../account-activation/set-password.vm        |  5 +-
 .../html-form/authenticate/get.vm             |  7 +-
 .../html-form/create-account/get.vm           |  5 +-
 .../html-form/create-account/post.vm          |  5 +-
 .../html-form/forgot-account-id/get.vm        |  5 +-
 .../html-form/reset-password/get.vm           |  3 +-
 .../html-form/set-password/get.vm             |  3 +-
 .../passkeys/authenticate-device/get.vm       | 13 +--
 .../authenticator/passkeys/register/get.vm    |  9 +-
 .../pingfederate/authenticate/index.vm        |  5 +-
 .../core/authenticator/sms/confirm/index.vm   |  5 +-
 .../core/authenticator/sms/enter-otp/get.vm   |  5 +-
 .../authenticator/sms/enter-username/get.vm   |  5 +-
 .../core/authenticator/sms/register/index.vm  |  5 +-
 .../totp/authenticate/enter-totp.vm           |  5 +-
 .../authenticator/totp/authenticate/index.vm  |  5 +-
 .../core/authenticator/totp/register/index.vm |  5 +-
 .../authenticator/totp/set-alias/index.vm     |  5 +-
 .../webauthn/authenticate-device/get.vm       |  9 +-
 .../authenticator/webauthn/register/get.vm    | 17 ++--
 .../core/fragments/button-loading.vm          | 97 +++++++++++++++++++
 .../templates/core/fragments/set-alias.vm     |  5 +-
 .../core/views/oauth/confirm-usercode.vm      |  3 +-
 .../templates/core/views/oauth/consent.vm     |  5 +-
 .../core/views/oauth/enter-usercode.vm        |  3 +-
 47 files changed, 291 insertions(+), 126 deletions(-)
 create mode 100644 src/identity-server/templates/core/fragments/button-loading.vm

diff --git a/src/identity-server/templates/core/authentication-action/attribute-prompt/index.vm b/src/identity-server/templates/core/authentication-action/attribute-prompt/index.vm
index 468d4a37..13e2dcb8 100644
--- a/src/identity-server/templates/core/authentication-action/attribute-prompt/index.vm
+++ b/src/identity-server/templates/core/authentication-action/attribute-prompt/index.vm
@@ -62,8 +62,8 @@
 
     #end
 
-    <button id="submit-button" type="submit" class="button button-fullwidth $!button_color mt2">#message(
-        "authentication-action.attribute-prompt.view.confirm")</button>
+    <button id="submit-button" type="submit" class="button button-loading button-fullwidth $!button_color mt2"><span>#message(
+        "authentication-action.attribute-prompt.view.confirm")</span></button>
 
     #if($!_allowSkip == true)
         #parse("fragments/jquery")
@@ -87,6 +87,9 @@
     #end
 
 </form>
+
+#parse("fragments/button-loading")
+
 #end
 
 #parse("layouts/default")
diff --git a/src/identity-server/templates/core/authentication-action/auto-link-account/index.vm b/src/identity-server/templates/core/authentication-action/auto-link-account/index.vm
index 3f4fb72d..a29274a7 100644
--- a/src/identity-server/templates/core/authentication-action/auto-link-account/index.vm
+++ b/src/identity-server/templates/core/authentication-action/auto-link-account/index.vm
@@ -20,7 +20,7 @@
 
     <div class="area center">
         <h1>#message("authentication-action.auto-link-account.view.info")</h1>
-        
+
         <ul class="account-linking-link">
             #foreach($permission in $_responseModel.linkPermissions)
                 <li>
@@ -44,26 +44,29 @@
                 </li>
             #end
         </ul>
-        
+
         <p>#message("authentication-action.auto-link-account.view.text")</p>
     </div>
 
     <div class="sm-grid-container" sm-columns="2" gap="1">
         <div>
             <button id="submit-button" name="response" type="submit"
-                    class="button button-fullwidth button-primary $!button_color mt2"
-                    value="true">#message("authentication-action.auto-link-account.view.allow")</button>
+                    class="button button-loading button-fullwidth button-primary $!button_color mt2"
+                    value="true"><span>#message("authentication-action.auto-link-account.view.allow")</span></button>
         </div>
 
         <div>
             <button id="cancel-button" name="response" type="submit"
-                    class="button button-fullwidth button-primary-outline $!button_color mt2"
-                    value="false">#message("authentication-action.auto-link-account.view.deny")</button>
+                    class="button button-loading button-fullwidth button-primary-outline $!button_color mt2"
+                    value="false"><span>#message("authentication-action.auto-link-account.view.deny")</span></button>
         </div>
 
     </div>
 
 </form>
+
+#parse("fragments/button-loading")
+
 #end
 
 #parse("layouts/default")
diff --git a/src/identity-server/templates/core/authentication-action/opt-in-mfa/manage.vm b/src/identity-server/templates/core/authentication-action/opt-in-mfa/manage.vm
index cc6ae377..8761e156 100644
--- a/src/identity-server/templates/core/authentication-action/opt-in-mfa/manage.vm
+++ b/src/identity-server/templates/core/authentication-action/opt-in-mfa/manage.vm
@@ -32,14 +32,16 @@
 
             <div class="flex flex-center justify-between mb1">
                 <div class="form-field flex-auto #if($icons_only_authenticator_chooser)form-field-social-icon#end">
-                    <button type="submit" value="${_factor.description}" class="button button-primary button-fullwidth button-social #if($icons_only_authenticator_chooser)button-social-icon#end #if($single_color_authenticator_chooser)button-social-single-color#end button-$_factor.type">
+                    <button type="submit" value="${_factor.description}" class="button button-primary button-fullwidth button-social button-loading #if($icons_only_authenticator_chooser)button-social-icon#end #if($single_color_authenticator_chooser)button-social-single-color#end button-$_factor.type">
                         <i class="icon #iconClassName($_factor.type)"></i>
                         #if(!$icons_only_authenticator_chooser)
+                            <span>
                             #if($_factor.description)
                                 $_factor.description
                             #else
                                 $_factor.authenticatorId
                             #end
+                            </span>
                         #end
                     </button>
                 </div>
@@ -59,14 +61,16 @@
             <input type="hidden" name="oper" value="register"/>
 
             <div class="form-field flex-auto #if($icons_only_authenticator_chooser)form-field-social-icon#end mb1">
-                <button type="submit" value="${_factor.description}" class="button button-primary button-fullwidth button-social #if($icons_only_authenticator_chooser)button-social-icon#end button-$_factor.type">
+                <button type="submit" value="${_factor.description}" class="button button-primary button-fullwidth button-social button-loading #if($icons_only_authenticator_chooser)button-social-icon#end button-$_factor.type">
                     <i class="icon #iconClassName($_factor.type)"></i>
                     #if(!$icons_only_authenticator_chooser)
+                        <span>
                         #if($_factor.description)
                             $_factor.description
                         #else
                             $_factor.authenticatorId
                         #end
+                        </span>
                     #end
                 </button>
             </div>
@@ -80,7 +84,7 @@
         </h4>
         <form method="POST" name="new-batch" class="no-bottom-padding no-top-padding">
             <input type="hidden" name="oper" value="new-batch"/>
-            <input type="submit" value="#message("${_templatePrefix}.manage.view.recovery-codes.create")" class="button button-fullwidth button-primary-outline"/>
+            <button type="submit" class="button button-fullwidth button-primary-outline button-loading"><span>#message("${_templatePrefix}.manage.view.recovery-codes.create")</span></button>
         </form>
     #end
 
@@ -88,20 +92,21 @@
         #if($_canCompleteAuthentication)
             <form method="POST" name="authenticate" class="no-bottom-padding no-top-padding">
                 <input type="hidden" name="oper" value="authenticate"/>
-                <button type="submit" value="Done" class="button button-tiny button-primary-outline">
-                    <i class="icon ion-checkmark inlineicon"></i>#message("${_templatePrefix}.manage.view.complete-authentication")
+                <button type="submit" value="Done" class="button button-tiny button-primary-outline button-loading">
+                    <i class="icon ion-checkmark inlineicon"></i><span>#message("${_templatePrefix}.manage.view.complete-authentication")</span>
                 </button>
             </form>
         #else
             <form method="POST" name="exit" class="no-bottom-padding no-top-padding">
                 <input type="hidden" name="oper" value="exit"/>
-                <button type="submit" value="Done" class="button button-tiny button-primary-outline">
-                    <i class="icon ion-checkmark inlineicon"></i>#message("${_templatePrefix}.manage.view.exit")
+                <button type="submit" value="Done" class="button button-tiny button-primary-outline button-loading">
+                    <i class="icon ion-checkmark inlineicon"></i><span>#message("${_templatePrefix}.manage.view.exit")</span>
                 </button>
             </form>
         #end
     </div>
 
+#parse("fragments/button-loading")
 #end
 
 #parse("layouts/default")
diff --git a/src/identity-server/templates/core/authentication-action/opt-in-mfa/recovery-code.vm b/src/identity-server/templates/core/authentication-action/opt-in-mfa/recovery-code.vm
index 794ddc19..d06fc7b0 100644
--- a/src/identity-server/templates/core/authentication-action/opt-in-mfa/recovery-code.vm
+++ b/src/identity-server/templates/core/authentication-action/opt-in-mfa/recovery-code.vm
@@ -28,14 +28,15 @@
             <input type="text" name="code" id="code" placeholder="#message("${_templatePrefix}.recovery-code.view.code.placeholder")" class="block full-width mb1 field-light" autofocus spellcheck="false" required autocapitalize="none">
             <i class="form-field-icon icon ion-android-create"></i>
         </div>
-        <input type="submit" value="#message("${_templatePrefix}.recovery-code.view.code.action")" class="button button-fullwidth button-primary"/>
+        <button type="submit" class="button button-fullwidth button-primary button-loading"><span>#message("${_templatePrefix}.recovery-code.view.code.action")</span></button>
 </form>
 
 <form method="POST" name="setup-confirm" class="no-bottom-padding no-top-padding">
     <input type="hidden" name="cancel" value="true"/>
-    <button type="submit" class="button button-fullwidth button-link">#message("${_templatePrefix}.recovery-code.view.cancel")</button>
+    <button type="submit" class="button button-fullwidth button-link button-loading"><span>#message("${_templatePrefix}.recovery-code.view.cancel")</span></button>
 </form>
 
+#parse("fragments/button-loading")
 #end
 
 #parse("layouts/default")
diff --git a/src/identity-server/templates/core/authentication-action/opt-in-mfa/recovery-codes-reset.vm b/src/identity-server/templates/core/authentication-action/opt-in-mfa/recovery-codes-reset.vm
index 07feb222..019dfc1c 100644
--- a/src/identity-server/templates/core/authentication-action/opt-in-mfa/recovery-codes-reset.vm
+++ b/src/identity-server/templates/core/authentication-action/opt-in-mfa/recovery-codes-reset.vm
@@ -24,7 +24,7 @@
 <div class="area">
     <h3>#message("${_templatePrefix}.recovery-codes-reset.view.title")</h3>
     <p>#message("${_templatePrefix}.recovery-codes-reset.view.sub-title")</p>
-    
+
     <div class="backup-codes">
         <ul class="list-reset m0 px2 py3">
         #foreach($_recoveryCode in $_recoveryCodes)
@@ -46,18 +46,19 @@
             #if($_recoveryCodesBatchId)
                 <input type="hidden" name="recoveryCodesBatchId" value="$_recoveryCodesBatchId"/>
             #end
-            <input type="submit" value="#message("${_templatePrefix}.recovery-codes-reset.view.confirm")" class="button button-fullwidth button-primary"/>
+            <button type="submit" class="button button-fullwidth button-primary button-loading"><span>#message("${_templatePrefix}.recovery-codes-reset.view.confirm")</span></button>
         </form>
     </div>
 
     <div class="col-12 px1">
         <form method="POST" name="setup-confirm" class="no-padding">
             <input type="hidden" name="cancel" value="true"/>
-            <input type="submit" value="#message("${_templatePrefix}.recovery-codes-reset.view.cancel")" class="button button-fullwidth button-primary-outline"/>
+            <button type="submit" class="button button-fullwidth button-primary-outline button-loading"><span>#message("${_templatePrefix}.recovery-codes-reset.view.cancel")</span></button>
         </form>
     </div>
 </div>
 
+#parse("fragments/button-loading")
 #end
 
 #parse("layouts/default")
diff --git a/src/identity-server/templates/core/authentication-action/opt-in-mfa/register-confirm.vm b/src/identity-server/templates/core/authentication-action/opt-in-mfa/register-confirm.vm
index 7126a283..d73b4a1c 100644
--- a/src/identity-server/templates/core/authentication-action/opt-in-mfa/register-confirm.vm
+++ b/src/identity-server/templates/core/authentication-action/opt-in-mfa/register-confirm.vm
@@ -31,18 +31,19 @@
     <div class="col-12 px1">
         <form method="POST" name="register-confirm" class="no-padding">
             <input type="hidden" name="acr" value="$_factor.acr"/>
-            <input type="submit" value='#message("${_templatePrefix}.register-confirm.view.confirm")' class="button button-fullwidth button-primary"/>
+            <button type="submit" class="button button-fullwidth button-primary button-loading"><span>#message("${_templatePrefix}.register-confirm.view.confirm")</span></button>
         </form>
     </div>
 
     <div class="col-12 px1">
         <form method="POST" name="setup-confirm" class="no-padding">
             <input type="hidden" name="cancel" value="true"/>
-            <input type="submit" value="#message("${_templatePrefix}.register-confirm.view.cancel")" class="button button-fullwidth button-primary-outline"/>
+            <button type="submit" class="button button-fullwidth button-primary-outline button-loading"><span>#message("${_templatePrefix}.register-confirm.view.cancel")</span></button>
         </form>
     </div>
 </div>
 
+#parse("fragments/button-loading")
 #end
 
 #parse("layouts/default")
diff --git a/src/identity-server/templates/core/authentication-action/opt-in-mfa/select-to-manage.vm b/src/identity-server/templates/core/authentication-action/opt-in-mfa/select-to-manage.vm
index 96635b95..c75dee4a 100644
--- a/src/identity-server/templates/core/authentication-action/opt-in-mfa/select-to-manage.vm
+++ b/src/identity-server/templates/core/authentication-action/opt-in-mfa/select-to-manage.vm
@@ -29,14 +29,16 @@
             <input type="hidden" name="acr" value="${_factor.acr}"/>
             <input type="hidden" name="manage" value="true" />
             <div class="form-field #if($icons_only_authenticator_chooser)form-field-social-icon#end mb1">
-                <button type="submit" value="${_factor.description}" class="button button-primary button-fullwidth button-social #if($icons_only_authenticator_chooser)button-social-icon#end #if($single_color_authenticator_chooser)button-social-single-color#end button-$_factor.type">
+                <button type="submit" value="${_factor.description}" class="button button-primary button-fullwidth button-social button-loading #if($icons_only_authenticator_chooser)button-social-icon#end #if($single_color_authenticator_chooser)button-social-single-color#end button-$_factor.type">
                     <i class="icon #iconClassName($_factor.type)"></i>
                     #if(!$icons_only_authenticator_chooser)
+                        <span>
                         #if($_factor.description)
                             $_factor.description
                         #else
                             $_factor.authenticatorId
                         #end
+                        </span>
                     #end
                 </button>
             </div>
@@ -53,6 +55,7 @@
         </div>
     #end
 
+#parse("fragments/button-loading")
 #end
 
 #parse("layouts/default")
diff --git a/src/identity-server/templates/core/authentication-action/opt-in-mfa/select.vm b/src/identity-server/templates/core/authentication-action/opt-in-mfa/select.vm
index bad217a3..49e45923 100644
--- a/src/identity-server/templates/core/authentication-action/opt-in-mfa/select.vm
+++ b/src/identity-server/templates/core/authentication-action/opt-in-mfa/select.vm
@@ -36,14 +36,16 @@
     <form method="POST" name="${_factor.acr}" class="no-bottom-padding no-top-padding">
         <input type="hidden" name="acr" value="${_factor.acr}"/>
         <div class="form-field #if($icons_only_authenticator_chooser)form-field-social-icon#end mb1">
-            <button type="submit" value="${_factor.description}" class="button button-primary button-fullwidth button-social #if($icons_only_authenticator_chooser)button-social-icon#end #if($single_color_authenticator_chooser)button-social-single-color#end button-$_factor.type">
+            <button type="submit" value="${_factor.description}" class="button button-primary button-fullwidth button-social button-loading #if($icons_only_authenticator_chooser)button-social-icon#end #if($single_color_authenticator_chooser)button-social-single-color#end button-$_factor.type">
                 <i class="icon #iconClassName($_factor.type)"></i>
                 #if(!$icons_only_authenticator_chooser)
+                    <span>
                     #if($_factor.description)
                         $_factor.description
                     #else
                         $_factor.authenticatorId
                     #end
+                    </span>
                 #end
             </button>
         </div>
@@ -74,14 +76,16 @@
                 <input type="hidden" name="acr" value="${_factor.acr}"/>
                 <input type="hidden" name="manage" value="true" />
                 <div class="form-field #if($icons_only_authenticator_chooser)form-field-social-icon#end mb1">
-                    <button type="submit" value="${_factor.description}" class="button button-primary button-fullwidth button-social #if($icons_only_authenticator_chooser)button-social-icon#end #if($single_color_authenticator_chooser)button-social-single-color#end button-$_factor.type">
+                    <button type="submit" value="${_factor.description}" class="button button-primary button-fullwidth button-social button-loading #if($icons_only_authenticator_chooser)button-social-icon#end #if($single_color_authenticator_chooser)button-social-single-color#end button-$_factor.type">
                         <i class="icon #iconClassName($_factor.type)"></i>
                         #if(!$icons_only_authenticator_chooser)
+                            <span>
                             #if($_factor.description)
                                 $_factor.description
                             #else
                                 $_factor.authenticatorId
                             #end
+                            </span>
                         #end
                     </button>
                 </div>
@@ -121,6 +125,7 @@
         })()
     </script>
 
+#parse("fragments/button-loading")
 #end
 
 #parse("layouts/default")
diff --git a/src/identity-server/templates/core/authentication-action/opt-in-mfa/setup-confirm.vm b/src/identity-server/templates/core/authentication-action/opt-in-mfa/setup-confirm.vm
index b394e2b0..26357c10 100644
--- a/src/identity-server/templates/core/authentication-action/opt-in-mfa/setup-confirm.vm
+++ b/src/identity-server/templates/core/authentication-action/opt-in-mfa/setup-confirm.vm
@@ -49,13 +49,13 @@
             #end
             <!-- This can be used to add a checkbox -->
             <input type="hidden" name="confirm" value="on"/>
-            <input type="submit" value="#message("${_templatePrefix}.setup-confirm.view.confirm")" class="button button-fullwidth button-primary"/>
+            <button type="submit" class="button button-fullwidth button-primary button-loading"><span>#message("${_templatePrefix}.setup-confirm.view.confirm")</span></button>
         </form>
     </div>
     <div class="col-12 px1">
         <form method="POST" name="setup-cancel" class="no-padding">
             <input type="hidden" name="cancel" value="true"/>
-            <input type="submit" value="#message("${_templatePrefix}.setup-confirm.view.cancel")" class="button button-fullwidth button-primary-outline"/>
+            <button type="submit" class="button button-fullwidth button-primary-outline button-loading"><span>#message("${_templatePrefix}.setup-confirm.view.cancel")</span></button>
         </form>
     </div>
 </div>
@@ -68,9 +68,8 @@
                 window.print();
             })
         }
-    })    
+    })
 </script>
-
-#end
+#parse("fragments/button-loading")#end
 
 #parse("layouts/default")
diff --git a/src/identity-server/templates/core/authentication-action/opt-in-mfa/setup.vm b/src/identity-server/templates/core/authentication-action/opt-in-mfa/setup.vm
index 5369b4ca..c5992b45 100644
--- a/src/identity-server/templates/core/authentication-action/opt-in-mfa/setup.vm
+++ b/src/identity-server/templates/core/authentication-action/opt-in-mfa/setup.vm
@@ -27,14 +27,16 @@
         <form method="POST" name="${_factor.acr}" class="no-bottom-padding no-top-padding">
             <input type="hidden" name="acr" value="${_factor.acr}"/>
             <div class="form-field #if($icons_only_authenticator_chooser)form-field-social-icon#end mb1">
-                <button type="submit" value="${_factor.description}" class="button button-primary button-fullwidth button-social #if($icons_only_authenticator_chooser)button-social-icon#end #if($single_color_authenticator_chooser)button-social-single-color#end button-$_factor.type">
+                <button type="submit" value="${_factor.description}" class="button button-primary button-fullwidth button-social button-loading #if($icons_only_authenticator_chooser)button-social-icon#end #if($single_color_authenticator_chooser)button-social-single-color#end button-$_factor.type">
                     <i class="icon #iconClassName($_factor.type)"></i>
                     #if(!$icons_only_authenticator_chooser)
+                        <span>
                         #if($_factor.description)
                             $_factor.description
                         #else
                             $_factor.authenticatorId
                         #end
+                        </span>
                     #end
                 </button>
             </div>
@@ -45,13 +47,14 @@
         <form method="POST" name="optOut" class="no-bottom-padding no-top-padding">
             <input type="hidden" name="optOut" value="true"/>
             <div class="flex flex-column">
-                <button type="submit" value="Opt-out of second factor" class="button button-link">
-                    #message("${_templatePrefix}.setup.view.opt-out.action")
+                <button type="submit" value="Opt-out of second factor" class="button button-link button-loading">
+                    <span>#message("${_templatePrefix}.setup.view.opt-out.action")</span>
                 </button>
                 <p>#message("${_templatePrefix}.setup.view.opt-out.description")</p>
             </div>
         </form>
     #end
+#parse("fragments/button-loading")
 #end
 
 #parse("layouts/default")
diff --git a/src/identity-server/templates/core/authentication-action/request-acknowledgement/index.vm b/src/identity-server/templates/core/authentication-action/request-acknowledgement/index.vm
index 18607365..58194046 100644
--- a/src/identity-server/templates/core/authentication-action/request-acknowledgement/index.vm
+++ b/src/identity-server/templates/core/authentication-action/request-acknowledgement/index.vm
@@ -25,20 +25,23 @@
     <div #if($_cancellable == true) class="sm-grid-container" sm-columns="2" gap="1"#end>
         <div>
             <button id="submit-button" name="response" type="submit"
-                    class="button button-fullwidth button-primary $!button_color mt2"
-                    value="true">#message($_acceptButtonLabel)</button>
+                    class="button button-loading button-fullwidth button-primary $!button_color mt2"
+                    value="true"><span>#message($_acceptButtonLabel)</span></button>
         </div>
 
         #if($_cancellable == true)
             <div>
                 <button id="cancel-button" name="response" type="submit"
-                        class="button button-fullwidth button-primary-outline $!button_color mt2"
-                        value="false">#message($_cancelButtonLabel)</button>
+                        class="button button-loading button-fullwidth button-primary-outline $!button_color mt2"
+                        value="false"><span>#message($_cancelButtonLabel)</span></button>
             </div>
         #end
     </div>
 
 </form>
+
+#parse("fragments/button-loading")
+
 #end
 
 #parse("layouts/default")
diff --git a/src/identity-server/templates/core/authentication-action/require-active-account/get.vm b/src/identity-server/templates/core/authentication-action/require-active-account/get.vm
index 3fac8a4f..e34fea7d 100644
--- a/src/identity-server/templates/core/authentication-action/require-active-account/get.vm
+++ b/src/identity-server/templates/core/authentication-action/require-active-account/get.vm
@@ -31,29 +31,32 @@
                     <input type="text" name="accountActivationTotp" id="accountActivationTotp" autocorrect="off" spellcheck="false"
                            class="block full-width mb1 field-light" autofocus>
                 </div>
-                <button type="submit" id="activate" class="button button-fullwidth button-primary">
-                    #message("${_templatePrefix}.view.activate")
+                <button type="submit" id="activate" class="button button-loading button-fullwidth button-primary">
+                    <span>#message("${_templatePrefix}.view.activate")</span>
                 </button>
-                <button type="submit" value="resend" name="resend" id="resend" class="button button-fullwidth
+                <button type="submit" value="resend" name="resend" id="resend" class="button button-loading button-fullwidth
                     button-secondary button-info">
-                    #message("${_templatePrefix}.view.new-totp")
+                    <span>#message("${_templatePrefix}.view.new-totp")</span>
                 </button>
             #elseif ($_activationForm == "email")
                 <div class="alert alert-danger">
                     #message("${_templatePrefix}.view.error.user-cancelled")
                 </div>
-                <button type="submit" class="button button-fullwidth button-secondary">
-                    #message("${_templatePrefix}.view.activate")
+                <button type="submit" class="button button-loading button-fullwidth button-secondary">
+                    <span>#message("${_templatePrefix}.view.activate")</span>
                 </button>
             #end
 
         #end
     #else
-        <button type="submit" class="button button-fullwidth button-secondary">
-            #message("${_templatePrefix}.view.activate")
+        <button type="submit" class="button button-loading button-fullwidth button-secondary">
+            <span>#message("${_templatePrefix}.view.activate")</span>
         </button>
     #end
 </form>
+
+#parse("fragments/button-loading")
+
 #end
 
-#parse("layouts/default")
\ No newline at end of file
+#parse("layouts/default")
diff --git a/src/identity-server/templates/core/authentication-action/reset-password/index.vm b/src/identity-server/templates/core/authentication-action/reset-password/index.vm
index bfb29353..5de1af9b 100644
--- a/src/identity-server/templates/core/authentication-action/reset-password/index.vm
+++ b/src/identity-server/templates/core/authentication-action/reset-password/index.vm
@@ -72,7 +72,7 @@
         <i class="form-password-reveal-form-icon"></i>
     </div>
 
-    <button id="submit-button" type="submit" class="button button-fullwidth $!button_color mt2">#message("authentication-action.reset-password.view.button")</button>
+    <button id="submit-button" type="submit" class="button button-loading button-fullwidth $!button_color mt2"><span>#message("authentication-action.reset-password.view.button")</span></button>
 
     #if($!_allowSkip == true)
         #parse("fragments/jquery")
@@ -96,6 +96,9 @@
     #end
 
 </form>
+
+#parse("fragments/button-loading")
+
 #end
 
 #parse("layouts/default")
diff --git a/src/identity-server/templates/core/authentication-action/signup/get.vm b/src/identity-server/templates/core/authentication-action/signup/get.vm
index aa1ebbe3..165ce858 100644
--- a/src/identity-server/templates/core/authentication-action/signup/get.vm
+++ b/src/identity-server/templates/core/authentication-action/signup/get.vm
@@ -138,6 +138,7 @@
     #end
 </form>
 
+#parse("fragments/button-loading")
 #end
 
-#parse("layouts/default")
\ No newline at end of file
+#parse("layouts/default")
diff --git a/src/identity-server/templates/core/authenticator/bankid/launch/index.vm b/src/identity-server/templates/core/authenticator/bankid/launch/index.vm
index 556fbee4..2ea42147 100644
--- a/src/identity-server/templates/core/authenticator/bankid/launch/index.vm
+++ b/src/identity-server/templates/core/authenticator/bankid/launch/index.vm
@@ -98,8 +98,8 @@
             #message("${_templatePrefix}.view.button.this-device")</a>
     </form>
     <form name="cancel" action="cancel" class="manuallink" method="get">
-        <button type="submit" class="button button-fullwidth button-primary-outline">#message($_messages,
-            "${_templatePrefix}.view.button.cancel")</button>
+        <button type="submit" class="button button-fullwidth button-primary-outline button-loading"><span>#message($_messages,
+            "${_templatePrefix}.view.button.cancel")</span></button>
     </form>
     #else
     <div class="area center">
@@ -112,8 +112,8 @@
             #message("${_templatePrefix}.view.button.manualstart")</a>
     </form>
     <form name="cancel" action="cancel" class="manuallink display-none" method="get">
-        <button type="submit" class="button button-fullwidth button-primary-outline">#message($_messages,
-            "${_templatePrefix}.view.button.cancel")</button>
+        <button type="submit" class="button button-fullwidth button-primary-outline button-loading"><span>#message($_messages,
+            "${_templatePrefix}.view.button.cancel")</span></button>
     </form>
     #end
 <form action="$_action" method="post" id="pollingDone" class="display-none">
@@ -129,5 +129,6 @@
         #parse("authenticator/bankid/launch/handle-auto-start-uri")
         #parse("fragments/authentication-app-launcher")
     #end
+#parse("fragments/button-loading")
 #end
 #parse("layouts/default")
diff --git a/src/identity-server/templates/core/authenticator/bankid/wait/index.vm b/src/identity-server/templates/core/authenticator/bankid/wait/index.vm
index 64678cbf..addeeb55 100644
--- a/src/identity-server/templates/core/authenticator/bankid/wait/index.vm
+++ b/src/identity-server/templates/core/authenticator/bankid/wait/index.vm
@@ -56,13 +56,14 @@
     });
 </script>
 <form name="cancel" action="cancel" class="manuallink display-none" method="get">
-    <button type="submit" class="button button-fullwidth button-danger-outline">#message($_messages,
-        "${_templatePrefix}.view.button.cancel")</button>
+    <button type="submit" class="button button-fullwidth button-danger-outline button-loading"><span>#message($_messages,
+        "${_templatePrefix}.view.button.cancel")</span></button>
 </form>
 <form action="$_action" method="post" class="display-none" id="pollingDone">
     <input type="hidden" name="_pollingDone" value="true"/>
 </form>
 
+#parse("fragments/button-loading")
 #end
 
 #parse("layouts/default")
diff --git a/src/identity-server/templates/core/authenticator/duo/enter-username/index.vm b/src/identity-server/templates/core/authenticator/duo/enter-username/index.vm
index 5aac5680..4c74b293 100644
--- a/src/identity-server/templates/core/authenticator/duo/enter-username/index.vm
+++ b/src/identity-server/templates/core/authenticator/duo/enter-username/index.vm
@@ -42,8 +42,9 @@
                value="$!_username" autocapitalize="none">
         <i class="form-field-icon icon ion-ios-person"></i>
     </div>
-    <button type="submit" class="button button-fullwidth button-primary">#message(
-        "authenticator.duo.enter-username.view.challenge")</button>
+    <button type="submit" class="button button-fullwidth button-primary button-loading"><span>#message(
+        "authenticator.duo.enter-username.view.challenge")</span></button>
 </form>
+#parse("fragments/button-loading")
 #end
-#parse("layouts/default")
\ No newline at end of file
+#parse("layouts/default")
diff --git a/src/identity-server/templates/core/authenticator/duo/register/register-device.vm b/src/identity-server/templates/core/authenticator/duo/register/register-device.vm
index b40526ea..048528bc 100644
--- a/src/identity-server/templates/core/authenticator/duo/register/register-device.vm
+++ b/src/identity-server/templates/core/authenticator/duo/register/register-device.vm
@@ -47,9 +47,10 @@
                class="block full-width mb1 field-light" autofocus>
         <i class="form-field-icon icon ion-iphone"></i>
     </div>
-    <button type="submit" class="button button-fullwidth button-primary">
-        #message("authenticator.duo.register.view.activate")
+    <button type="submit" class="button button-fullwidth button-primary button-loading">
+        <span>#message("authenticator.duo.register.view.activate")</span>
     </button>
 </form>
+#parse("fragments/button-loading")
 #end
 #parse("layouts/default")
diff --git a/src/identity-server/templates/core/authenticator/email/enter-otp/index.vm b/src/identity-server/templates/core/authenticator/email/enter-otp/index.vm
index 98dc805f..fb42b39c 100644
--- a/src/identity-server/templates/core/authenticator/email/enter-otp/index.vm
+++ b/src/identity-server/templates/core/authenticator/email/enter-otp/index.vm
@@ -54,7 +54,7 @@
         <div class="form-field">
             <label for="otp" class="$!_errorClass">#message("authenticator.email.enter-otp.view.enter-otp")</label>
             <input type="text" name="otp" id="otp" class="block full-width mb1 field-light" required autofocus>
-            <button type="submit" class="button button-fullwidth button-primary">#message("authenticator.email.enter-otp.view.verify")</button>
+            <button type="submit" class="button button-fullwidth button-primary button-loading"><span>#message("authenticator.email.enter-otp.view.verify")</span></button>
             <i class="form-field-icon icon ion-grid"></i>
         </div>
     #end
@@ -66,6 +66,7 @@
 
 
 </form>
+#parse("fragments/button-loading")
 #end
 
 #parse("layouts/default")
diff --git a/src/identity-server/templates/core/authenticator/email/enter-username/index.vm b/src/identity-server/templates/core/authenticator/email/enter-username/index.vm
index 1652573d..a8ccdea8 100644
--- a/src/identity-server/templates/core/authenticator/email/enter-username/index.vm
+++ b/src/identity-server/templates/core/authenticator/email/enter-username/index.vm
@@ -56,10 +56,11 @@
             <i class="form-field-icon icon ion-ios-person"></i>
         </div>
 
-        <button type="submit" class="button button-fullwidth button-primary">#message(
-            "${_templatePrefix}.view.challenge")</button>
+        <button type="submit" class="button button-fullwidth button-primary button-loading"><span>#message(
+            "${_templatePrefix}.view.challenge")</span></button>
     </form>
     #end
+#parse("fragments/button-loading")
 #end
 
 #parse("layouts/default")
diff --git a/src/identity-server/templates/core/authenticator/html-form/account-activation/otp.vm b/src/identity-server/templates/core/authenticator/html-form/account-activation/otp.vm
index 3bd2a0fb..1a6632fa 100644
--- a/src/identity-server/templates/core/authenticator/html-form/account-activation/otp.vm
+++ b/src/identity-server/templates/core/authenticator/html-form/account-activation/otp.vm
@@ -26,17 +26,18 @@
             #set($otpInputLength = 6)
             #parse("fragments/otp-input")
         </div>
-        <button type="submit" id="activate" class="button button-fullwidth button-primary">
-            #message("${_templatePrefix}.view.button")
+        <button type="submit" id="activate" class="button button-fullwidth button-primary button-loading">
+            <span>#message("${_templatePrefix}.view.button")</span>
         </button>
     </form>
     <form id="resend" name="resend" method="post" class="no-top-padding">
         <input type="hidden" name="resend" />
         <button type="submit" id="resend" class="button button-fullwidth
-                button-secondary button-info">
-            #message("${_templatePrefix}.otp.view.resend-otp-button")
+                button-secondary button-info button-loading">
+            <span>#message("${_templatePrefix}.otp.view.resend-otp-button")</span>
         </button>
     </form>
+#parse("fragments/button-loading")
 #end
 
-#parse("layouts/default")
\ No newline at end of file
+#parse("layouts/default")
diff --git a/src/identity-server/templates/core/authenticator/html-form/account-activation/request-new-activation.vm b/src/identity-server/templates/core/authenticator/html-form/account-activation/request-new-activation.vm
index 4e747e60..06e637c8 100644
--- a/src/identity-server/templates/core/authenticator/html-form/account-activation/request-new-activation.vm
+++ b/src/identity-server/templates/core/authenticator/html-form/account-activation/request-new-activation.vm
@@ -51,9 +51,10 @@
         <i class="form-field-icon icon ion-email"></i>
     </div>
 
-    <button type="submit" class="button button-fullwidth button-primary">#message("authenticator.html-form.account-activation.view.newToken.button")</button>
+    <button type="submit" class="button button-fullwidth button-primary button-loading"><span>#message("authenticator.html-form.account-activation.view.newToken.button")</span></button>
 
     </form>
+#parse("fragments/button-loading")
 #end
 
 #*
diff --git a/src/identity-server/templates/core/authenticator/html-form/account-activation/set-password.vm b/src/identity-server/templates/core/authenticator/html-form/account-activation/set-password.vm
index d7587b08..aa8558c1 100644
--- a/src/identity-server/templates/core/authenticator/html-form/account-activation/set-password.vm
+++ b/src/identity-server/templates/core/authenticator/html-form/account-activation/set-password.vm
@@ -61,12 +61,13 @@
 
     <div class="clearfix mxn1 mt2">
         <div class="sm-col md-col-12 px1">
-            <button type="submit" class="button button-fullwidth button-primary">#message(
-                "${_templatePrefix}.view.button")</button>
+            <button type="submit" class="button button-fullwidth button-primary button-loading"><span>#message(
+                "${_templatePrefix}.view.button")</span></button>
         </div>
     </div>
 </form>
 
+#parse("fragments/button-loading")
 #end
 
 #parse("layouts/default")
diff --git a/src/identity-server/templates/core/authenticator/html-form/authenticate/get.vm b/src/identity-server/templates/core/authenticator/html-form/authenticate/get.vm
index d9fd055c..792d967d 100644
--- a/src/identity-server/templates/core/authenticator/html-form/authenticate/get.vm
+++ b/src/identity-server/templates/core/authenticator/html-form/authenticate/get.vm
@@ -90,8 +90,8 @@
         <i class="form-field-icon icon ion-ios-locked"></i>
     </div>
 
-    <button type="submit" class="button button-fullwidth $!button_color mt2">#message(
-        "authenticator.html-form.authenticate.view.authenticate")</button>
+    <button type="submit" class="button button-loading button-fullwidth $!button_color mt2"><span>#message(
+        "authenticator.html-form.authenticate.view.authenticate")</span></button>
     #parse("fragments/remember-me")
     <div class="mt3 clearfix">
         <div class="center py2 login-actions">
@@ -113,6 +113,9 @@
     </div>
 
 </form>
+
+#parse("fragments/button-loading")
+
 #end
 
 #parse("layouts/default")
diff --git a/src/identity-server/templates/core/authenticator/html-form/create-account/get.vm b/src/identity-server/templates/core/authenticator/html-form/create-account/get.vm
index b214e168..edb03a34 100644
--- a/src/identity-server/templates/core/authenticator/html-form/create-account/get.vm
+++ b/src/identity-server/templates/core/authenticator/html-form/create-account/get.vm
@@ -117,13 +117,14 @@
         </div>
     </div>
 
-    <button type="submit" class="button button-fullwidth button-primary">
-        #message("authenticator.html-form.create-account.view.button")
+    <button type="submit" class="button button-fullwidth button-primary button-loading">
+        <span>#message("authenticator.html-form.create-account.view.button")</span>
     </button>
 
 
 </form>
 
+#parse("fragments/button-loading")
 #end
 
 #parse("layouts/default")
diff --git a/src/identity-server/templates/core/authenticator/html-form/create-account/post.vm b/src/identity-server/templates/core/authenticator/html-form/create-account/post.vm
index 92608dde..abddae02 100644
--- a/src/identity-server/templates/core/authenticator/html-form/create-account/post.vm
+++ b/src/identity-server/templates/core/authenticator/html-form/create-account/post.vm
@@ -56,8 +56,8 @@
 
         #if($_resendAction)
             <form id="resend-form" name="resend-form" method="post" class="no-top-padding" action="$_resendAction">
-                <button type="submit" id="resend-button" class="button button-primary">
-                    #message("authenticator.html-form.create-account.view.success.button.resend-activation-link")
+                <button type="submit" id="resend-button" class="button button-primary button-loading">
+                    <span>#message("authenticator.html-form.create-account.view.success.button.resend-activation-link")</span>
                 </button>
             </form>
         #end
@@ -70,6 +70,7 @@
         </div>
 
     </div>
+#parse("fragments/button-loading")
 #end
 
 #parse("layouts/default")
diff --git a/src/identity-server/templates/core/authenticator/html-form/forgot-account-id/get.vm b/src/identity-server/templates/core/authenticator/html-form/forgot-account-id/get.vm
index 9de7d75b..04fd5ae7 100644
--- a/src/identity-server/templates/core/authenticator/html-form/forgot-account-id/get.vm
+++ b/src/identity-server/templates/core/authenticator/html-form/forgot-account-id/get.vm
@@ -55,8 +55,8 @@
         </div>
 
 
-        <button type="submit" class="button button-fullwidth button-primary">#message(
-            "${_templatePrefix}.view.button")</button>
+        <button type="submit" class="button button-fullwidth button-primary button-loading"><span>#message(
+            "${_templatePrefix}.view.button")</span></button>
 
         <div class="login-actions center py2">
             <a href="$_authUrl">
@@ -66,6 +66,7 @@
 
 
     </form>
+#parse("fragments/button-loading")
 #end
 
 #*
diff --git a/src/identity-server/templates/core/authenticator/html-form/reset-password/get.vm b/src/identity-server/templates/core/authenticator/html-form/reset-password/get.vm
index d43e09f9..c85be294 100644
--- a/src/identity-server/templates/core/authenticator/html-form/reset-password/get.vm
+++ b/src/identity-server/templates/core/authenticator/html-form/reset-password/get.vm
@@ -74,7 +74,7 @@
     #end
     </div>
 
-    <button type="submit" class="button button-fullwidth button-primary">#message("${_templatePrefix}.view.button")</button>
+    <button type="submit" class="button button-fullwidth button-primary button-loading"><span>#message("${_templatePrefix}.view.button")</span></button>
     <p class="center mt2 mb2">#message("authenticator.html-form.reset-password.view.or")</p>
 
     <div class="login-actions center py2">
@@ -84,6 +84,7 @@
     </div>
 
 </form>
+#parse("fragments/button-loading")
 #end
 
 #*
diff --git a/src/identity-server/templates/core/authenticator/html-form/set-password/get.vm b/src/identity-server/templates/core/authenticator/html-form/set-password/get.vm
index 028c8b5d..d91fa6ee 100644
--- a/src/identity-server/templates/core/authenticator/html-form/set-password/get.vm
+++ b/src/identity-server/templates/core/authenticator/html-form/set-password/get.vm
@@ -57,7 +57,7 @@
                 #end
             </div>
 
-            <button type="submit" class="button button-primary button-fullwidth">#message("${_templatePrefix}.view.button")</button>
+            <button type="submit" class="button button-primary button-fullwidth button-loading"><span>#message("${_templatePrefix}.view.button")</span></button>
 
             <div class="login-actions center py2">
                 <a href="$_authUrl">#message("authenticator.html-form.set-password.view.cancel")</a>
@@ -71,6 +71,7 @@
         </form>
     #end
 
+#parse("fragments/button-loading")
 #end
 
 #parse("layouts/default")
diff --git a/src/identity-server/templates/core/authenticator/passkeys/authenticate-device/get.vm b/src/identity-server/templates/core/authenticator/passkeys/authenticate-device/get.vm
index 432a9a42..2f39fe5b 100644
--- a/src/identity-server/templates/core/authenticator/passkeys/authenticate-device/get.vm
+++ b/src/identity-server/templates/core/authenticator/passkeys/authenticate-device/get.vm
@@ -64,8 +64,8 @@
                 <i class="form-field-icon icon ion-ios-person"></i>
             </div>
 
-            <button type="submit" class="button button-fullwidth button-primary">
-                #message("${_templatePrefix}.view.button.submit")
+            <button type="submit" class="button button-fullwidth button-primary button-loading">
+                <span>#message("${_templatePrefix}.view.button.submit")</span>
             </button>
         </form>
     #end ## ($_promptForUsername)
@@ -73,8 +73,8 @@
     <div id="additionalDialog" class="hidden">
         #set($showRegistration = $_registrationEndpoint && $_allowRegistrationDuringLogin)
         <div id="authenticateDiv" class="center">
-            <button id="authenticateButton" class="button button-fullwidth button-primary">
-                #message("${_templatePrefix}.view.signin.passkey")
+            <button id="authenticateButton" class="button button-fullwidth button-primary button-loading">
+                <span>#message("${_templatePrefix}.view.signin.passkey")</span>
             </button>
         </div>
         #if ($showRegistration)
@@ -85,8 +85,8 @@
     </div>
 
     <div id="authenticateDiv" class="hidden">
-        <button id="authenticateButton" class="button button-fullwidth button-primary">
-            #message("${_templatePrefix}.view.button.authenticate")
+        <button id="authenticateButton" class="button button-fullwidth button-primary button-loading">
+            <span>#message("${_templatePrefix}.view.button.authenticate")</span>
         </button>
     </div>
 
@@ -106,6 +106,7 @@
 
     #parse("authenticator/passkeys/js/authenticate-device")
 
+#parse("fragments/button-loading")
 #end ## /body
 
 #parse("layouts/default")
diff --git a/src/identity-server/templates/core/authenticator/passkeys/register/get.vm b/src/identity-server/templates/core/authenticator/passkeys/register/get.vm
index e3b26cf4..0983d6c1 100644
--- a/src/identity-server/templates/core/authenticator/passkeys/register/get.vm
+++ b/src/identity-server/templates/core/authenticator/passkeys/register/get.vm
@@ -26,13 +26,13 @@
 #parse("authenticator/passkeys/fragments/alerts")
 
 <div id="retryRegistration" class="area center hidden">
-    <button class="button button-fullwidth button-primary">
-        #message("${_templatePrefix}.view.button.try-again")</button>
+    <button class="button button-fullwidth button-primary button-loading">
+        <span>#message("${_templatePrefix}.view.button.try-again")</span></button>
 </div>
 
 <div id="registerDiv" class="area center hidden">
-    <button id="registerButton" type="submit" class="button button-fullwidth button-primary">
-        #message("${_templatePrefix}.view.button.register")
+    <button id="registerButton" type="submit" class="button button-fullwidth button-primary button-loading">
+        <span>#message("${_templatePrefix}.view.button.register")</span>
     </button>
 </div>
 
@@ -46,6 +46,7 @@
     #parse("authenticator/passkeys/js/register")
 #end
 
+#parse("fragments/button-loading")
 #end ## /body
 
 #parse("layouts/default")
diff --git a/src/identity-server/templates/core/authenticator/pingfederate/authenticate/index.vm b/src/identity-server/templates/core/authenticator/pingfederate/authenticate/index.vm
index f64af9ee..fb9e164d 100644
--- a/src/identity-server/templates/core/authenticator/pingfederate/authenticate/index.vm
+++ b/src/identity-server/templates/core/authenticator/pingfederate/authenticate/index.vm
@@ -48,8 +48,8 @@
         <p>
             #message("authenticator.pingfederate.authenticate.view.description")
         </p>
-        <button type="submit" class="button button-fullwidth button-primary">
-            #message("authenticator.pingfederate.authenticate.view.authenticate")
+        <button type="submit" class="button button-fullwidth button-primary button-loading">
+            <span>#message("authenticator.pingfederate.authenticate.view.authenticate")</span>
         </button>
     </div>
 
@@ -70,6 +70,7 @@
     }
 </script>
 
+#parse("fragments/button-loading")
 #end
 
 #*
diff --git a/src/identity-server/templates/core/authenticator/sms/confirm/index.vm b/src/identity-server/templates/core/authenticator/sms/confirm/index.vm
index ece4fdf5..5d152259 100644
--- a/src/identity-server/templates/core/authenticator/sms/confirm/index.vm
+++ b/src/identity-server/templates/core/authenticator/sms/confirm/index.vm
@@ -47,8 +47,8 @@
         #parse("fragments/otp-input")
 
         <button type="submit"
-        class="button button-medium button-primary button-fullwidth">
-            #message("authenticator.sms.confirm.view.verfiy")
+        class="button button-medium button-primary button-fullwidth button-loading">
+            <span>#message("authenticator.sms.confirm.view.verfiy")</span>
         </button>
 
     #end
@@ -60,6 +60,7 @@
     </div>
 
 </form>
+#parse("fragments/button-loading")
 #end
 
 #parse("layouts/default")
diff --git a/src/identity-server/templates/core/authenticator/sms/enter-otp/get.vm b/src/identity-server/templates/core/authenticator/sms/enter-otp/get.vm
index b5edd14c..b7d37d7c 100644
--- a/src/identity-server/templates/core/authenticator/sms/enter-otp/get.vm
+++ b/src/identity-server/templates/core/authenticator/sms/enter-otp/get.vm
@@ -61,8 +61,8 @@
         #parse("fragments/otp-input")
 
         <button type="submit" disabled
-        class="button button-medium button-primary button-fullwidth">
-        #message('authenticator.sms.enter-otp.view.verify')
+        class="button button-medium button-primary button-fullwidth button-loading">
+        <span>#message('authenticator.sms.enter-otp.view.verify')</span>
         </button>
     #end
 
@@ -104,6 +104,7 @@
 
 
 </form>
+#parse("fragments/button-loading")
 #end
 
 #parse("layouts/default")
diff --git a/src/identity-server/templates/core/authenticator/sms/enter-username/get.vm b/src/identity-server/templates/core/authenticator/sms/enter-username/get.vm
index 35b31f71..c3e94b80 100644
--- a/src/identity-server/templates/core/authenticator/sms/enter-username/get.vm
+++ b/src/identity-server/templates/core/authenticator/sms/enter-username/get.vm
@@ -63,8 +63,8 @@
                 <i class="form-field-icon icon ion-person"></i>
             </div>
 
-            <button type="submit" class="button button-fullwidth button-primary">#message(
-                "${_templatePrefix}.view.challenge")</button>
+            <button type="submit" class="button button-fullwidth button-primary button-loading"><span>#message(
+                "${_templatePrefix}.view.challenge")</span></button>
         </form>
     #end
 
@@ -85,6 +85,7 @@
             </a>
             </div>
         #end
+#parse("fragments/button-loading")
 #end
 
 #parse("layouts/default")
diff --git a/src/identity-server/templates/core/authenticator/sms/register/index.vm b/src/identity-server/templates/core/authenticator/sms/register/index.vm
index c57e9a93..e12638e2 100644
--- a/src/identity-server/templates/core/authenticator/sms/register/index.vm
+++ b/src/identity-server/templates/core/authenticator/sms/register/index.vm
@@ -57,8 +57,8 @@
             </div>
         </div>
 
-            <button type="submit" class="button button-fullwidth button-primary mt2">#message(
-                "authenticator.sms.register.view.change-phonenumber")
+            <button type="submit" class="button button-fullwidth button-primary mt2 button-loading"><span>#message(
+                "authenticator.sms.register.view.change-phonenumber")</span>
             </button>
 
             <div class="center py2 login-actions">
@@ -71,6 +71,7 @@
 
 
 
+#parse("fragments/button-loading")
 #end
 
 #parse("layouts/default")
diff --git a/src/identity-server/templates/core/authenticator/totp/authenticate/enter-totp.vm b/src/identity-server/templates/core/authenticator/totp/authenticate/enter-totp.vm
index 1b675065..68d22930 100644
--- a/src/identity-server/templates/core/authenticator/totp/authenticate/enter-totp.vm
+++ b/src/identity-server/templates/core/authenticator/totp/authenticate/enter-totp.vm
@@ -45,8 +45,8 @@
 #parse("fragments/otp-input")
 
 <button type="submit" disabled
-        class="button button-fullwidth button-primary">
-        #message("authenticator.totp.authenticate.view.verify")
+        class="button button-fullwidth button-primary button-loading">
+        <span>#message("authenticator.totp.authenticate.view.verify")</span>
 </button>
 
 ## This can be enabled seperatly in each of the authenticators that use this template. Some may
@@ -64,6 +64,7 @@
     #end
 
 </form>
+#parse("fragments/button-loading")
 #end
 
 #parse("layouts/default")
diff --git a/src/identity-server/templates/core/authenticator/totp/authenticate/index.vm b/src/identity-server/templates/core/authenticator/totp/authenticate/index.vm
index c8ec56dd..a41a23c0 100644
--- a/src/identity-server/templates/core/authenticator/totp/authenticate/index.vm
+++ b/src/identity-server/templates/core/authenticator/totp/authenticate/index.vm
@@ -58,8 +58,8 @@
         <i class="form-field-icon icon ion-ios-person"></i>
     </div>
 
-    <button type="submit" class="button button-fullwidth button-primary">#message(
-        "authenticator.totp.authenticate.view.challenge")</button>
+    <button type="submit" class="button button-fullwidth button-primary button-loading"><span>#message(
+        "authenticator.totp.authenticate.view.challenge")</span></button>
 
 ## This can be enabled seperatly in each of the authenticators that use this template. Some may
 ## allow registration during login while other don't. As a best practice, create two different
@@ -75,6 +75,7 @@
         </div>
     #end
 </form>
+#parse("fragments/button-loading")
 #end
 
 #parse("layouts/default")
diff --git a/src/identity-server/templates/core/authenticator/totp/register/index.vm b/src/identity-server/templates/core/authenticator/totp/register/index.vm
index f1dcde9d..2302e9e4 100644
--- a/src/identity-server/templates/core/authenticator/totp/register/index.vm
+++ b/src/identity-server/templates/core/authenticator/totp/register/index.vm
@@ -129,8 +129,8 @@
         #set($otpInputLength = $_totpLength)
         #parse("fragments/otp-input")
 
-        <button type="submit" disabled class="button button-fullwidth button-primary">#message(
-                "authenticator.totp.register.view.register")</button>
+        <button type="submit" disabled class="button button-fullwidth button-primary button-loading"><span>#message(
+                "authenticator.totp.register.view.register")</span></button>
     </div>
 
 </form>
@@ -150,6 +150,7 @@
     });
 </script>
 
+#parse("fragments/button-loading")
 #end
 
 #parse("layouts/default")
diff --git a/src/identity-server/templates/core/authenticator/totp/set-alias/index.vm b/src/identity-server/templates/core/authenticator/totp/set-alias/index.vm
index 74ee4d10..aa5c5032 100644
--- a/src/identity-server/templates/core/authenticator/totp/set-alias/index.vm
+++ b/src/identity-server/templates/core/authenticator/totp/set-alias/index.vm
@@ -59,11 +59,12 @@
                    required value="$!alias" autocapitalize="none" maxlength="30">
             <i class="form-field-icon icon ion-iphone"></i>
         </div>
-        <button type="submit" class="button button-fullwidth button-primary mt2 ">#message(
-                "authenticator.totp.set-alias.view.generate-code")</button>
+        <button type="submit" class="button button-fullwidth button-primary mt2 button-loading"><span>#message(
+                "authenticator.totp.set-alias.view.generate-code")</span></button>
     </div>
 </form>
 
+#parse("fragments/button-loading")
 #end
 
 #parse("layouts/default")
diff --git a/src/identity-server/templates/core/authenticator/webauthn/authenticate-device/get.vm b/src/identity-server/templates/core/authenticator/webauthn/authenticate-device/get.vm
index aa44c779..677e985b 100644
--- a/src/identity-server/templates/core/authenticator/webauthn/authenticate-device/get.vm
+++ b/src/identity-server/templates/core/authenticator/webauthn/authenticate-device/get.vm
@@ -52,14 +52,14 @@
                 <i class="form-field-icon icon ion-ios-person"></i>
             </div>
 
-            <button type="submit" class="button button-fullwidth button-primary">#message(
-                    "${_templatePrefix}.view.submit")</button>
+            <button type="submit" class="button button-fullwidth button-primary button-loading"><span>#message(
+                    "${_templatePrefix}.view.submit")</span></button>
         </form>
     #end ## ($_promptForUsername)
 
     <div id="authenticateDiv" class="area center hidden">
-        <button id="authenticateButton" class="button button-fullwidth button-primary">
-            #message("${_templatePrefix}.view.authenticate")
+        <button id="authenticateButton" class="button button-fullwidth button-primary button-loading">
+            <span>#message("${_templatePrefix}.view.authenticate")</span>
         </button>
     </div>
 
@@ -72,6 +72,7 @@
 
 #parse("authenticator/webauthn/js/authenticate-device")
 
+#parse("fragments/button-loading")
 #end ## /body
 
 #parse("layouts/default")
diff --git a/src/identity-server/templates/core/authenticator/webauthn/register/get.vm b/src/identity-server/templates/core/authenticator/webauthn/register/get.vm
index fa35b48e..7f7cc5e0 100644
--- a/src/identity-server/templates/core/authenticator/webauthn/register/get.vm
+++ b/src/identity-server/templates/core/authenticator/webauthn/register/get.vm
@@ -28,38 +28,38 @@
 #parse("authenticator/webauthn/fragments/alerts")
 
 <div id="retryRegistration" class="area center hidden">
-    <button class="button button-fullwidth button-primary">
-        #message("${_templatePrefix}.view.try-again")</button>
+    <button class="button button-fullwidth button-primary button-loading">
+        <span>#message("${_templatePrefix}.view.try-again")</span></button>
 </div>
 
 <div id="registerDiv" class="area center hidden">
     <div class="login-chooser login-chooser-webauthn mb2">
 
         #if($_credentialCreationOptionsJson)
-        <button id="registerButton" type="submit" class="button button-fullwidth button-primary">
-            #message("${_templatePrefix}.view.button.any-attachment")
+        <button id="registerButton" type="submit" class="button button-fullwidth button-primary button-loading">
+            <span>#message("${_templatePrefix}.view.button.any-attachment")</span>
         </button>
         #end
 
         #if($_platformJson)
-        <button id="registerPlatformButton" type="submit" class="button button-transparent login-chooser-item" name="authenticator-attachment" value="platform">
+        <button id="registerPlatformButton" type="submit" class="button button-transparent login-chooser-item button-loading" name="authenticator-attachment" value="platform">
             <figure><img src="$!_staticResourceRootPath/assets/images/webauthn-platform.svg" alt="#message("${_templatePrefix}.view.button.platform")"></figure>
             <p class="m0">
                 <small>
                     <strong class="m0 inline-block bold mr1">#message("${_templatePrefix}.view.button.platform")</strong>
-                    #message("${_templatePrefix}.view.authenticator-attachment.platform")
+                    <span>#message("${_templatePrefix}.view.authenticator-attachment.platform")</span>
                 </small>
             </p>
         </button>
         #end
 
         #if($_crossPlatformJson)
-        <button id="registerCrossPlatformButton" type="submit" class="button button-transparent login-chooser-item" name="authenticator-attachment" value="cross-platform">
+        <button id="registerCrossPlatformButton" type="submit" class="button button-transparent login-chooser-item button-loading" name="authenticator-attachment" value="cross-platform">
             <figure><img src="$!_staticResourceRootPath/assets/images/webauthn-cross-platform.svg" alt="#message("${_templatePrefix}.view.button.cross-platform")"></figure>
             <p class="m0">
                 <small>
                     <strong class="m0 inline-block bold mr1">#message("${_templatePrefix}.view.button.cross-platform")</strong>
-                    #message("${_templatePrefix}.view.authenticator-attachment.cross-platform")
+                    <span>#message("${_templatePrefix}.view.authenticator-attachment.cross-platform")</span>
                 </small>
             </p>
         </button>
@@ -78,6 +78,7 @@
     #parse("authenticator/webauthn/js/register")
 #end
 
+#parse("fragments/button-loading")
 #end ## /body
 
 #parse("layouts/default")
diff --git a/src/identity-server/templates/core/fragments/button-loading.vm b/src/identity-server/templates/core/fragments/button-loading.vm
new file mode 100644
index 00000000..ee06c4a2
--- /dev/null
+++ b/src/identity-server/templates/core/fragments/button-loading.vm
@@ -0,0 +1,97 @@
+#*
+ * Copyright (C) 2026 Curity AB. All rights reserved.
+ *
+ * The contents of this file are the property of Curity AB.
+ * You may not copy or use this file, in either source code
+ * or executable form, except in compliance with terms
+ * set by Curity AB.
+ *
+ * For further information, please contact Curity AB.
+ *#
+
+<script type="text/javascript" $!nonceAttr>
+    (function() {
+        var errorObserver = null;
+
+        // Function to remove loading state from all buttons
+        function removeLoadingState() {
+            var loadingButtons = document.querySelectorAll('.button-loading-active');
+            loadingButtons.forEach(function(btn) {
+                btn.classList.remove('button-loading-active');
+                btn.disabled = false;
+            });
+        }
+
+        // Function to check if error elements exist
+        function hasErrorElements() {
+            return document.querySelector('.alert-danger, .is-error, .error, [class*="error"]') !== null;
+        }
+
+        // Function to start watching for errors
+        function startErrorObserver() {
+            // Stop existing observer if any
+            if (errorObserver) {
+                errorObserver.disconnect();
+            }
+
+            // Create observer to watch for error elements being added to the DOM
+            errorObserver = new MutationObserver(function(mutations) {
+                if (hasErrorElements()) {
+                    removeLoadingState();
+                    errorObserver.disconnect();
+                    errorObserver = null;
+                }
+            });
+
+            // Start observing the document body for child additions and attribute changes
+            errorObserver.observe(document.body, {
+                childList: true,
+                subtree: true,
+                attributes: true,
+                attributeFilter: ['class']
+            });
+
+            // Stop observing after 5 seconds (successful navigation would unload the page)
+            setTimeout(function() {
+                if (errorObserver) {
+                    errorObserver.disconnect();
+                    errorObserver = null;
+                }
+            }, 5000);
+        }
+
+        // Remove loading state on page show (handles back button and errors)
+        window.addEventListener('pageshow', function(event) {
+            // Remove loading state when page is shown (including from cache)
+            removeLoadingState();
+        });
+
+        // Add loading state to all submit buttons on form submission
+        document.addEventListener('DOMContentLoaded', function() {
+            var forms = document.querySelectorAll('form');
+
+            forms.forEach(function(form) {
+                form.addEventListener('submit', function(e) {
+                    // Only apply loading if the form is valid
+                    // Check HTML5 form validation
+                    if (form.checkValidity && !form.checkValidity()) {
+                        return true;
+                    }
+
+                    // Add loading state to all submit buttons in this form
+                    var submitButtons = form.querySelectorAll('button[type="submit"], input[type="submit"]');
+
+                    submitButtons.forEach(function(btn) {
+                        if (!btn.classList.contains('button-loading-active')) {
+                            btn.classList.add('button-loading-active');
+                            btn.disabled = true;
+                        }
+                    });
+
+                    // Start watching for error messages
+                    startErrorObserver();
+                });
+            });
+        });
+    })();
+</script>
diff --git a/src/identity-server/templates/core/fragments/set-alias.vm b/src/identity-server/templates/core/fragments/set-alias.vm
index d7457e1e..818075e2 100644
--- a/src/identity-server/templates/core/fragments/set-alias.vm
+++ b/src/identity-server/templates/core/fragments/set-alias.vm
@@ -27,12 +27,13 @@
                    autofocus required autocapitalize="none" maxlength="30">
             <i class="form-field-icon icon ion-iphone"></i>
         </div>
-        <button type="submit" class="button button-fullwidth button-primary mt2 ">
-            #message("${_templatePrefix}.view.continue")
+        <button type="submit" class="button button-fullwidth button-primary mt2 button-loading">
+            <span>#message("${_templatePrefix}.view.continue")</span>
         </button>
     </div>
 </form>
 
+#parse("fragments/button-loading")
 #end
 
 #parse("layouts/default")
diff --git a/src/identity-server/templates/core/views/oauth/confirm-usercode.vm b/src/identity-server/templates/core/views/oauth/confirm-usercode.vm
index 993eb746..06965cd9 100644
--- a/src/identity-server/templates/core/views/oauth/confirm-usercode.vm
+++ b/src/identity-server/templates/core/views/oauth/confirm-usercode.vm
@@ -20,10 +20,11 @@
     <input type="hidden" name="confirmUsercode" value="on" />
     <h1>#message("views.oauth.confirm")</h1>
     <p>#message("views.oauth.confirm-description")</p>
-    <button type="submit" class="button button-fullwidth button-success button-medium mt2">#message("views.oauth.confirm-submit")</button>
+    <button type="submit" class="button button-fullwidth button-success button-medium mt2 button-loading"><span>#message("views.oauth.confirm-submit")</span></button>
 
 </form>
 
+#parse("fragments/button-loading")
 #end
 
 
diff --git a/src/identity-server/templates/core/views/oauth/consent.vm b/src/identity-server/templates/core/views/oauth/consent.vm
index 3e58b26a..1522b806 100644
--- a/src/identity-server/templates/core/views/oauth/consent.vm
+++ b/src/identity-server/templates/core/views/oauth/consent.vm
@@ -142,10 +142,10 @@
 
 #* If all the required consent is given, enable the submit button *#
 
-    <input type="submit" class="button button-medium button-success button-fullwidth $!_errorClass $!successClass" value='#message("views.oauth.consent.submit")' name="submit_consent" id="cancel_button" />
+    <button type="submit" class="button button-medium button-success button-fullwidth button-loading $!_errorClass $!successClass" name="submit_consent" id="cancel_button"><span>#message("views.oauth.consent.submit")</span></button>
 
     <div class="login-actions center py2">
-        <input type="submit" name="cancel_consent" class="btn muted regular btn-link" value='#message("views.oauth.consent.cancel")' id="submit_button"/>
+        <button type="submit" name="cancel_consent" class="btn muted regular btn-link button-loading" id="submit_button"><span>#message("views.oauth.consent.cancel")</span></button>
 
         #if ($_client.get("policyUrl") || $_client.get("termsOfServiceUrl"))
             <br/>
@@ -169,6 +169,7 @@
 
 
 </form>
+#parse("fragments/button-loading")
 #end
 
 
diff --git a/src/identity-server/templates/core/views/oauth/enter-usercode.vm b/src/identity-server/templates/core/views/oauth/enter-usercode.vm
index 274aebeb..89091d5a 100644
--- a/src/identity-server/templates/core/views/oauth/enter-usercode.vm
+++ b/src/identity-server/templates/core/views/oauth/enter-usercode.vm
@@ -23,10 +23,11 @@
     #set($otpInputLength = $_userCodeLength)
     #parse("fragments/otp-input")
 
-    <input type="submit" disabled class="button button-medium button-primary button-fullwidth" value='#message("views.oauth.enter-user-code-submit")' tabindex="$tabindex" $!disabled>
+    <button type="submit" disabled class="button button-medium button-primary button-fullwidth button-loading" tabindex="$tabindex" $!disabled><span>#message("views.oauth.enter-user-code-submit")</span></button>
 
 </form>
 
+#parse("fragments/button-loading")
 #end
 
 

From 5695a763b356d101ccadf34b3a83cc6a3790ed4c Mon Sep 17 00:00:00 2001
From: Urban Sanden <hej@urre.me>
Date: Tue, 17 Mar 2026 10:06:45 +0100
Subject: [PATCH 2/2] IS-11032 Preserve submit button value and original
 disabled state during loading spinner

---
 .../core/fragments/button-loading.vm          | 29 ++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

diff --git a/src/identity-server/templates/core/fragments/button-loading.vm b/src/identity-server/templates/core/fragments/button-loading.vm
index ee06c4a2..93da8e9d 100644
--- a/src/identity-server/templates/core/fragments/button-loading.vm
+++ b/src/identity-server/templates/core/fragments/button-loading.vm
@@ -18,7 +18,15 @@
             var loadingButtons = document.querySelectorAll('.button-loading-active');
             loadingButtons.forEach(function(btn) {
                 btn.classList.remove('button-loading-active');
-                btn.disabled = false;
+                // Only re-enable if the button wasn't originally disabled
+                if (!btn.hasAttribute('data-was-disabled')) {
+                    btn.disabled = false;
+                }
+            });
+            // Clean up any hidden inputs we injected
+            var hiddenInputs = document.querySelectorAll('.button-loading-hidden-input');
+            hiddenInputs.forEach(function(input) {
+                input.parentNode.removeChild(input);
             });
         }
 
@@ -81,8 +89,27 @@
                     // Add loading state to all submit buttons in this form
                     var submitButtons = form.querySelectorAll('button[type="submit"], input[type="submit"]');
 
+                    // Find the button that actually triggered the submit (if any)
+                    var activeElement = document.activeElement;
+                    var clickedButton = (activeElement && activeElement.form === form &&
+                        (activeElement.type === 'submit')) ? activeElement : null;
+
                     submitButtons.forEach(function(btn) {
                         if (!btn.classList.contains('button-loading-active')) {
+                            // If this button has a name and is the one that was clicked,
+                            // preserve its value as a hidden input so the server receives it
+                            if (btn.name && btn === clickedButton) {
+                                var hidden = document.createElement('input');
+                                hidden.type = 'hidden';
+                                hidden.name = btn.name;
+                                hidden.value = btn.value || '';
+                                hidden.className = 'button-loading-hidden-input';
+                                form.appendChild(hidden);
+                            }
+                            // Remember if this button was already disabled
+                            if (btn.disabled) {
+                                btn.setAttribute('data-was-disabled', 'true');
+                            }
                             btn.classList.add('button-loading-active');
                             btn.disabled = true;
                         }