fix(experience): display loading spinner on submit buttons when navigating to user app (#7675)

Author: charIeszhao

packages/experience/src/containers/SetPassword/Lite.tsx

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

packages/experience/src/containers/SetPassword/SetPassword.tsx

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

packages/experience/src/pages/Continue/ExtraProfileForm/index.tsx

@@ -15,7 +15,7 @@ import useValidateField from './use-validate-field';
 type Props = {
   readonly customProfileFields: CustomProfileField[];
   readonly defaultValues?: Record<string, unknown>;
-  readonly onSubmit: (values: Record<string, unknown>) => void;
+  readonly onSubmit: (values: Record<string, unknown>) => Promise<void>;
 };
 
 const ExtraProfileForm = ({ customProfileFields, defaultValues, onSubmit }: Props) => {
@@ -32,11 +32,11 @@ const ExtraProfileForm = ({ customProfileFields, defaultValues, onSubmit }: Prop
     formState: { errors, isValid, isSubmitting },
   } = methods;
 
-  const submit = handleSubmit((value) => {
+  const submit = handleSubmit(async (value) => {
     if (!isValid) {
       return;
     }
-    onSubmit(value);
+    await onSubmit(value);
   });
 
   return (
@@ -80,7 +80,6 @@ const ExtraProfileForm = ({ customProfileFields, defaultValues, onSubmit }: Prop
           );
         })}
         <Button title="action.continue" htmlType="submit" isLoading={isSubmitting} />
-
         <input hidden type="submit" />
       </form>
     </FormProvider>

packages/experience/src/pages/Continue/IdentifierProfileForm/index.tsx

@@ -61,10 +61,10 @@ const IdentifierProfileForm = ({
   }, [clearErrorMessage, isValid]);
 
   const onSubmitHandler = useCallback(
-    (event?: React.FormEvent<HTMLFormElement>) => {
+    async (event?: React.FormEvent<HTMLFormElement>) => {
       clearErrorMessage?.();
 
-      void handleSubmit(async ({ identifier: { type, value } }) => {
+      await handleSubmit(async ({ identifier: { type, value } }) => {
         if (!type) {
           return;
         }

packages/experience/src/pages/ForgotPassword/ForgotPasswordForm/index.tsx

@@ -61,7 +61,7 @@ const ForgotPasswordForm = ({ className, autoFocus, defaultValue = '', enabledTy
     async (event?: React.FormEvent<HTMLFormElement>) => {
       clearErrorMessage();
 
-      void handleSubmit(async ({ identifier: { type, value } }) => {
+      await handleSubmit(async ({ identifier: { type, value } }) => {
         if (!type) {
           return;
         }

packages/experience/src/pages/MfaVerification/BackupCodeVerification/index.tsx

@@ -29,8 +29,8 @@ const BackupCodeVerification = () => {
   } = useForm<FormState>({ defaultValues: { code: '' } });
 
   const onSubmitHandler = useCallback(
-    (event?: FormEvent<HTMLFormElement>) => {
-      void handleSubmit(async ({ code }) => {
+    async (event?: FormEvent<HTMLFormElement>) => {
+      await handleSubmit(async ({ code }) => {
         await sendMfaPayload({
           flow: UserMfaFlow.MfaVerification,
           payload: { type: MfaFactor.BackupCode, code },

packages/experience/src/pages/SignInPassword/PasswordForm/index.tsx

@@ -70,7 +70,7 @@ const PasswordForm = ({
     async (event?: React.FormEvent<HTMLFormElement>) => {
       clearErrorMessage();
 
-      void handleSubmit(async ({ identifier: { type, value }, password }) => {
+      await handleSubmit(async ({ identifier: { type, value }, password }) => {
         if (!type) {
           return;
         }