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

@@ -13,6 +13,7 @@ import compose from '../../../libs/compose';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
 import ONYXKEYS from '../../../ONYXKEYS';
 import CONST from '../../../CONST';
+import {} from '../../../components/OnyxProvider';
 import * as Expensicons from '../../../components/Icon/Expensicons';
 import bankAccountPropTypes from '../../../components/bankAccountPropTypes';
 import paypalMeDataPropTypes from '../../../components/paypalMeDataPropTypes';
@@ -39,6 +40,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 +78,7 @@ const defaultProps = {
         walletLinkedAccountID: 0,
         walletLinkedAccountType: '',
     },
+    isLoadingPaymentMethods: true,
     shouldShowAddPaymentMethodButton: true,
     filterType: '',
     actionPaymentMethodType: '',
@@ -231,7 +236,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 +266,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) {
@@ -268,14 +269,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.props.isLoadingPaymentMethods && !this.props.network.isOffline ? (
+                                <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 +502,8 @@ export default compose(
         walletTerms: {
             key: ONYXKEYS.WALLET_TERMS,
         },
+        isLoadingPaymentMethods: {
+            key: ONYXKEYS.IS_LOADING_PAYMENT_METHODS,
+        },
     }),
 )(BasePaymentsPage);