From bc2ccf671e0dd04d633f3d7b43840633b080c434 Mon Sep 17 00:00:00 2001
From: Xiao Yijun <xiaoyijun@silverhand.io>
Date: Wed, 17 Jul 2024 11:08:01 +0800
Subject: [PATCH] refactor(console): use button loading in experience flow if
 possible (#6234)

---
 .../Providers/LoadingLayerProvider/index.tsx  |  6 +-
 .../components/LoadingLayer/index.module.scss |  7 ---
 .../src/components/LoadingLayer/index.tsx     |  6 +-
 .../components/LoadingMask/index.module.scss  |  8 +++
 .../src/components/LoadingMask/index.tsx      | 13 +++++
 .../src/containers/SetPassword/Lite.tsx       | 15 +++--
 .../containers/SetPassword/SetPassword.tsx    | 15 +++--
 .../src/containers/SetPassword/index.tsx      |  2 +-
 .../TotpCodeVerification/index.module.scss    |  4 ++
 .../containers/TotpCodeVerification/index.tsx | 57 ++++++++++++++-----
 .../use-totp-code-verification.ts             |  4 +-
 .../VerificationCode/index.module.scss        |  3 +-
 .../src/containers/VerificationCode/index.tsx | 53 +++++++++++++----
 .../experience/src/pages/Consent/index.tsx    |  6 +-
 .../Continue/IdentifierProfileForm/index.tsx  |  6 +-
 .../ForgotPasswordForm/index.tsx              |  7 ++-
 .../MfaBinding/BackupCodeBinding/index.tsx    |  9 ++-
 .../MfaBinding/WebAuthnBinding/index.tsx      |  9 ++-
 .../BackupCodeVerification/index.tsx          | 10 +++-
 .../WebAuthnVerification/index.tsx            |  9 ++-
 .../Register/IdentifierRegisterForm/index.tsx |  3 +-
 .../SignIn/IdentifierSignInForm/index.tsx     |  3 +-
 .../pages/SignIn/PasswordSignInForm/index.tsx |  3 +-
 .../SignInPassword/PasswordForm/index.tsx     |  4 +-
 .../src/pages/SingleSignOnEmail/index.tsx     |  9 ++-
 25 files changed, 194 insertions(+), 77 deletions(-)
 create mode 100644 packages/experience/src/components/LoadingMask/index.module.scss
 create mode 100644 packages/experience/src/components/LoadingMask/index.tsx

diff --git a/packages/experience/src/Providers/LoadingLayerProvider/index.tsx b/packages/experience/src/Providers/LoadingLayerProvider/index.tsx
index eccc54c9b..2c3601ee0 100644
--- a/packages/experience/src/Providers/LoadingLayerProvider/index.tsx
+++ b/packages/experience/src/Providers/LoadingLayerProvider/index.tsx
@@ -1,18 +1,16 @@
 import { useContext } from 'react';
 import { Outlet } from 'react-router-dom';
-import { useDebouncedLoader } from 'use-debounced-loader';
 
 import PageContext from '@/Providers/PageContextProvider/PageContext';
-import LoadingLayer from '@/components/LoadingLayer';
+import LoadingMask from '@/components/LoadingMask';
 
 const LoadingLayerProvider = () => {
   const { loading } = useContext(PageContext);
-  const debouncedLoading = useDebouncedLoader(loading, 500);
 
   return (
     <>
       <Outlet />
-      {debouncedLoading && <LoadingLayer />}
+      {loading && <LoadingMask />}
     </>
   );
 };
diff --git a/packages/experience/src/components/LoadingLayer/index.module.scss b/packages/experience/src/components/LoadingLayer/index.module.scss
index 4f24e5e8b..115c477e4 100644
--- a/packages/experience/src/components/LoadingLayer/index.module.scss
+++ b/packages/experience/src/components/LoadingLayer/index.module.scss
@@ -1,12 +1,5 @@
 @use '@/scss/underscore' as _;
 
-.overlay {
-  position: fixed;
-  inset: 0;
-  @include _.flex-column;
-  z-index: 300;
-}
-
 .loadingIcon {
   color: var(--color-type-primary);
   animation: rotating 1s steps(12, end) infinite;
diff --git a/packages/experience/src/components/LoadingLayer/index.tsx b/packages/experience/src/components/LoadingLayer/index.tsx
index 4db64f3a1..52b43e236 100644
--- a/packages/experience/src/components/LoadingLayer/index.tsx
+++ b/packages/experience/src/components/LoadingLayer/index.tsx
@@ -1,14 +1,16 @@
+import LoadingMask from '../LoadingMask';
+
 import LoadingIcon from './LoadingIcon';
 import * as styles from './index.module.scss';
 
 export { default as LoadingIcon } from './LoadingIcon';
 
 const LoadingLayer = () => (
-  <div className={styles.overlay}>
+  <LoadingMask>
     <div className={styles.container}>
       <LoadingIcon />
     </div>
-  </div>
+  </LoadingMask>
 );
 
 export default LoadingLayer;
diff --git a/packages/experience/src/components/LoadingMask/index.module.scss b/packages/experience/src/components/LoadingMask/index.module.scss
new file mode 100644
index 000000000..30e65e818
--- /dev/null
+++ b/packages/experience/src/components/LoadingMask/index.module.scss
@@ -0,0 +1,8 @@
+@use '@/scss/underscore' as _;
+
+.overlay {
+  position: fixed;
+  inset: 0;
+  @include _.flex-column;
+  z-index: 300;
+}
diff --git a/packages/experience/src/components/LoadingMask/index.tsx b/packages/experience/src/components/LoadingMask/index.tsx
new file mode 100644
index 000000000..b77e44351
--- /dev/null
+++ b/packages/experience/src/components/LoadingMask/index.tsx
@@ -0,0 +1,13 @@
+import { type ReactNode } from 'react';
+
+import * as styles from './index.module.scss';
+
+type Props = {
+  readonly children?: ReactNode;
+};
+
+const LoadingMask = ({ children }: Props) => {
+  return <div className={styles.overlay}>{children}</div>;
+};
+
+export default LoadingMask;
diff --git a/packages/experience/src/containers/SetPassword/Lite.tsx b/packages/experience/src/containers/SetPassword/Lite.tsx
index aa1abd3b8..e3c831d76 100644
--- a/packages/experience/src/containers/SetPassword/Lite.tsx
+++ b/packages/experience/src/containers/SetPassword/Lite.tsx
@@ -14,7 +14,7 @@ type Props = {
   readonly className?: string;
   // eslint-disable-next-line react/boolean-prop-naming
   readonly autoFocus?: boolean;
-  readonly onSubmit: (password: string) => void;
+  readonly onSubmit: (password: string) => Promise<void>;
   readonly errorMessage?: string;
   readonly clearErrorMessage?: () => void;
 };
@@ -29,7 +29,7 @@ const Lite = ({ className, autoFocus, onSubmit, errorMessage, clearErrorMessage
   const {
     register,
     handleSubmit,
-    formState: { errors, isValid },
+    formState: { errors, isValid, isSubmitting },
   } = useForm<FieldState>({
     reValidateMode: 'onBlur',
     defaultValues: { newPassword: '' },
@@ -45,8 +45,8 @@ const Lite = ({ className, autoFocus, onSubmit, errorMessage, clearErrorMessage
     (event?: React.FormEvent<HTMLFormElement>) => {
       clearErrorMessage?.();
 
-      void handleSubmit((data, event) => {
-        onSubmit(data.newPassword);
+      void handleSubmit(async (data) => {
+        await onSubmit(data.newPassword);
       })(event);
     },
     [clearErrorMessage, handleSubmit, onSubmit]
@@ -70,7 +70,12 @@ const Lite = ({ className, autoFocus, onSubmit, errorMessage, clearErrorMessage
 
       {errorMessage && <ErrorMessage className={styles.formErrors}>{errorMessage}</ErrorMessage>}
 
-      <Button name="submit" title="action.save_password" htmlType="submit" />
+      <Button
+        name="submit"
+        title="action.save_password"
+        htmlType="submit"
+        isLoading={isSubmitting}
+      />
 
       <input hidden type="submit" />
     </form>
diff --git a/packages/experience/src/containers/SetPassword/SetPassword.tsx b/packages/experience/src/containers/SetPassword/SetPassword.tsx
index e2e7d6ff0..0505c7bcf 100644
--- a/packages/experience/src/containers/SetPassword/SetPassword.tsx
+++ b/packages/experience/src/containers/SetPassword/SetPassword.tsx
@@ -17,7 +17,7 @@ type Props = {
   readonly className?: string;
   // eslint-disable-next-line react/boolean-prop-naming
   readonly autoFocus?: boolean;
-  readonly onSubmit: (password: string) => void;
+  readonly onSubmit: (password: string) => Promise<void>;
   readonly errorMessage?: string;
   readonly clearErrorMessage?: () => void;
 };
@@ -43,7 +43,7 @@ const SetPassword = ({
     watch,
     resetField,
     handleSubmit,
-    formState: { errors, isValid },
+    formState: { errors, isValid, isSubmitting },
   } = useForm<FieldState>({
     reValidateMode: 'onBlur',
     defaultValues: { newPassword: '', confirmPassword: '' },
@@ -59,8 +59,8 @@ const SetPassword = ({
     (event?: React.FormEvent<HTMLFormElement>) => {
       clearErrorMessage?.();
 
-      void handleSubmit((data, event) => {
-        onSubmit(data.newPassword);
+      void handleSubmit(async (data) => {
+        await onSubmit(data.newPassword);
       })(event);
     },
     [clearErrorMessage, handleSubmit, onSubmit]
@@ -119,7 +119,12 @@ const SetPassword = ({
 
       <TogglePassword isChecked={showPassword} onChange={setShowPassword} />
 
-      <Button name="submit" title="action.save_password" htmlType="submit" />
+      <Button
+        name="submit"
+        title="action.save_password"
+        htmlType="submit"
+        isLoading={isSubmitting}
+      />
 
       <input hidden type="submit" />
     </form>
diff --git a/packages/experience/src/containers/SetPassword/index.tsx b/packages/experience/src/containers/SetPassword/index.tsx
index 6d0c0b160..e75450ce1 100644
--- a/packages/experience/src/containers/SetPassword/index.tsx
+++ b/packages/experience/src/containers/SetPassword/index.tsx
@@ -7,7 +7,7 @@ type Props = {
   readonly className?: string;
   // eslint-disable-next-line react/boolean-prop-naming
   readonly autoFocus?: boolean;
-  readonly onSubmit: (password: string) => void;
+  readonly onSubmit: (password: string) => Promise<void>;
   readonly errorMessage?: string;
   readonly clearErrorMessage?: () => void;
   readonly maxLength?: number;
diff --git a/packages/experience/src/containers/TotpCodeVerification/index.module.scss b/packages/experience/src/containers/TotpCodeVerification/index.module.scss
index d49751776..5eada9f9f 100644
--- a/packages/experience/src/containers/TotpCodeVerification/index.module.scss
+++ b/packages/experience/src/containers/TotpCodeVerification/index.module.scss
@@ -3,3 +3,7 @@
 .totpCodeInput {
   margin-top: _.unit(4);
 }
+
+.continueButton {
+  margin-top: _.unit(6);
+}
diff --git a/packages/experience/src/containers/TotpCodeVerification/index.tsx b/packages/experience/src/containers/TotpCodeVerification/index.tsx
index 2216eb2ec..16d9897ae 100644
--- a/packages/experience/src/containers/TotpCodeVerification/index.tsx
+++ b/packages/experience/src/containers/TotpCodeVerification/index.tsx
@@ -1,5 +1,6 @@
 import { useCallback, useState } from 'react';
 
+import Button from '@/components/Button';
 import VerificationCodeInput from '@/components/VerificationCode';
 import { type UserMfaFlow } from '@/types';
 
@@ -8,32 +9,58 @@ import useTotpCodeVerification from './use-totp-code-verification';
 
 const totpCodeLength = 6;
 
+const isCodeReady = (code: string[]) => {
+  return code.length === totpCodeLength && code.every(Boolean);
+};
+
 type Props = {
   readonly flow: UserMfaFlow;
 };
 
 const TotpCodeVerification = ({ flow }: Props) => {
-  const [code, setCode] = useState<string[]>([]);
+  const [codeInput, setCodeInput] = useState<string[]>([]);
   const errorCallback = useCallback(() => {
-    setCode([]);
+    setCodeInput([]);
   }, []);
 
   const { errorMessage, onSubmit } = useTotpCodeVerification(flow, errorCallback);
 
-  return (
-    <VerificationCodeInput
-      name="totpCode"
-      value={code}
-      className={styles.totpCodeInput}
-      error={errorMessage}
-      onChange={(code) => {
-        setCode(code);
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
-        if (code.length === totpCodeLength && code.every(Boolean)) {
-          onSubmit(code.join(''));
-        }
-      }}
-    />
+  const handleSubmit = useCallback(
+    async (code: string[]) => {
+      setIsSubmitting(true);
+      await onSubmit(code.join(''));
+      setIsSubmitting(false);
+    },
+    [onSubmit]
+  );
+
+  return (
+    <>
+      <VerificationCodeInput
+        name="totpCode"
+        value={codeInput}
+        className={styles.totpCodeInput}
+        error={errorMessage}
+        onChange={(code) => {
+          setCodeInput(code);
+          if (isCodeReady(code)) {
+            void handleSubmit(code);
+          }
+        }}
+      />
+      <Button
+        title="action.continue"
+        type="primary"
+        className={styles.continueButton}
+        isLoading={isSubmitting}
+        isDisabled={!isCodeReady(codeInput)}
+        onClick={() => {
+          void handleSubmit(codeInput);
+        }}
+      />
+    </>
   );
 };
 
diff --git a/packages/experience/src/containers/TotpCodeVerification/use-totp-code-verification.ts b/packages/experience/src/containers/TotpCodeVerification/use-totp-code-verification.ts
index 313aff5fc..3c05c6e93 100644
--- a/packages/experience/src/containers/TotpCodeVerification/use-totp-code-verification.ts
+++ b/packages/experience/src/containers/TotpCodeVerification/use-totp-code-verification.ts
@@ -19,8 +19,8 @@ const useTotpCodeVerification = (flow: UserMfaFlow, errorCallback?: () => void)
   );
 
   const onSubmit = useCallback(
-    (code: string) => {
-      void sendMfaPayload(
+    async (code: string) => {
+      await sendMfaPayload(
         { flow, payload: { type: MfaFactor.TOTP, code } },
         invalidCodeErrorHandlers,
         errorCallback
diff --git a/packages/experience/src/containers/VerificationCode/index.module.scss b/packages/experience/src/containers/VerificationCode/index.module.scss
index 4876069e5..e7fce0f45 100644
--- a/packages/experience/src/containers/VerificationCode/index.module.scss
+++ b/packages/experience/src/containers/VerificationCode/index.module.scss
@@ -27,7 +27,8 @@
     align-self: start;
   }
 
-  .switch {
+  .switch,
+  .continueButton {
     margin-top: _.unit(6);
   }
 }
diff --git a/packages/experience/src/containers/VerificationCode/index.tsx b/packages/experience/src/containers/VerificationCode/index.tsx
index f086aea17..35e6c6341 100644
--- a/packages/experience/src/containers/VerificationCode/index.tsx
+++ b/packages/experience/src/containers/VerificationCode/index.tsx
@@ -1,8 +1,9 @@
 import { SignInIdentifier } from '@logto/schemas';
 import classNames from 'classnames';
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useMemo } from 'react';
 import { useTranslation, Trans } from 'react-i18next';
 
+import Button from '@/components/Button';
 import TextLink from '@/components/TextLink';
 import VerificationCodeInput, { defaultLength } from '@/components/VerificationCode';
 import { UserFlow } from '@/types';
@@ -21,13 +22,18 @@ type Props = {
 };
 
 const VerificationCode = ({ flow, identifier, className, hasPasswordButton, target }: Props) => {
-  const [code, setCode] = useState<string[]>([]);
+  const [codeInput, setCodeInput] = useState<string[]>([]);
   const { t } = useTranslation();
 
+  const isCodeInputReady = useMemo(
+    () => codeInput.length === defaultLength && codeInput.every(Boolean),
+    [codeInput]
+  );
+
   const useVerificationCode = getCodeVerificationHookByFlow(flow);
 
   const errorCallback = useCallback(() => {
-    setCode([]);
+    setCodeInput([]);
   }, []);
 
   const { errorMessage, clearErrorMessage, onSubmit } = useVerificationCode(
@@ -42,24 +48,37 @@ const VerificationCode = ({ flow, identifier, className, hasPasswordButton, targ
     target
   );
 
-  useEffect(() => {
-    if (code.length === defaultLength && code.every(Boolean)) {
-      const payload =
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleSubmit = useCallback(
+    async (code: string[]) => {
+      setIsSubmitting(true);
+
+      await onSubmit(
         identifier === SignInIdentifier.Email
           ? { email: target, verificationCode: code.join('') }
-          : { phone: target, verificationCode: code.join('') };
-      void onSubmit(payload);
+          : { phone: target, verificationCode: code.join('') }
+      );
+
+      setIsSubmitting(false);
+    },
+    [identifier, onSubmit, target]
+  );
+
+  useEffect(() => {
+    if (isCodeInputReady) {
+      void handleSubmit(codeInput);
     }
-  }, [code, identifier, onSubmit, target]);
+  }, [codeInput, handleSubmit, isCodeInputReady]);
 
   return (
     <form className={classNames(styles.form, className)}>
       <VerificationCodeInput
         name="passcode"
         className={classNames(styles.inputField, errorMessage && styles.withError)}
-        value={code}
+        value={codeInput}
         error={errorMessage}
-        onChange={setCode}
+        onChange={setCodeInput}
       />
       <div className={styles.message}>
         {isRunning ? (
@@ -75,7 +94,7 @@ const VerificationCode = ({ flow, identifier, className, hasPasswordButton, targ
                   onClick={async () => {
                     clearErrorMessage();
                     await onResendVerificationCode();
-                    setCode([]);
+                    setCodeInput([]);
                   }}
                 />
               ),
@@ -88,6 +107,16 @@ const VerificationCode = ({ flow, identifier, className, hasPasswordButton, targ
       {flow === UserFlow.SignIn && hasPasswordButton && (
         <PasswordSignInLink className={styles.switch} />
       )}
+      <Button
+        title="action.continue"
+        type="primary"
+        isDisabled={!isCodeInputReady}
+        isLoading={isSubmitting}
+        className={styles.continueButton}
+        onClick={() => {
+          void handleSubmit(codeInput);
+        }}
+      />
     </form>
   );
 };
diff --git a/packages/experience/src/pages/Consent/index.tsx b/packages/experience/src/pages/Consent/index.tsx
index 0f5c012c8..8052e11d8 100644
--- a/packages/experience/src/pages/Consent/index.tsx
+++ b/packages/experience/src/pages/Consent/index.tsx
@@ -27,10 +27,14 @@ const Consent = () => {
   const [consentData, setConsentData] = useState<ConsentInfoResponse>();
   const [selectedOrganization, setSelectedOrganization] = useState<Organization>();
 
+  const [isConsentLoading, setIsConsentLoading] = useState(false);
+
   const asyncGetConsentInfo = useApi(getConsentInfo);
 
   const consentHandler = useCallback(async () => {
+    setIsConsentLoading(true);
     const [error, result] = await asyncConsent(selectedOrganization?.id);
+    setIsConsentLoading(false);
 
     if (error) {
       await handleError(error);
@@ -113,7 +117,7 @@ const Consent = () => {
             window.location.replace(consentData.redirectUri);
           }}
         />
-        <Button title="action.authorize" onClick={consentHandler} />
+        <Button title="action.authorize" isLoading={isConsentLoading} onClick={consentHandler} />
       </div>
       {!showTerms && (
         <div className={styles.redirectUri}>
diff --git a/packages/experience/src/pages/Continue/IdentifierProfileForm/index.tsx b/packages/experience/src/pages/Continue/IdentifierProfileForm/index.tsx
index 19e3b9448..b26484ed6 100644
--- a/packages/experience/src/pages/Continue/IdentifierProfileForm/index.tsx
+++ b/packages/experience/src/pages/Continue/IdentifierProfileForm/index.tsx
@@ -43,7 +43,7 @@ const IdentifierProfileForm = ({
   const {
     handleSubmit,
     control,
-    formState: { errors, isValid },
+    formState: { errors, isValid, isSubmitting },
   } = useForm<FormState>({
     reValidateMode: 'onBlur',
     defaultValues: {
@@ -61,7 +61,7 @@ const IdentifierProfileForm = ({
   }, [clearErrorMessage, isValid]);
 
   const onSubmitHandler = useCallback(
-    async (event?: React.FormEvent<HTMLFormElement>) => {
+    (event?: React.FormEvent<HTMLFormElement>) => {
       clearErrorMessage?.();
 
       void handleSubmit(async ({ identifier: { type, value } }) => {
@@ -115,7 +115,7 @@ const IdentifierProfileForm = ({
 
       {errorMessage && <ErrorMessage className={styles.formErrors}>{errorMessage}</ErrorMessage>}
 
-      <Button title="action.continue" htmlType="submit" />
+      <Button title="action.continue" htmlType="submit" isLoading={isSubmitting} />
 
       <input hidden type="submit" />
     </form>
diff --git a/packages/experience/src/pages/ForgotPassword/ForgotPasswordForm/index.tsx b/packages/experience/src/pages/ForgotPassword/ForgotPasswordForm/index.tsx
index 381bf12bd..f05fd259b 100644
--- a/packages/experience/src/pages/ForgotPassword/ForgotPasswordForm/index.tsx
+++ b/packages/experience/src/pages/ForgotPassword/ForgotPasswordForm/index.tsx
@@ -42,12 +42,13 @@ const ForgotPasswordForm = ({
     UserFlow.ForgotPassword
   );
 
-  const { setForgotPasswordIdentifierInputValue } = useContext(UserInteractionContext);
+  const { setForgotPasswordIdentifierInputValue, setIdentifierInputValue } =
+    useContext(UserInteractionContext);
 
   const {
     handleSubmit,
     control,
-    formState: { errors, isValid },
+    formState: { errors, isValid, isSubmitting },
   } = useForm<FormState>({
     reValidateMode: 'onBlur',
     defaultValues: {
@@ -122,7 +123,7 @@ const ForgotPasswordForm = ({
 
       {errorMessage && <ErrorMessage className={styles.formErrors}>{errorMessage}</ErrorMessage>}
 
-      <Button title="action.continue" htmlType="submit" />
+      <Button title="action.continue" htmlType="submit" isLoading={isSubmitting} />
 
       <input hidden type="submit" />
     </form>
diff --git a/packages/experience/src/pages/MfaBinding/BackupCodeBinding/index.tsx b/packages/experience/src/pages/MfaBinding/BackupCodeBinding/index.tsx
index 3d113036c..bf5f29b3d 100644
--- a/packages/experience/src/pages/MfaBinding/BackupCodeBinding/index.tsx
+++ b/packages/experience/src/pages/MfaBinding/BackupCodeBinding/index.tsx
@@ -1,5 +1,6 @@
 import { MfaFactor } from '@logto/schemas';
 import { t } from 'i18next';
+import { useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { validate } from 'superstruct';
 
@@ -18,6 +19,7 @@ import * as styles from './index.module.scss';
 const BackupCodeBinding = () => {
   const { copyText, downloadText } = useTextHandler();
   const sendMfaPayload = useSendMfaPayload();
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   const { state } = useLocation();
   const [, backupCodeBindingState] = validate(state, backupCodeBindingStateGuard);
@@ -64,11 +66,14 @@ const BackupCodeBinding = () => {
         </div>
         <Button
           title="action.continue"
-          onClick={() => {
-            void sendMfaPayload({
+          isLoading={isSubmitting}
+          onClick={async () => {
+            setIsSubmitting(true);
+            await sendMfaPayload({
               flow: UserMfaFlow.MfaBinding,
               payload: { type: MfaFactor.BackupCode },
             });
+            setIsSubmitting(false);
           }}
         />
       </div>
diff --git a/packages/experience/src/pages/MfaBinding/WebAuthnBinding/index.tsx b/packages/experience/src/pages/MfaBinding/WebAuthnBinding/index.tsx
index 1678b42b8..9eca7bc98 100644
--- a/packages/experience/src/pages/MfaBinding/WebAuthnBinding/index.tsx
+++ b/packages/experience/src/pages/MfaBinding/WebAuthnBinding/index.tsx
@@ -1,4 +1,5 @@
 import { conditional } from '@silverhand/essentials';
+import { useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { validate } from 'superstruct';
 
@@ -19,6 +20,7 @@ const WebAuthnBinding = () => {
   const [, webAuthnState] = validate(state, webAuthnStateGuard);
   const handleWebAuthn = useWebAuthnOperation();
   const skipMfa = useSkipMfa();
+  const [isCreatingPasskey, setIsCreatingPasskey] = useState(false);
 
   if (!webAuthnState) {
     return <ErrorPage title="error.invalid_session" />;
@@ -38,8 +40,11 @@ const WebAuthnBinding = () => {
     >
       <Button
         title="mfa.create_a_passkey"
-        onClick={() => {
-          void handleWebAuthn(options);
+        isLoading={isCreatingPasskey}
+        onClick={async () => {
+          setIsCreatingPasskey(true);
+          await handleWebAuthn(options);
+          setIsCreatingPasskey(false);
         }}
       />
       <SwitchMfaFactorsLink
diff --git a/packages/experience/src/pages/MfaVerification/BackupCodeVerification/index.tsx b/packages/experience/src/pages/MfaVerification/BackupCodeVerification/index.tsx
index c5b142cbd..f7defbeb0 100644
--- a/packages/experience/src/pages/MfaVerification/BackupCodeVerification/index.tsx
+++ b/packages/experience/src/pages/MfaVerification/BackupCodeVerification/index.tsx
@@ -22,12 +22,16 @@ type FormState = {
 const BackupCodeVerification = () => {
   const flowState = useMfaFlowState();
   const sendMfaPayload = useSendMfaPayload();
-  const { register, handleSubmit } = useForm<FormState>({ defaultValues: { code: '' } });
+  const {
+    register,
+    handleSubmit,
+    formState: { isSubmitting },
+  } = useForm<FormState>({ defaultValues: { code: '' } });
 
   const onSubmitHandler = useCallback(
     (event?: FormEvent<HTMLFormElement>) => {
       void handleSubmit(async ({ code }) => {
-        void sendMfaPayload({
+        await sendMfaPayload({
           flow: UserMfaFlow.MfaVerification,
           payload: { type: MfaFactor.BackupCode, code },
         });
@@ -53,7 +57,7 @@ const BackupCodeVerification = () => {
             className={styles.backupCodeInput}
             {...register('code')}
           />
-          <Button title="action.continue" htmlType="submit" />
+          <Button title="action.continue" htmlType="submit" isLoading={isSubmitting} />
         </form>
       </SectionLayout>
       <SwitchMfaFactorsLink
diff --git a/packages/experience/src/pages/MfaVerification/WebAuthnVerification/index.tsx b/packages/experience/src/pages/MfaVerification/WebAuthnVerification/index.tsx
index 91bdf5af4..1f25f16f4 100644
--- a/packages/experience/src/pages/MfaVerification/WebAuthnVerification/index.tsx
+++ b/packages/experience/src/pages/MfaVerification/WebAuthnVerification/index.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { validate } from 'superstruct';
 
@@ -17,6 +18,7 @@ const WebAuthnVerification = () => {
   const { state } = useLocation();
   const [, webAuthnState] = validate(state, webAuthnStateGuard);
   const handleWebAuthn = useWebAuthnOperation();
+  const [isVerifying, setIsVerifying] = useState(false);
 
   if (!webAuthnState) {
     return <ErrorPage title="error.invalid_session" />;
@@ -37,8 +39,11 @@ const WebAuthnVerification = () => {
         <Button
           title="action.verify_via_passkey"
           className={styles.verifyButton}
-          onClick={() => {
-            void handleWebAuthn(options);
+          isLoading={isVerifying}
+          onClick={async () => {
+            setIsVerifying(true);
+            await handleWebAuthn(options);
+            setIsVerifying(false);
           }}
         />
       </SectionLayout>
diff --git a/packages/experience/src/pages/Register/IdentifierRegisterForm/index.tsx b/packages/experience/src/pages/Register/IdentifierRegisterForm/index.tsx
index cc198194b..3d03e1b18 100644
--- a/packages/experience/src/pages/Register/IdentifierRegisterForm/index.tsx
+++ b/packages/experience/src/pages/Register/IdentifierRegisterForm/index.tsx
@@ -40,7 +40,7 @@ const IdentifierRegisterForm = ({ className, autoFocus, signUpMethods }: Props)
   const {
     watch,
     handleSubmit,
-    formState: { errors, isValid },
+    formState: { errors, isValid, isSubmitting },
     control,
   } = useForm<FormState>({
     reValidateMode: 'onBlur',
@@ -154,6 +154,7 @@ const IdentifierRegisterForm = ({ className, autoFocus, signUpMethods }: Props)
         title={showSingleSignOnForm ? 'action.single_sign_on' : 'action.create_account'}
         icon={showSingleSignOnForm ? <LockIcon /> : undefined}
         htmlType="submit"
+        isLoading={isSubmitting}
       />
 
       <input hidden type="submit" />
diff --git a/packages/experience/src/pages/SignIn/IdentifierSignInForm/index.tsx b/packages/experience/src/pages/SignIn/IdentifierSignInForm/index.tsx
index 39e2c2596..5049b7f17 100644
--- a/packages/experience/src/pages/SignIn/IdentifierSignInForm/index.tsx
+++ b/packages/experience/src/pages/SignIn/IdentifierSignInForm/index.tsx
@@ -44,7 +44,7 @@ const IdentifierSignInForm = ({ className, autoFocus, signInMethods }: Props) =>
     watch,
     handleSubmit,
     control,
-    formState: { errors, isValid },
+    formState: { errors, isValid, isSubmitting },
   } = useForm<FormState>({
     reValidateMode: 'onBlur',
   });
@@ -153,6 +153,7 @@ const IdentifierSignInForm = ({ className, autoFocus, signInMethods }: Props) =>
         title={showSingleSignOnForm ? 'action.single_sign_on' : 'action.sign_in'}
         icon={showSingleSignOnForm ? <LockIcon /> : undefined}
         htmlType="submit"
+        isLoading={isSubmitting}
       />
 
       <input hidden type="submit" />
diff --git a/packages/experience/src/pages/SignIn/PasswordSignInForm/index.tsx b/packages/experience/src/pages/SignIn/PasswordSignInForm/index.tsx
index 3ce300d5e..47c91e213 100644
--- a/packages/experience/src/pages/SignIn/PasswordSignInForm/index.tsx
+++ b/packages/experience/src/pages/SignIn/PasswordSignInForm/index.tsx
@@ -45,7 +45,7 @@ const PasswordSignInForm = ({ className, autoFocus, signInMethods }: Props) => {
     register,
     handleSubmit,
     control,
-    formState: { errors, isValid },
+    formState: { errors, isValid, isSubmitting },
   } = useForm<FormState>({
     reValidateMode: 'onBlur',
     defaultValues: {
@@ -174,6 +174,7 @@ const PasswordSignInForm = ({ className, autoFocus, signInMethods }: Props) => {
         title={showSingleSignOnForm ? 'action.single_sign_on' : 'action.sign_in'}
         icon={showSingleSignOnForm ? <LockIcon /> : undefined}
         htmlType="submit"
+        isLoading={isSubmitting}
       />
 
       <input hidden type="submit" />
diff --git a/packages/experience/src/pages/SignInPassword/PasswordForm/index.tsx b/packages/experience/src/pages/SignInPassword/PasswordForm/index.tsx
index 2deb89de7..207c3cb2b 100644
--- a/packages/experience/src/pages/SignInPassword/PasswordForm/index.tsx
+++ b/packages/experience/src/pages/SignInPassword/PasswordForm/index.tsx
@@ -47,7 +47,7 @@ const PasswordForm = ({
     register,
     handleSubmit,
     control,
-    formState: { errors, isValid },
+    formState: { errors, isValid, isSubmitting },
   } = useForm<FormState>({
     reValidateMode: 'onBlur',
     defaultValues: {
@@ -114,7 +114,7 @@ const PasswordForm = ({
         <ForgotPasswordLink className={styles.link} identifier={identifier} value={value} />
       )}
 
-      <Button title="action.continue" name="submit" htmlType="submit" />
+      <Button title="action.continue" name="submit" htmlType="submit" isLoading={isSubmitting} />
 
       {identifier !== SignInIdentifier.Username && isVerificationCodeEnabled && (
         <VerificationCodeLink className={styles.switch} identifier={identifier} value={value} />
diff --git a/packages/experience/src/pages/SingleSignOnEmail/index.tsx b/packages/experience/src/pages/SingleSignOnEmail/index.tsx
index 86437fe4d..3abe821ff 100644
--- a/packages/experience/src/pages/SingleSignOnEmail/index.tsx
+++ b/packages/experience/src/pages/SingleSignOnEmail/index.tsx
@@ -26,7 +26,7 @@ const SingleSignOnEmail = () => {
   const {
     handleSubmit,
     control,
-    formState: { errors, isValid },
+    formState: { errors, isValid, isSubmitting },
   } = useForm<FormState>({
     reValidateMode: 'onBlur',
   });
@@ -82,7 +82,12 @@ const SingleSignOnEmail = () => {
 
         {errorMessage && <ErrorMessage className={styles.formErrors}>{errorMessage}</ErrorMessage>}
 
-        <Button title="action.single_sign_on" htmlType="submit" icon={<LockIcon />} />
+        <Button
+          title="action.single_sign_on"
+          htmlType="submit"
+          icon={<LockIcon />}
+          isLoading={isSubmitting}
+        />
 
         <input hidden type="submit" />
       </form>