From e78e299f62c09bac64fdefb4f17f975cb3594e75 Mon Sep 17 00:00:00 2001
From: Vit Horacek <vit@expensify.com>
Date: Fri, 6 Aug 2021 17:28:10 +0100
Subject: [PATCH 1/7] Add translations for VBA loading animation

---
 src/languages/en.js | 4 ++++
 src/languages/es.js | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/src/languages/en.js b/src/languages/en.js
index a2d9379d2a96..7eee77d0611b 100755
--- a/src/languages/en.js
+++ b/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.',
diff --git a/src/languages/es.js b/src/languages/es.js
index c93e0a4103e9..212351458bf8 100644
--- a/src/languages/es.js
+++ b/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.',

From df53150c7d9f492faf459ebab90601f2da5bccc3 Mon Sep 17 00:00:00 2001
From: Vit Horacek <vit@expensify.com>
Date: Fri, 6 Aug 2021 21:06:37 +0100
Subject: [PATCH 2/7] Add new loading animation for the VBA flow

---
 src/components/VBALoadingIndicator.js         | 49 +++++++++++++++++++
 .../ReimbursementAccountPage.js               |  4 +-
 src/styles/styles.js                          |  5 ++
 3 files changed, 56 insertions(+), 2 deletions(-)
 create mode 100644 src/components/VBALoadingIndicator.js

diff --git a/src/components/VBALoadingIndicator.js b/src/components/VBALoadingIndicator.js
new file mode 100644
index 000000000000..d94f72806874
--- /dev/null
+++ b/src/components/VBALoadingIndicator.js
@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {Image, StyleSheet, View} from 'react-native';
+import styles from '../styles/styles';
+import withLocalize, {withLocalizePropTypes} from './withLocalize';
+import Text from './Text';
+import compose from '../libs/compose';
+
+const propTypes = {
+    /** Controls whether the loader is mounted and displayed */
+    visible: PropTypes.bool,
+
+    ...withLocalizePropTypes,
+};
+
+const defaultProps = {
+    visible: true,
+};
+
+/**
+ * Loading indication component intended be shown between the steps of VBA flow
+ *
+ * @returns {JSX.Element}
+ */
+const VBALoadingIndicator = ({translate, visible}) => visible && (
+    <View style={[StyleSheet.absoluteFillObject, styles.fullScreenLoading]}>
+        <Image
+            source={{uri: 'https://d2k5nsl2zxldvw.cloudfront.net/images/icons/emptystates/emptystate_reviewing.gif'}}
+            style={[
+                styles.loadingVBAAnimation,
+            ]}
+        />
+        <View style={[styles.ph6, styles.textAlignCenter]}>
+            <Text style={[styles.textStrong, styles.h3, styles.mb4, styles.mt4]}>
+                {translate('vbaLoadingAnimation.oneMoment')}
+            </Text>
+            <Text>
+                {translate('vbaLoadingAnimation.explanationLine')}
+            </Text>
+        </View>
+    </View>
+);
+
+VBALoadingIndicator.propTypes = propTypes;
+VBALoadingIndicator.defaultProps = defaultProps;
+
+export default compose(
+    withLocalize,
+)(VBALoadingIndicator);
diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
index 05c93882eb35..ba6bb1f8646e 100644
--- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
+++ b/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 visible />;
         }
 
         let errorComponent;
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 31d8103e433f..1983a2b7b3fd 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -284,6 +284,11 @@ const styles = {
         width: variables.componentSizeNormal,
     },
 
+    loadingVBAAnimation: {
+        width: 160,
+        height: 160,
+    },
+
     picker: {
         inputIOS: {
             fontFamily: fontFamily.GTA,

From a97f08b5a88dcc182247637880e3f806d26bbf05 Mon Sep 17 00:00:00 2001
From: Vit Horacek <vit@expensify.com>
Date: Tue, 10 Aug 2021 13:52:52 +0100
Subject: [PATCH 3/7] Update styles

---
 src/components/VBALoadingIndicator.js         | 28 ++++++++++---------
 .../ReimbursementAccountPage.js               |  1 +
 2 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/src/components/VBALoadingIndicator.js b/src/components/VBALoadingIndicator.js
index d94f72806874..cff478f95133 100644
--- a/src/components/VBALoadingIndicator.js
+++ b/src/components/VBALoadingIndicator.js
@@ -24,19 +24,21 @@ const defaultProps = {
  */
 const VBALoadingIndicator = ({translate, visible}) => visible && (
     <View style={[StyleSheet.absoluteFillObject, styles.fullScreenLoading]}>
-        <Image
-            source={{uri: 'https://d2k5nsl2zxldvw.cloudfront.net/images/icons/emptystates/emptystate_reviewing.gif'}}
-            style={[
-                styles.loadingVBAAnimation,
-            ]}
-        />
-        <View style={[styles.ph6, styles.textAlignCenter]}>
-            <Text style={[styles.textStrong, styles.h3, styles.mb4, styles.mt4]}>
-                {translate('vbaLoadingAnimation.oneMoment')}
-            </Text>
-            <Text>
-                {translate('vbaLoadingAnimation.explanationLine')}
-            </Text>
+        <View style={[styles.pageWrapper]}>
+            <Image
+                source={{uri: 'https://d2k5nsl2zxldvw.cloudfront.net/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>
 );
diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
index ba6bb1f8646e..b5ce6ea0b752 100644
--- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
+++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
@@ -156,6 +156,7 @@ class ReimbursementAccountPage extends React.Component {
         }
 
         if (this.props.reimbursementAccount.loading) {
+        // if (true) {
             return <VBALoadingIndicator visible />;
         }
 

From f77af65432e2cc7bea2580abdc14fd71d3e4cc42 Mon Sep 17 00:00:00 2001
From: Vit Horacek <vit@expensify.com>
Date: Tue, 10 Aug 2021 13:56:39 +0100
Subject: [PATCH 4/7] Use cloudfront url const

---
 src/components/VBALoadingIndicator.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/VBALoadingIndicator.js b/src/components/VBALoadingIndicator.js
index cff478f95133..90152a533e20 100644
--- a/src/components/VBALoadingIndicator.js
+++ b/src/components/VBALoadingIndicator.js
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 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';
 import compose from '../libs/compose';
@@ -26,7 +27,7 @@ const VBALoadingIndicator = ({translate, visible}) => visible && (
     <View style={[StyleSheet.absoluteFillObject, styles.fullScreenLoading]}>
         <View style={[styles.pageWrapper]}>
             <Image
-                source={{uri: 'https://d2k5nsl2zxldvw.cloudfront.net/images/icons/emptystates/emptystate_reviewing.gif'}}
+                source={{uri: `${CONST.CLOUDFRONT_URL}/images/icons/emptystates/emptystate_reviewing.gif`}}
                 style={[
                     styles.loadingVBAAnimation,
                 ]}

From 340a7bedece51c004ee07b76722547339936b143 Mon Sep 17 00:00:00 2001
From: Vit Horacek <vit@expensify.com>
Date: Tue, 10 Aug 2021 13:59:12 +0100
Subject: [PATCH 5/7] Remove the comment

---
 src/pages/ReimbursementAccount/ReimbursementAccountPage.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
index b5ce6ea0b752..ba6bb1f8646e 100644
--- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
+++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
@@ -156,7 +156,6 @@ class ReimbursementAccountPage extends React.Component {
         }
 
         if (this.props.reimbursementAccount.loading) {
-        // if (true) {
             return <VBALoadingIndicator visible />;
         }
 

From 927b230cf2196bd2600325b6f472b8ead995c993 Mon Sep 17 00:00:00 2001
From: Vit Horacek <vit@expensify.com>
Date: Tue, 10 Aug 2021 14:16:01 +0100
Subject: [PATCH 6/7] Remove unneccesary compose

---
 .../expensify/chat/generated/BasePackageList.java   | 13 +++++++++++++
 src/components/VBALoadingIndicator.js               |  5 +----
 2 files changed, 14 insertions(+), 4 deletions(-)
 create mode 100644 android/app/src/main/java/com/expensify/chat/generated/BasePackageList.java

diff --git a/android/app/src/main/java/com/expensify/chat/generated/BasePackageList.java b/android/app/src/main/java/com/expensify/chat/generated/BasePackageList.java
new file mode 100644
index 000000000000..77ee44f9be7a
--- /dev/null
+++ b/android/app/src/main/java/com/expensify/chat/generated/BasePackageList.java
@@ -0,0 +1,13 @@
+package com.expensify.chat.generated;
+
+import java.util.Arrays;
+import java.util.List;
+import org.unimodules.core.interfaces.Package;
+
+public class BasePackageList {
+  public List<Package> getPackageList() {
+    return Arrays.<Package>asList(
+        new expo.modules.haptics.HapticsPackage()
+    );
+  }
+}
diff --git a/src/components/VBALoadingIndicator.js b/src/components/VBALoadingIndicator.js
index 90152a533e20..1dd81408ed01 100644
--- a/src/components/VBALoadingIndicator.js
+++ b/src/components/VBALoadingIndicator.js
@@ -5,7 +5,6 @@ import styles from '../styles/styles';
 import CONST from '../CONST';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import Text from './Text';
-import compose from '../libs/compose';
 
 const propTypes = {
     /** Controls whether the loader is mounted and displayed */
@@ -47,6 +46,4 @@ const VBALoadingIndicator = ({translate, visible}) => visible && (
 VBALoadingIndicator.propTypes = propTypes;
 VBALoadingIndicator.defaultProps = defaultProps;
 
-export default compose(
-    withLocalize,
-)(VBALoadingIndicator);
+export default withLocalize(VBALoadingIndicator);

From 20aa7af76c655f598d1ac7e798bc0b2fc8c20494 Mon Sep 17 00:00:00 2001
From: Vit Horacek <vit@expensify.com>
Date: Tue, 10 Aug 2021 15:44:56 +0100
Subject: [PATCH 7/7] Remove the jsx component docs and unnecessary visible
 parameter

---
 .../chat/generated/BasePackageList.java          | 13 -------------
 src/components/VBALoadingIndicator.js            | 16 +---------------
 .../ReimbursementAccountPage.js                  |  2 +-
 3 files changed, 2 insertions(+), 29 deletions(-)
 delete mode 100644 android/app/src/main/java/com/expensify/chat/generated/BasePackageList.java

diff --git a/android/app/src/main/java/com/expensify/chat/generated/BasePackageList.java b/android/app/src/main/java/com/expensify/chat/generated/BasePackageList.java
deleted file mode 100644
index 77ee44f9be7a..000000000000
--- a/android/app/src/main/java/com/expensify/chat/generated/BasePackageList.java
+++ /dev/null
@@ -1,13 +0,0 @@
-package com.expensify.chat.generated;
-
-import java.util.Arrays;
-import java.util.List;
-import org.unimodules.core.interfaces.Package;
-
-public class BasePackageList {
-  public List<Package> getPackageList() {
-    return Arrays.<Package>asList(
-        new expo.modules.haptics.HapticsPackage()
-    );
-  }
-}
diff --git a/src/components/VBALoadingIndicator.js b/src/components/VBALoadingIndicator.js
index 1dd81408ed01..a53c83e38e3f 100644
--- a/src/components/VBALoadingIndicator.js
+++ b/src/components/VBALoadingIndicator.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import {Image, StyleSheet, View} from 'react-native';
 import styles from '../styles/styles';
 import CONST from '../CONST';
@@ -7,22 +6,10 @@ import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import Text from './Text';
 
 const propTypes = {
-    /** Controls whether the loader is mounted and displayed */
-    visible: PropTypes.bool,
-
     ...withLocalizePropTypes,
 };
 
-const defaultProps = {
-    visible: true,
-};
-
-/**
- * Loading indication component intended be shown between the steps of VBA flow
- *
- * @returns {JSX.Element}
- */
-const VBALoadingIndicator = ({translate, visible}) => visible && (
+const VBALoadingIndicator = ({translate}) => (
     <View style={[StyleSheet.absoluteFillObject, styles.fullScreenLoading]}>
         <View style={[styles.pageWrapper]}>
             <Image
@@ -44,6 +31,5 @@ const VBALoadingIndicator = ({translate, visible}) => visible && (
 );
 
 VBALoadingIndicator.propTypes = propTypes;
-VBALoadingIndicator.defaultProps = defaultProps;
 
 export default withLocalize(VBALoadingIndicator);
diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
index ba6bb1f8646e..0a964289f5f4 100644
--- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
+++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
@@ -156,7 +156,7 @@ class ReimbursementAccountPage extends React.Component {
         }
 
         if (this.props.reimbursementAccount.loading) {
-            return <VBALoadingIndicator visible />;
+            return <VBALoadingIndicator />;
         }
 
         let errorComponent;
