Merge pull request #3577 from Expensify/horus-fix-iou-currency-flash

Display full-screen loading indicator while fetching currency data
Expensify · Jun 18, 2021 · 04e830b · 04e830b
2 parents 6626eb9 + 55273c6
commit 04e830b
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 6 deletions.
diff --git a/src/Expensify.js b/src/Expensify.js
@@ -31,7 +31,9 @@ Onyx.init({
         [ONYXKEYS.SESSION]: {loading: false, shouldShowComposeInput: true},
         [ONYXKEYS.ACCOUNT]: CONST.DEFAULT_ACCOUNT_DATA,
         [ONYXKEYS.NETWORK]: {isOffline: false},
-        [ONYXKEYS.IOU]: {loading: false, error: false, creatingIOUTransaction: false},
+        [ONYXKEYS.IOU]: {
+            loading: false, error: false, creatingIOUTransaction: false, isRetrievingCurrency: false,
+        },
     },
     registerStorageEventListener: (onStorageEvent) => {
         listenToStorageEvents(onStorageEvent);

diff --git a/src/libs/actions/PersonalDetails.js b/src/libs/actions/PersonalDetails.js
@@ -256,6 +256,10 @@ function fetchCurrencyPreferences() {
     const coords = {};
     let currency = '';
 
+    Onyx.merge(ONYXKEYS.IOU, {
+        isRetrievingCurrency: true,
+    });
+
     API.GetPreferredCurrency({...coords})
         .then((data) => {
             currency = data.currency;
@@ -269,7 +273,12 @@ function fetchCurrencyPreferences() {
                     preferredCurrencySymbol: currencyList[currency].symbol,
                 });
         })
-        .catch(error => console.debug(`Error fetching currency preference: , ${error}`));
+        .catch(error => console.debug(`Error fetching currency preference: , ${error}`))
+        .finally(() => {
+            Onyx.merge(ONYXKEYS.IOU, {
+                isRetrievingCurrency: false,
+            });
+        });
 }
 
 /**

diff --git a/src/pages/iou/IOUModal.js b/src/pages/iou/IOUModal.js
@@ -53,8 +53,8 @@ const propTypes = {
         /** Whether or not transaction creation has resulted to error */
         error: PropTypes.bool,
 
-        // is loading
-        loading: PropTypes.bool,
+        /** Flag to show a loading indicator and avoid showing a previously selected currency */
+        isRetrievingCurrency: PropTypes.bool,
     }).isRequired,
 
     /** Personal details of all the users */
@@ -303,8 +303,10 @@ class IOUModal extends Component {
                             </View>
                         </View>
                         <View style={[styles.pRelative, styles.flex1]}>
-                            <FullScreenLoadingIndicator visible={!didScreenTransitionEnd} />
-                            {didScreenTransitionEnd && (
+                            <FullScreenLoadingIndicator
+                                visible={!didScreenTransitionEnd || this.props.iou.isRetrievingCurrency}
+                            />
+                            {didScreenTransitionEnd && !this.props.iou.isRetrievingCurrency && (
                                 <>
                                     {currentStep === Steps.IOUAmount && (
                                         <IOUAmountPage