Merge pull request #9202 from Expensify/amy-VBALoadingSpinner

Show full page spinner while VBA state is loading
Expensify · Jun 2, 2022 · 4a23631 · 4a23631
2 parents 6b24678 + 6b47923
commit 4a23631
Show file tree

Hide file tree

Showing 8 changed files with 38 additions and 33 deletions.
diff --git a/src/pages/workspace/WorkspacePageWithSections.js b/src/pages/workspace/WorkspacePageWithSections.js
@@ -1,9 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {View, ScrollView} from 'react-native';
+import {ActivityIndicator, View, ScrollView} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import lodashGet from 'lodash/get';
 import styles from '../../styles/styles';
+import themeColors from '../../styles/themes/default';
 import Navigation from '../../libs/Navigation/Navigation';
 import compose from '../../libs/compose';
 import ROUTES from '../../ROUTES';
@@ -88,7 +89,6 @@ class WorkspacePageWithSections extends React.Component {
 
     render() {
         const achState = lodashGet(this.props.reimbursementAccount, 'achData.state', '');
-        const isLoadingVBA = this.props.reimbursementAccount.loading;
         const hasVBA = achState === BankAccount.STATE.OPEN;
         const isUsingECard = lodashGet(this.props.user, 'isUsingExpensifyCard', false);
         const policyID = lodashGet(this.props.route, 'params.policyID');
@@ -106,16 +106,24 @@ class WorkspacePageWithSections extends React.Component {
                         onBackButtonPress={() => Navigation.navigate(ROUTES.getWorkspaceInitialRoute(policyID))}
                         onCloseButtonPress={() => Navigation.dismissModal()}
                     />
-                    <ScrollView
-                        style={[styles.settingsPageBackground, styles.flex1, styles.w100]}
-                    >
-                        <View style={[styles.w100, styles.flex1]}>
-
-                            {this.props.children(isLoadingVBA, hasVBA, policyID, isUsingECard)}
-
+                    {this.props.reimbursementAccount.loading ? (
+                        <View style={[styles.flex1, styles.alignItemsCenter, styles.justifyContentCenter]}>
+                            <ActivityIndicator color={themeColors.spinner} size="large" />
                         </View>
-                    </ScrollView>
-                    {this.props.footer}
+                    ) : (
+                        <>
+                            <ScrollView
+                                style={[styles.settingsPageBackground, styles.flex1, styles.w100]}
+                            >
+                                <View style={[styles.w100, styles.flex1]}>
+
+                                    {this.props.children(hasVBA, policyID, isUsingECard)}
+
+                                </View>
+                            </ScrollView>
+                            {this.props.footer}
+                        </>
+                    )}
                 </KeyboardAvoidingView>
             </ScreenWrapper>
         );

diff --git a/src/pages/workspace/WorkspaceSettingsPage.js b/src/pages/workspace/WorkspaceSettingsPage.js
@@ -139,7 +139,7 @@ class WorkspaceSettingsPage extends React.Component {
                     </FixedFooter>
                 )}
             >
-                {(isLoadingVBA, hasVBA) => (
+                {hasVBA => (
                     <View style={[styles.pageWrapper, styles.flex1, styles.alignItemsStretch]}>
                         <AvatarWithImagePicker
                             isUploading={this.props.policy.isAvatarUploading}
@@ -176,7 +176,7 @@ class WorkspaceSettingsPage extends React.Component {
                                 onInputChange={currency => this.setState({currency})}
                                 items={this.getCurrencyItems()}
                                 value={this.state.currency}
-                                isDisabled={isLoadingVBA || hasVBA}
+                                isDisabled={hasVBA}
                             />
                         </View>
                         <Text style={[styles.textLabel, styles.colorMuted, styles.mt2]}>

diff --git a/src/pages/workspace/bills/WorkspaceBillsPage.js b/src/pages/workspace/bills/WorkspaceBillsPage.js
@@ -25,12 +25,12 @@ const WorkspaceBillsPage = props => (
         route={props.route}
         guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_BILLS}
     >
-        {(isLoadingVBA, hasVBA, policyID) => (
+        {(hasVBA, policyID) => (
             <>
-                {!isLoadingVBA && !hasVBA && (
+                {!hasVBA && (
                     <WorkspaceBillsNoVBAView policyID={policyID} />
                 )}
-                {!isLoadingVBA && hasVBA && (
+                {hasVBA && (
                     <WorkspaceBillsVBAView policyID={policyID} />
                 )}
             </>

diff --git a/src/pages/workspace/card/WorkspaceCardPage.js b/src/pages/workspace/card/WorkspaceCardPage.js
@@ -26,17 +26,17 @@ const WorkspaceCardPage = props => (
         route={props.route}
         guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_CARD}
     >
-        {(isLoadingVBA, hasVBA, policyID, isUsingECard) => (
+        {(hasVBA, policyID, isUsingECard) => (
             <>
-                {!isLoadingVBA && !hasVBA && (
+                {!hasVBA && (
                     <WorkspaceCardNoVBAView policyID={policyID} />
                 )}
 
-                {!isLoadingVBA && hasVBA && !isUsingECard && (
+                {hasVBA && !isUsingECard && (
                     <WorkspaceCardVBANoECardView />
                 )}
 
-                {!isLoadingVBA && hasVBA && isUsingECard && (
+                {hasVBA && isUsingECard && (
                     <WorkspaceCardVBAWithECardView />
                 )}
             </>

diff --git a/src/pages/workspace/invoices/WorkspaceInvoicesPage.js b/src/pages/workspace/invoices/WorkspaceInvoicesPage.js
@@ -25,12 +25,12 @@ const WorkspaceInvoicesPage = props => (
         route={props.route}
         guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_INVOICES}
     >
-        {(isLoadingVBA, hasVBA, policyID) => (
+        {(hasVBA, policyID) => (
             <>
-                {!isLoadingVBA && !hasVBA && (
+                {!hasVBA && (
                     <WorkspaceInvoicesNoVBAView policyID={policyID} />
                 )}
-                {!isLoadingVBA && hasVBA && (
+                {hasVBA && (
                     <WorkspaceInvoicesVBAView policyID={policyID} />
                 )}
             </>

diff --git a/src/pages/workspace/reimburse/WorkspaceReimbursePage.js b/src/pages/workspace/reimburse/WorkspaceReimbursePage.js
@@ -24,8 +24,8 @@ const WorkspaceReimbursePage = props => (
         route={props.route}
         guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_REIMBURSE}
     >
-        {(isLoadingVBA, hasVBA, policyID) => (
-            <WorkspaceReimburseView policyID={policyID} isLoadingVBA={isLoadingVBA} hasVBA={hasVBA} />
+        {(hasVBA, policyID) => (
+            <WorkspaceReimburseView policyID={policyID} hasVBA={hasVBA} />
         )}
     </WorkspacePageWithSections>
 );

diff --git a/src/pages/workspace/reimburse/WorkspaceReimburseView.js b/src/pages/workspace/reimburse/WorkspaceReimburseView.js
@@ -27,9 +27,6 @@ const propTypes = {
     /** The policy ID currently being configured */
     policyID: PropTypes.string.isRequired,
 
-    /** Whether VBA data is loading */
-    isLoadingVBA: PropTypes.bool.isRequired,
-
     /** Does the user have a VBA in their account? */
     hasVBA: PropTypes.bool.isRequired,
 
@@ -194,7 +191,7 @@ class WorkspaceReimburseView extends React.Component {
                     </View>
                 </Section>
 
-                {!this.props.isLoadingVBA && !this.props.hasVBA && (
+                {!this.props.hasVBA && (
                     <Section
                         title={this.props.translate('workspace.reimburse.unlockNextDayReimbursements')}
                         icon={Illustrations.JewelBoxGreen}
@@ -214,7 +211,7 @@ class WorkspaceReimburseView extends React.Component {
                         />
                     </Section>
                 )}
-                {!this.props.isLoadingVBA && this.props.hasVBA && (
+                {this.props.hasVBA && (
                     <Section
                         title={this.props.translate('workspace.reimburse.fastReimbursementsHappyMembers')}
                         icon={Illustrations.BankUserGreen}

diff --git a/src/pages/workspace/travel/WorkspaceTravelPage.js b/src/pages/workspace/travel/WorkspaceTravelPage.js
@@ -25,12 +25,12 @@ const WorkspaceTravelPage = props => (
         route={props.route}
         guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_TRAVEL}
     >
-        {(isLoadingVBA, hasVBA, policyID) => (
+        {(hasVBA, policyID) => (
             <>
-                {!isLoadingVBA && !hasVBA && (
+                {!hasVBA && (
                     <WorkspaceTravelNoVBAView policyID={policyID} />
                 )}
-                {!isLoadingVBA && hasVBA && (
+                {hasVBA && (
                     <WorkspaceTravelVBAView />
                 )}
             </>