Add loading state to travel

src/libs/actions/Travel.ts

@@ -15,15 +15,27 @@ function acceptSpotnanaTerms() {
             key: ONYXKEYS.NVP_TRAVEL_SETTINGS,
             value: {
                 hasAcceptedTerms: true,
+                isLoading: true,
             },
         },
     ];
+
+    const finallyData: OnyxUpdate[] = [
+        {
+            onyxMethod: 'merge',
+            key: ONYXKEYS.NVP_TRAVEL_SETTINGS,
+            value: {
+                isLoading: false,
+            },
+        },
+    ];
+
     const error = new Error('Failed to generate spotnana token.');
 
-    return new Promise((_, reject) => {
+    return new Promise((resolve, reject) => {
         asyncOpenURL(
             // eslint-disable-next-line rulesdir/no-api-side-effects-method
-            API.makeRequestWithSideEffects(SIDE_EFFECT_REQUEST_COMMANDS.ACCEPT_SPOTNANA_TERMS, null, {optimisticData})
+            API.makeRequestWithSideEffects(SIDE_EFFECT_REQUEST_COMMANDS.ACCEPT_SPOTNANA_TERMS, null, {optimisticData, finallyData})
                 .then((response) => {
                     if (!response?.spotnanaToken) {
                         reject(error);
@@ -35,7 +47,10 @@ function acceptSpotnanaTerms() {
                     reject(error);
                     throw error;
                 }),
-            (travelDotURL) => travelDotURL ?? '',
+            (travelDotURL) => {
+                resolve(travelDotURL);
+                return travelDotURL ?? '';
+            },
         );
     });
 }

src/pages/Travel/TravelTerms.tsx

@@ -1,6 +1,7 @@
 import React, {useCallback, useEffect, useState} from 'react';
 import {View} from 'react-native';
 import {ScrollView} from 'react-native-gesture-handler';
+import {useOnyx} from 'react-native-onyx';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
 import CheckboxWithLabel from '@components/CheckboxWithLabel';
 import FormAlertWithSubmitButton from '@components/FormAlertWithSubmitButton';
@@ -15,13 +16,16 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
 import * as Travel from '@userActions/Travel';
 import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
 
 function TravelTerms() {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const {canUseSpotnanaTravel} = usePermissions();
     const [hasAcceptedTravelTerms, setHasAcceptedTravelTerms] = useState(false);
     const [errorMessage, setErrorMessage] = useState('');
+    const [travelSettings] = useOnyx(ONYXKEYS.NVP_TRAVEL_SETTINGS);
+    const isLoading = travelSettings?.isLoading;
 
     const toggleTravelTerms = () => {
         setHasAcceptedTravelTerms(!hasAcceptedTravelTerms);
@@ -98,6 +102,7 @@ function TravelTerms() {
                                 message={errorMessage}
                                 isAlertVisible={!!errorMessage}
                                 containerStyles={[styles.mh0, styles.mt5]}
+                                isLoading={isLoading}
                             />
                         </ScrollView>
                     )}

src/types/onyx/TravelSettings.ts

@@ -8,6 +8,9 @@ type TravelSettings = {
 
     /** Whether the user is setup for staging travelDot */
     testAccount?: boolean;
+
+    /** Whether the user is waiting for the API response after accepting terms */
+    isLoading?: boolean;
 };
 
 /** Model of workspace travel information to connect with Spotnana */