Merge pull request Expensify#32903 from dukenv0307/fix/32539

Display loading page for workspace page with section
staszekscp · Jan 3, 2024 · 2fe1174 · 2fe1174
2 parents 5462451 + c94f137
commit 2fe1174
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 12 deletions.
diff --git a/src/libs/actions/BankAccounts.ts b/src/libs/actions/BankAccounts.ts
@@ -404,7 +404,39 @@ function verifyIdentityForBankAccount(bankAccountID: number, onfidoData: OnfidoD
 }
 
 function openWorkspaceView() {
-    API.read('OpenWorkspaceView', {}, {});
+    API.read(
+        'OpenWorkspaceView',
+        {},
+        {
+            optimisticData: [
+                {
+                    onyxMethod: Onyx.METHOD.MERGE,
+                    key: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
+                    value: {
+                        isLoading: true,
+                    },
+                },
+            ],
+            successData: [
+                {
+                    onyxMethod: Onyx.METHOD.MERGE,
+                    key: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
+                    value: {
+                        isLoading: false,
+                    },
+                },
+            ],
+            failureData: [
+                {
+                    onyxMethod: Onyx.METHOD.MERGE,
+                    key: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
+                    value: {
+                        isLoading: false,
+                    },
+                },
+            ],
+        },
+    );
 }
 
 function handlePlaidError(bankAccountID: number, error: string, errorDescription: string, plaidRequestID: string) {

diff --git a/src/pages/workspace/WorkspacePageWithSections.js b/src/pages/workspace/WorkspacePageWithSections.js
@@ -1,10 +1,11 @@
 import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
-import React, {useEffect} from 'react';
+import React, {useEffect, useRef} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
+import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import ScrollViewWithContext from '@components/ScrollViewWithContext';
@@ -62,6 +63,9 @@ const propTypes = {
 
     /** Option to use the default scroll view  */
     shouldUseScrollView: PropTypes.bool,
+
+    /** Option to show the loading page while the API is calling */
+    shouldShowLoading: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -73,6 +77,7 @@ const defaultProps = {
     shouldUseScrollView: false,
     shouldSkipVBBACall: false,
     backButtonRoute: '',
+    shouldShowLoading: true,
 };
 
 function fetchData(skipVBBACal) {
@@ -83,16 +88,36 @@ function fetchData(skipVBBACal) {
     BankAccounts.openWorkspaceView();
 }
 
-function WorkspacePageWithSections({backButtonRoute, children, footer, guidesCallTaskID, headerText, policy, reimbursementAccount, route, shouldUseScrollView, shouldSkipVBBACall, user}) {
+function WorkspacePageWithSections({
+    backButtonRoute,
+    children,
+    footer,
+    guidesCallTaskID,
+    headerText,
+    policy,
+    reimbursementAccount,
+    route,
+    shouldUseScrollView,
+    shouldSkipVBBACall,
+    user,
+    shouldShowLoading,
+}) {
     const styles = useThemeStyles();
     useNetwork({onReconnect: () => fetchData(shouldSkipVBBACall)});
 
+    const isLoading = lodashGet(reimbursementAccount, 'isLoading', true);
     const achState = lodashGet(reimbursementAccount, 'achData.state', '');
     const hasVBA = achState === BankAccount.STATE.OPEN;
     const isUsingECard = lodashGet(user, 'isUsingExpensifyCard', false);
     const policyID = lodashGet(route, 'params.policyID');
     const policyName = lodashGet(policy, 'name');
     const content = children(hasVBA, policyID, isUsingECard);
+    const firstRender = useRef(true);
+
+    useEffect(() => {
+        // Because isLoading is false before merging in Onyx, we need firstRender ref to display loading page as well before isLoading is change to true
+        firstRender.current = false;
+    }, []);
 
     useEffect(() => {
         fetchData(shouldSkipVBBACall);
@@ -117,17 +142,23 @@ function WorkspacePageWithSections({backButtonRoute, children, footer, guidesCal
                     guidesCallTaskID={guidesCallTaskID}
                     onBackButtonPress={() => Navigation.goBack(backButtonRoute || ROUTES.WORKSPACE_INITIAL.getRoute(policyID))}
                 />
-                {shouldUseScrollView ? (
-                    <ScrollViewWithContext
-                        keyboardShouldPersistTaps="handled"
-                        style={[styles.settingsPageBackground, styles.flex1, styles.w100]}
-                    >
-                        <View style={[styles.w100, styles.flex1]}>{content}</View>
-                    </ScrollViewWithContext>
+                {(isLoading || firstRender.current) && shouldShowLoading ? (
+                    <FullScreenLoadingIndicator style={[styles.flex1, styles.pRelative]} />
                 ) : (
-                    content
+                    <>
+                        {shouldUseScrollView ? (
+                            <ScrollViewWithContext
+                                keyboardShouldPersistTaps="handled"
+                                style={[styles.settingsPageBackground, styles.flex1, styles.w100]}
+                            >
+                                <View style={[styles.w100, styles.flex1]}>{content}</View>
+                            </ScrollViewWithContext>
+                        ) : (
+                            content
+                        )}
+                        {footer}
+                    </>
                 )}
-                {footer}
             </FullPageNotFoundView>
         </ScreenWrapper>
     );

diff --git a/src/pages/workspace/WorkspaceSettingsPage.js b/src/pages/workspace/WorkspaceSettingsPage.js
@@ -99,6 +99,7 @@ function WorkspaceSettingsPage({policy, currencyList, windowWidth, route}) {
             headerText={translate('workspace.common.settings')}
             route={route}
             guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_SETTINGS}
+            shouldShowLoading={false}
         >
             {(hasVBA) => (
                 <FormProvider

diff --git a/src/pages/workspace/reimburse/WorkspaceRateAndUnitPage.js b/src/pages/workspace/reimburse/WorkspaceRateAndUnitPage.js
@@ -103,6 +103,7 @@ function WorkspaceRateAndUnitPage(props) {
             guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_REIMBURSE}
             shouldSkipVBBACall
             backButtonRoute={ROUTES.WORKSPACE_REIMBURSE.getRoute(props.policy.id)}
+            shouldShowLoading={false}
         >
             {() => (
                 <FormProvider

diff --git a/src/pages/workspace/reimburse/WorkspaceReimbursePage.js b/src/pages/workspace/reimburse/WorkspaceReimbursePage.js
@@ -29,6 +29,7 @@ function WorkspaceReimbursePage(props) {
             route={props.route}
             guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_REIMBURSE}
             shouldSkipVBBACall
+            shouldShowLoading={false}
         >
             {() => <WorkspaceReimburseView policy={props.policy} />}
         </WorkspacePageWithSections>