Add simple loader to payment method list

src/components/CurrentWalletBalance.js

@@ -1,12 +1,9 @@
 import React from 'react';
-import {ActivityIndicator} from 'react-native';
 import PropTypes from 'prop-types';
-import _ from 'underscore';
 import {withOnyx} from 'react-native-onyx';
 import styles from '../styles/styles';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import compose from '../libs/compose';
-import themeColors from '../styles/themes/default';
 import ONYXKEYS from '../ONYXKEYS';
 import Text from './Text';
 
@@ -25,21 +22,15 @@ const propTypes = {
 };
 
 const defaultProps = {
-    userWallet: {},
+    userWallet: {
+
+        // Default to zero if userWallet and currentBalance is not set yet to avoid NaN
+        currentBalance: 0,
+    },
     balanceStyles: [],
 };
 
 const CurrentWalletBalance = (props) => {
-    if (_.isEmpty(props.userWallet)) {
-        return (
-            <ActivityIndicator
-                color={themeColors.text}
-                size="large"
-                style={styles.pv5}
-            />
-        );
-    }
-
     const formattedBalance = props.numberFormat(
         props.userWallet.currentBalance / 100, // Divide by 100 because balance is in cents
         {style: 'currency', currency: 'USD'},

src/pages/settings/Payments/PaymentMethodList.js

@@ -39,6 +39,9 @@ const propTypes = {
     /** Whether the add Payment button be shown on the list */
     shouldShowAddPaymentMethodButton: PropTypes.bool,
 
+    /** Are we loading payment methods? */
+    isLoadingPaymentMethods: PropTypes.bool,
+
     /** Type to filter the payment Method list */
     filterType: PropTypes.oneOf([CONST.PAYMENT_METHODS.DEBIT_CARD, CONST.PAYMENT_METHODS.BANK_ACCOUNT, '']),
 
@@ -74,6 +77,7 @@ const defaultProps = {
         walletLinkedAccountID: 0,
         walletLinkedAccountType: '',
     },
+    isLoadingPaymentMethods: true,
     shouldShowAddPaymentMethodButton: true,
     filterType: '',
     actionPaymentMethodType: '',
@@ -231,7 +235,7 @@ class PaymentMethodList extends Component {
                                         text={this.props.translate('paymentMethodList.addPaymentMethod')}
                                         icon={Expensicons.CreditCard}
                                         onPress={e => this.props.onPress(e)}
-                                        isDisabled={this.props.isLoadingPayments || isOffline}
+                                        isDisabled={this.props.isLoadingPaymentMethods || isOffline}
                                         style={[styles.mh4, styles.buttonCTA]}
                                         iconStyles={[styles.buttonCTAIcon]}
                                         key="addPaymentMethodButton"
@@ -261,6 +265,9 @@ export default compose(
         cardList: {
             key: ONYXKEYS.CARD_LIST,
         },
+        isLoadingPaymentMethods: {
+            key: ONYXKEYS.IS_LOADING_PAYMENT_METHODS,
+        },
         payPalMeData: {
             key: ONYXKEYS.PAYPAL,
         },

src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import {
-    View, InteractionManager, LayoutAnimation,
+    ActivityIndicator, View, InteractionManager, LayoutAnimation,
 } from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
@@ -33,6 +33,7 @@ import * as PaymentUtils from '../../../../libs/PaymentUtils';
 import OfflineWithFeedback from '../../../../components/OfflineWithFeedback';
 import ConfirmContent from '../../../../components/ConfirmContent';
 import Button from '../../../../components/Button';
+import themeColors from '../../../../styles/themes/default';
 
 class BasePaymentsPage extends React.Component {
     constructor(props) {
@@ -42,6 +43,7 @@ class BasePaymentsPage extends React.Component {
             shouldShowAddPaymentMenu: false,
             shouldShowDefaultDeleteMenu: false,
             shouldShowPasswordPrompt: false,
+            shouldShowLoadingSpinner: false,
             isSelectedPaymentMethodDefault: false,
             selectedPaymentMethod: {},
             formattedSelectedPaymentMethod: {
@@ -65,6 +67,8 @@ class BasePaymentsPage extends React.Component {
         this.navigateToTransferBalancePage = this.navigateToTransferBalancePage.bind(this);
         this.setMenuPosition = this.setMenuPosition.bind(this);
         this.listHeaderComponent = this.listHeaderComponent.bind(this);
+
+        this.debounceSetShouldShowLoadingSpinner = _.debounce(this.setShouldShowLoadingSpinner.bind(this), CONST.TIMING.SHOW_LOADING_SPINNER_DEBOUNCE_TIME);
     }
 
     componentDidMount() {
@@ -76,12 +80,29 @@ class BasePaymentsPage extends React.Component {
             this.setMenuPosition();
         }
 
+        // If the user was previously offline, skip debouncing showing the loader
+        if (prevProps.network.isOffline && !this.props.network.isOffline) {
+            this.setShouldShowLoadingSpinner();
+        } else {
+            this.debounceSetShouldShowLoadingSpinner();
+        }
+
+        // previously online OR currently offline, skip fetch
         if (!prevProps.network.isOffline || this.props.network.isOffline) {
             return;
         }
+
         this.fetchData();
     }
 
+    setShouldShowLoadingSpinner() {
+        // In order to prevent a loop, only update state of the spinner if there is a change
+        const shouldShowLoadingSpinner = this.props.isLoadingPaymentMethods || false;
+        if (shouldShowLoadingSpinner !== this.state.shouldShowLoadingSpinner) {
+            this.setState({shouldShowLoadingSpinner: this.props.isLoadingPaymentMethods && !this.props.network.isOffline});
+        }
+    }
+
     setMenuPosition() {
         if (!this.state.addPaymentMethodButton) {
             return;
@@ -268,14 +289,18 @@ class BasePaymentsPage extends React.Component {
                 {Permissions.canUseWallet(this.props.betas) && (
                     <>
                         <View style={[styles.mv5]}>
-                            <OfflineWithFeedback
-                                pendingAction={CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD}
-                                errors={this.props.walletTerms.errors}
-                                onClose={PaymentMethods.clearWalletTermsError}
-                                errorRowStyles={[styles.ml10, styles.mr2]}
-                            >
-                                <CurrentWalletBalance />
-                            </OfflineWithFeedback>
+                            {this.state.shouldShowLoadingSpinner ? (
+                                <ActivityIndicator color={themeColors.spinner} size="large" />
+                            ) : (
+                                <OfflineWithFeedback
+                                    pendingAction={CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD}
+                                    errors={this.props.walletTerms.errors}
+                                    onClose={PaymentMethods.clearWalletTermsError}
+                                    errorRowStyles={[styles.ml10, styles.mr2]}
+                                >
+                                    <CurrentWalletBalance />
+                                </OfflineWithFeedback>
+                            )}
                         </View>
                         {this.props.userWallet.currentBalance > 0 && (
                             <KYCWall
@@ -497,5 +522,8 @@ export default compose(
         walletTerms: {
             key: ONYXKEYS.WALLET_TERMS,
         },
+        isLoadingPaymentMethods: {
+            key: ONYXKEYS.IS_LOADING_PAYMENT_METHODS,
+        },
     }),
 )(BasePaymentsPage);