Add isLoading guard to onboarding pages to prevent duplicate tasks

src/pages/OnboardingPersonalDetails/BaseOnboardingPersonalDetails.tsx

@@ -21,6 +21,7 @@ import usePermissions from '@hooks/usePermissions';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {addErrorMessage} from '@libs/ErrorUtils';
+import Log from '@libs/Log';
 import {navigateAfterOnboardingWithMicrotaskQueue} from '@libs/navigateAfterOnboarding';
 import Navigation from '@libs/Navigation/Navigation';
 import isTrackOnboardingChoice from '@libs/OnboardingUtils';
@@ -65,6 +66,7 @@ function BaseOnboardingPersonalDetails({currentUserPersonalDetails, shouldUseNat
     const {onboardingIsMediumOrLargerScreenWidth, isSmallScreenWidth} = useResponsiveLayout();
     const {inputCallbackRef} = useAutoFocusInput();
     const [shouldValidateOnChange, setShouldValidateOnChange] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
     const {isBetaEnabled} = usePermissions();
     const canUseSubmit2026 = isBetaEnabled(CONST.BETAS.SUBMIT_2026);
     const onboardingStep = useOnboardingStepCounter(SCREENS.ONBOARDING.PERSONAL_DETAILS);
@@ -80,35 +82,44 @@ function BaseOnboardingPersonalDetails({currentUserPersonalDetails, shouldUseNat
     }, []);
 
     const completeOnboarding = useCallback(
-        (firstName: string, lastName: string) => {
-            if (!onboardingPurposeSelected) {
+        async (firstName: string, lastName: string) => {
+            if (!onboardingPurposeSelected || isLoading) {
                 return;
             }
-            completeOnboardingReport({
-                engagementChoice: onboardingPurposeSelected,
-                onboardingMessage: onboardingMessages[onboardingPurposeSelected],
-                firstName,
-                lastName,
-                adminsChatReportID: onboardingAdminsChatReportID,
-                onboardingPolicyID,
-                introSelected,
-                isSelfTourViewed,
-            });
 
-            setOnboardingAdminsChatReportID();
-            setOnboardingPolicyID();
+            setIsLoading(true);
+            try {
+                await completeOnboardingReport({
+                    engagementChoice: onboardingPurposeSelected,
+                    onboardingMessage: onboardingMessages[onboardingPurposeSelected],
+                    firstName,
+                    lastName,
+                    adminsChatReportID: onboardingAdminsChatReportID,
+                    onboardingPolicyID,
+                    introSelected,
+                    isSelfTourViewed,
+                });
 
-            navigateAfterOnboardingWithMicrotaskQueue(
-                isSmallScreenWidth,
-                isBetaEnabled(CONST.BETAS.DEFAULT_ROOMS),
-                conciergeChatReportID,
-                archivedReportsIdSet,
-                onboardingPolicyID,
-                mergedAccountConciergeReportID,
-                false,
-            );
+                setOnboardingAdminsChatReportID();
+                setOnboardingPolicyID();
+
+                navigateAfterOnboardingWithMicrotaskQueue(
+                    isSmallScreenWidth,
+                    isBetaEnabled(CONST.BETAS.DEFAULT_ROOMS),
+                    conciergeChatReportID,
+                    archivedReportsIdSet,
+                    onboardingPolicyID,
+                    mergedAccountConciergeReportID,
+                    false,
+                );
+                setIsLoading(false);
+            } catch (error) {
+                Log.warn('[BaseOnboardingPersonalDetails] Error completing onboarding', {error});
+                setIsLoading(false);
+            }
         },
         [
+            isLoading,
             onboardingPurposeSelected,
             onboardingAdminsChatReportID,
             onboardingMessages,
@@ -125,6 +136,10 @@ function BaseOnboardingPersonalDetails({currentUserPersonalDetails, shouldUseNat
 
     const handleSubmit = useCallback(
         (values: FormOnyxValues<'onboardingPersonalDetailsForm'>) => {
+            if (isLoading) {
+                return;
+            }
+
             const firstName = values.firstName.trim();
             const lastName = values.lastName.trim();
 
@@ -149,6 +164,7 @@ function BaseOnboardingPersonalDetails({currentUserPersonalDetails, shouldUseNat
             }
 
             if (isTrackOnboardingChoice(onboardingPurposeSelected)) {
+                setIsLoading(true);
                 updateDisplayName(firstName, lastName, formatPhoneNumber, session?.accountID ?? CONST.DEFAULT_NUMBER_ID, session?.email ?? '');
                 autoCreateTrackWorkspace(firstName, lastName, onboardingPurposeSelected);
                 return;
@@ -157,6 +173,7 @@ function BaseOnboardingPersonalDetails({currentUserPersonalDetails, shouldUseNat
             completeOnboarding(firstName, lastName);
         },
         [
+            isLoading,
             formatPhoneNumber,
             session?.accountID,
             session?.email,
@@ -238,6 +255,7 @@ function BaseOnboardingPersonalDetails({currentUserPersonalDetails, shouldUseNat
                 validate={validate}
                 onSubmit={handleSubmit}
                 submitButtonText={translate('common.continue')}
+                isLoading={isLoading}
                 enabledWhenOffline
                 submitFlexEnabled
                 shouldValidateOnBlur={false}

src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx

@@ -1,6 +1,6 @@
 import {useIsFocused} from '@react-navigation/native';
 import {hasSeenTourSelector} from '@selectors/Onboarding';
-import React, {useCallback, useImperativeHandle, useMemo, useRef} from 'react';
+import React, {useCallback, useImperativeHandle, useMemo, useRef, useState} from 'react';
 import {View} from 'react-native';
 import {ScrollView} from 'react-native-gesture-handler';
 import FormHelpMessage from '@components/FormHelpMessage';
@@ -20,6 +20,7 @@ import usePermissions from '@hooks/usePermissions';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
+import Log from '@libs/Log';
 import Navigation from '@libs/Navigation/Navigation';
 import OnboardingRefManager from '@libs/OnboardingRefManager';
 import type {TOnboardingRef} from '@libs/OnboardingRefManager';
@@ -80,6 +81,7 @@ function BaseOnboardingPurpose({shouldUseNativeStyles, shouldEnableMaxHeight, ro
     const canUseSubmit2026 = isBetaEnabled(CONST.BETAS.SUBMIT_2026);
     const autoCreateSubmitWorkspace = useAutoCreateSubmitWorkspace();
     const autoCreateTrackWorkspace = useAutoCreateTrackWorkspace();
+    const [isLoading, setIsLoading] = useState(false);
     const paddingHorizontal = onboardingIsMediumOrLargerScreenWidth ? styles.ph8 : styles.ph5;
 
     const [customChoices = getEmptyArray<OnboardingPurpose>()] = useOnyx(ONYXKEYS.ONBOARDING_CUSTOM_CHOICES);
@@ -99,7 +101,11 @@ function BaseOnboardingPurpose({shouldUseNativeStyles, shouldEnableMaxHeight, ro
             wrapperStyle: [styles.purposeMenuItem],
             numberOfLinesTitle: 0,
             sentryLabel: CONST.SENTRY_LABEL.ONBOARDING.PURPOSE_ITEM,
-            onPress: () => {
+            onPress: async () => {
+                if (isLoading) {
+                    return;
+                }
+
                 setOnboardingPurposeSelected(choice);
                 setOnboardingErrorMessage(null);
                 if (choice === CONST.ONBOARDING_CHOICES.MANAGE_TEAM) {
@@ -118,21 +124,29 @@ function BaseOnboardingPurpose({shouldUseNativeStyles, shouldEnableMaxHeight, ro
                 }
 
                 if (isPrivateDomainAndHasAccessiblePolicies && personalDetailsForm?.firstName) {
+                    setIsLoading(true);
+
                     if (isTrackOnboardingChoice(choice)) {
                         autoCreateTrackWorkspace(personalDetailsForm.firstName, personalDetailsForm.lastName ?? '', choice);
                         return;
                     }
-                    completeOnboarding({
-                        engagementChoice: choice,
-                        onboardingMessage: onboardingMessages[choice],
-                        firstName: personalDetailsForm.firstName,
-                        lastName: personalDetailsForm.lastName,
-                        adminsChatReportID: onboardingAdminsChatReportID ?? undefined,
-                        onboardingPolicyID,
-                        companySize: onboardingCompanySize,
-                        introSelected,
-                        isSelfTourViewed,
-                    });
+                    try {
+                        await completeOnboarding({
+                            engagementChoice: choice,
+                            onboardingMessage: onboardingMessages[choice],
+                            firstName: personalDetailsForm.firstName,
+                            lastName: personalDetailsForm.lastName,
+                            adminsChatReportID: onboardingAdminsChatReportID ?? undefined,
+                            onboardingPolicyID,
+                            companySize: onboardingCompanySize,
+                            introSelected,
+                            isSelfTourViewed,
+                        });
+                        setIsLoading(false);
+                    } catch (error) {
+                        Log.warn('[BaseOnboardingPurpose] Error completing onboarding', {error});
+                        setIsLoading(false);
+                    }
 
                     return;
                 }

src/pages/OnboardingWorkspaceOptional/BaseOnboardingWorkspaceOptional.tsx

@@ -1,5 +1,5 @@
 import {hasSeenTourSelector} from '@selectors/Onboarding';
-import React, {useCallback, useEffect} from 'react';
+import React, {useCallback, useEffect, useState} from 'react';
 import {View} from 'react-native';
 import Button from '@components/Button';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
@@ -24,6 +24,7 @@ import usePreferredPolicy from '@hooks/usePreferredPolicy';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {convertToShortDisplayString} from '@libs/CurrencyUtils';
+import Log from '@libs/Log';
 import {navigateAfterOnboardingWithMicrotaskQueue} from '@libs/navigateAfterOnboarding';
 import Navigation from '@libs/Navigation/Navigation';
 import isTrackOnboardingChoice from '@libs/OnboardingUtils';
@@ -100,41 +101,56 @@ function BaseOnboardingWorkspaceOptional({shouldUseNativeStyles}: BaseOnboarding
         },
     ];
 
+    const [isLoading, setIsLoading] = useState(false);
+
     const completeOnboarding = useCallback(
-        (overrides?: {engagementChoice?: OnboardingPurpose; adminsChatReportID?: string; policyID?: string}) => {
+        async (overrides?: {engagementChoice?: OnboardingPurpose; adminsChatReportID?: string; policyID?: string}) => {
+            if (isLoading) {
+                return;
+            }
+
             const engagementChoice = overrides?.engagementChoice ?? onboardingPurposeSelected;
             if (!engagementChoice) {
                 return;
             }
 
+            setIsLoading(true);
+
             const resolvedAdminsChatReportID = overrides?.adminsChatReportID ?? onboardingAdminsChatReportID;
             const resolvedPolicyID = overrides?.policyID ?? onboardingPolicyID;
 
-            completeOnboardingReport({
-                engagementChoice,
-                onboardingMessage: onboardingMessages[engagementChoice],
-                firstName: currentUserPersonalDetails.firstName,
-                lastName: currentUserPersonalDetails.lastName,
-                adminsChatReportID: resolvedAdminsChatReportID,
-                onboardingPolicyID: resolvedPolicyID,
-                introSelected,
-                isSelfTourViewed,
-            });
+            try {
+                await completeOnboardingReport({
+                    engagementChoice,
+                    onboardingMessage: onboardingMessages[engagementChoice],
+                    firstName: currentUserPersonalDetails.firstName,
+                    lastName: currentUserPersonalDetails.lastName,
+                    adminsChatReportID: resolvedAdminsChatReportID,
+                    onboardingPolicyID: resolvedPolicyID,
+                    introSelected,
+                    isSelfTourViewed,
+                });
 
-            setOnboardingAdminsChatReportID();
-            setOnboardingPolicyID();
+                setOnboardingAdminsChatReportID();
+                setOnboardingPolicyID();
 
-            navigateAfterOnboardingWithMicrotaskQueue(
-                isSmallScreenWidth,
-                isBetaEnabled(CONST.BETAS.DEFAULT_ROOMS),
-                conciergeChatReportID,
-                archivedReportsIdSet,
-                resolvedPolicyID,
-                mergedAccountConciergeReportID,
-                false,
-            );
+                navigateAfterOnboardingWithMicrotaskQueue(
+                    isSmallScreenWidth,
+                    isBetaEnabled(CONST.BETAS.DEFAULT_ROOMS),
+                    conciergeChatReportID,
+                    archivedReportsIdSet,
+                    resolvedPolicyID,
+                    mergedAccountConciergeReportID,
+                    false,
+                );
+                setIsLoading(false);
+            } catch (error) {
+                Log.warn('[BaseOnboardingWorkspaceOptional] Error completing onboarding', {error});
+                setIsLoading(false);
+            }
         },
         [
+            isLoading,
             onboardingPurposeSelected,
             currentUserPersonalDetails.firstName,
             currentUserPersonalDetails.lastName,
@@ -151,11 +167,13 @@ function BaseOnboardingWorkspaceOptional({shouldUseNativeStyles}: BaseOnboarding
         ],
     );
 
-    const createWorkspaceAndCompleteOnboarding = useCallback(() => {
-        if (!onboardingPurposeSelected) {
+    const createWorkspaceAndCompleteOnboarding = useCallback(async () => {
+        if (!onboardingPurposeSelected || isLoading) {
             return;
         }
 
+        setIsLoading(true);
+
         const paidGroupPolicy = Object.values(allPolicies ?? {}).find((policy) => isPaidGroupPolicy(policy) && isPolicyAdmin(policy, session?.email));
         const shouldCreateWorkspace = !onboardingPolicyID && !paidGroupPolicy;
 
@@ -187,12 +205,13 @@ function BaseOnboardingWorkspaceOptional({shouldUseNativeStyles}: BaseOnboarding
               })
             : {adminsChatReportID: onboardingAdminsChatReportID, policyID: onboardingPolicyID};
 
-        completeOnboarding({
+        await completeOnboarding({
             engagementChoice,
             adminsChatReportID,
             policyID,
         });
     }, [
+        isLoading,
         onboardingPurposeSelected,
         allPolicies,
         session?.email,
@@ -267,6 +286,7 @@ function BaseOnboardingWorkspaceOptional({shouldUseNativeStyles}: BaseOnboarding
                         large
                         text={translate('common.skip')}
                         onPress={() => completeOnboarding()}
+                        isLoading={isLoading}
                         sentryLabel={CONST.SENTRY_LABEL.ONBOARDING.SKIP}
                     />
                 </View>
@@ -276,6 +296,7 @@ function BaseOnboardingWorkspaceOptional({shouldUseNativeStyles}: BaseOnboarding
                             success
                             large
                             text={translate('onboarding.workspace.createWorkspace')}
+                            isLoading={isLoading}
                             onPress={() => {
                                 setOnboardingErrorMessage(null);
                                 if (isTrackOnboardingChoice(onboardingPurposeSelected)) {