refactor(console): use button loading in experience flow if possible

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 />}
     </>
   );
 };

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;

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;

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;
+}

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;

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: '' },
@@ -42,11 +42,11 @@ const Lite = ({ className, autoFocus, onSubmit, errorMessage, clearErrorMessage
   }, [clearErrorMessage, isValid]);
 
   const onSubmitHandler = useCallback(
-    (event?: React.FormEvent<HTMLFormElement>) => {
+    async (event?: React.FormEvent<HTMLFormElement>) => {
       clearErrorMessage?.();
 
-      void handleSubmit((data, event) => {
-        onSubmit(data.newPassword);
+      await 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>

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: '' },
@@ -56,11 +56,11 @@ const SetPassword = ({
   }, [clearErrorMessage, isValid]);
 
   const onSubmitHandler = useCallback(
-    (event?: React.FormEvent<HTMLFormElement>) => {
+    async (event?: React.FormEvent<HTMLFormElement>) => {
       clearErrorMessage?.();
 
-      void handleSubmit((data, event) => {
-        onSubmit(data.newPassword);
+      await 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>

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;

packages/experience/src/containers/TotpCodeVerification/index.module.scss

@@ -3,3 +3,7 @@
 .totpCodeInput {
   margin-top: _.unit(4);
 }
+
+.continueButton {
+  margin-top: _.unit(6);
+}

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);
 
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleSubmit = useCallback(
+    async (code: string[]) => {
+      setIsSubmitting(true);
+      await onSubmit(code.join(''));
+      setIsSubmitting(false);
+    },
+    [onSubmit]
+  );
+
   return (
-    <VerificationCodeInput
-      name="totpCode"
-      value={code}
-      className={styles.totpCodeInput}
-      error={errorMessage}
-      onChange={(code) => {
-        setCode(code);
-
-        if (code.length === totpCodeLength && code.every(Boolean)) {
-          onSubmit(code.join(''));
-        }
-      }}
-    />
+    <>
+      <VerificationCodeInput
+        name="totpCode"
+        value={codeInput}
+        className={styles.totpCodeInput}
+        error={errorMessage}
+        onChange={async (code) => {
+          setCodeInput(code);
+          if (isCodeReady(code)) {
+            await handleSubmit(code);
+          }
+        }}
+      />
+      <Button
+        title="action.continue"
+        type="primary"
+        className={styles.continueButton}
+        isLoading={isSubmitting}
+        isDisabled={!isCodeReady(codeInput)}
+        onClick={async () => {
+          await handleSubmit(codeInput);
+        }}
+      />
+    </>
   );
 };
 

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

packages/experience/src/containers/VerificationCode/index.module.scss

@@ -27,7 +27,8 @@
     align-self: start;
   }
 
-  .switch {
+  .switch,
+  .continueButton {
     margin-top: _.unit(6);
   }
 }

packages/experience/src/containers/VerificationCode/index.tsx

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import { useState, useEffect, useCallback } 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';
@@ -24,6 +25,8 @@ const VerificationCode = ({ flow, identifier, className, hasPasswordButton, targ
   const [code, setCode] = useState<string[]>([]);
   const { t } = useTranslation();
 
+  const isCodeReady = code.length === defaultLength && code.every(Boolean);
+
   const useVerificationCode = getCodeVerificationHookByFlow(flow);
 
   const errorCallback = useCallback(() => {
@@ -42,15 +45,27 @@ const VerificationCode = ({ flow, identifier, className, hasPasswordButton, targ
     target
   );
 
-  useEffect(() => {
-    if (code.length === defaultLength && code.every(Boolean)) {
-      const payload =
-        identifier === SignInIdentifier.Email
-          ? { email: target, verificationCode: code.join('') }
-          : { phone: target, verificationCode: code.join('') };
-      void onSubmit(payload);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleSubmit = useCallback(async () => {
+    if (!isCodeReady) {
+      return;
     }
-  }, [code, identifier, onSubmit, target]);
+
+    setIsSubmitting(true);
+
+    await onSubmit(
+      identifier === SignInIdentifier.Email
+        ? { email: target, verificationCode: code.join('') }
+        : { phone: target, verificationCode: code.join('') }
+    );
+
+    setIsSubmitting(false);
+  }, [code, identifier, isCodeReady, onSubmit, target]);
+
+  useEffect(() => {
+    void handleSubmit();
+  }, [handleSubmit]);
 
   return (
     <form className={classNames(styles.form, className)}>
@@ -88,6 +103,14 @@ const VerificationCode = ({ flow, identifier, className, hasPasswordButton, targ
       {flow === UserFlow.SignIn && hasPasswordButton && (
         <PasswordSignInLink className={styles.switch} />
       )}
+      <Button
+        title="action.continue"
+        type="primary"
+        isDisabled={!isCodeReady}
+        isLoading={isSubmitting}
+        className={styles.continueButton}
+        onClick={handleSubmit}
+      />
     </form>
   );
 };

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}>