Add VBA loading animation

src/components/VBALoadingIndicator.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import {Image, StyleSheet, View} from 'react-native';
+import styles from '../styles/styles';
+import CONST from '../CONST';
+import withLocalize, {withLocalizePropTypes} from './withLocalize';
+import Text from './Text';
+
+const propTypes = {
+    ...withLocalizePropTypes,
+};
+
+const VBALoadingIndicator = ({translate}) => (
+    <View style={[StyleSheet.absoluteFillObject, styles.fullScreenLoading]}>
+        <View style={[styles.pageWrapper]}>
+            <Image
+                source={{uri: `${CONST.CLOUDFRONT_URL}/images/icons/emptystates/emptystate_reviewing.gif`}}
+                style={[
+                    styles.loadingVBAAnimation,
+                ]}
+            />
+            <View style={[styles.ph6]}>
+                <Text style={[styles.textStrong, styles.h3, styles.mb4, styles.mt4, styles.textAlignCenter]}>
+                    {translate('vbaLoadingAnimation.oneMoment')}
+                </Text>
+                <Text style={[styles.textAlignCenter]}>
+                    {translate('vbaLoadingAnimation.explanationLine')}
+                </Text>
+            </View>
+        </View>
+    </View>
+);
+
+VBALoadingIndicator.propTypes = propTypes;
+
+export default withLocalize(VBALoadingIndicator);

src/languages/en.js

@@ -546,6 +546,10 @@ export default {
             certify: 'Must certify information is true and accurate',
         },
     },
+    vbaLoadingAnimation: {
+        oneMoment: 'One moment...',
+        explanationLine: 'We’re taking a look at your information. You will be able to continue with next steps shortly.',
+    },
     session: {
         offlineMessageRetry: 'Looks like you\'re offline. Please check your connection and try again.',
         offlineMessage: 'Looks like you\'re offline.',

src/languages/es.js

@@ -548,6 +548,10 @@ export default {
             certify: 'Debe certificar que la información es verdadera y precisa',
         },
     },
+    vbaLoadingAnimation: {
+        oneMoment: 'Un momento...',
+        explanationLine: 'Estamos verificando tu información y podrás continuar con los siguientes pasos en unos momentos.',
+    },
     session: {
         offlineMessageRetry: 'Parece que estás desconectado. Por favor chequea tu conexión e inténtalo otra vez',
         offlineMessage: 'Parece que estás desconectado.',

src/pages/ReimbursementAccount/ReimbursementAccountPage.js

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import ScreenWrapper from '../../components/ScreenWrapper';
 import {fetchFreePlanVerifiedBankAccount} from '../../libs/actions/BankAccounts';
 import ONYXKEYS from '../../ONYXKEYS';
-import FullScreenLoadingIndicator from '../../components/FullscreenLoadingIndicator';
+import VBALoadingIndicator from '../../components/VBALoadingIndicator';
 import Permissions from '../../libs/Permissions';
 import Navigation from '../../libs/Navigation/Navigation';
 import CONST from '../../CONST';
@@ -156,7 +156,7 @@ class ReimbursementAccountPage extends React.Component {
         }
 
         if (this.props.reimbursementAccount.loading) {
-            return <FullScreenLoadingIndicator visible />;
+            return <VBALoadingIndicator />;
         }
 
         let errorComponent;

src/styles/styles.js

@@ -284,6 +284,11 @@ const styles = {
         width: variables.componentSizeNormal,
     },
 
+    loadingVBAAnimation: {
+        width: 160,
+        height: 160,
+    },
+
     picker: {
         inputIOS: {
             fontFamily: fontFamily.GTA,