From 12bbe459e63496156c8eff7b4304a0a256afb16b Mon Sep 17 00:00:00 2001
From: I Nyoman Jyotisa <jyotisa1616@gmail.com>
Date: Fri, 20 Sep 2024 23:09:37 +0800
Subject: [PATCH] Fix: IOU-Submit expense on foreign currency, total briefly
 greyed out on top

---
 .../ReportActionItem/MoneyReportView.tsx      | 24 +++++++++++++------
 src/styles/index.ts                           |  4 ++++
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyReportView.tsx b/src/components/ReportActionItem/MoneyReportView.tsx
index 6ab2db05c49..8546aa8165c 100644
--- a/src/components/ReportActionItem/MoneyReportView.tsx
+++ b/src/components/ReportActionItem/MoneyReportView.tsx
@@ -1,7 +1,7 @@
 import {Str} from 'expensify-common';
 import React, {useMemo} from 'react';
 import type {StyleProp, TextStyle} from 'react-native';
-import {View} from 'react-native';
+import {ActivityIndicator, View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
 import Icon from '@components/Icon';
@@ -12,6 +12,7 @@ import SpacerView from '@components/SpacerView';
 import Text from '@components/Text';
 import UnreadActionIndicator from '@components/UnreadActionIndicator';
 import useLocalize from '@hooks/useLocalize';
+import useNetwork from '@hooks/useNetwork';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -47,6 +48,7 @@ function MoneyReportView({report, policy, isCombinedReport = false, shouldShowTo
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const {translate} = useLocalize();
+    const {isOffline} = useNetwork();
     const isSettled = ReportUtils.isSettled(report.reportID);
     const isTotalUpdated = ReportUtils.hasUpdatedTotal(report, policy);
 
@@ -160,12 +162,20 @@ function MoneyReportView({report, policy, isCombinedReport = false, shouldShowTo
                                             />
                                         </View>
                                     )}
-                                    <Text
-                                        numberOfLines={1}
-                                        style={[styles.taskTitleMenuItem, styles.alignSelfCenter, !isTotalUpdated && styles.offlineFeedback.pending]}
-                                    >
-                                        {formattedTotalAmount}
-                                    </Text>
+                                    {!isTotalUpdated && !isOffline ? (
+                                        <ActivityIndicator
+                                            size="small"
+                                            style={[styles.moneyRequestLoadingHeight]}
+                                            color={theme.textSupporting}
+                                        />
+                                    ) : (
+                                        <Text
+                                            numberOfLines={1}
+                                            style={[styles.taskTitleMenuItem, styles.alignSelfCenter, !isTotalUpdated && styles.offlineFeedback.pending]}
+                                        >
+                                            {formattedTotalAmount}
+                                        </Text>
+                                    )}
                                 </View>
                             </View>
                         )}
diff --git a/src/styles/index.ts b/src/styles/index.ts
index ad6c0552aa2..9dcc4a28f18 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -3220,6 +3220,10 @@ const styles = (theme: ThemeColors) =>
             color: theme.heading,
         },
 
+        moneyRequestLoadingHeight: {
+            height: 27,
+        },
+
         defaultCheckmarkWrapper: {
             marginLeft: 8,
             alignSelf: 'center',