Merge pull request #49540 from nyomanjyotisa/issue-48478

Fix: IOU-Submit expense on foreign currency, total briefly greyed out on top
Expensify · Sep 24, 2024 · 4ab14d6 · 4ab14d6
2 parents f4a225d + 12bbe45
commit 4ab14d6
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 7 deletions.
diff --git 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
@@ -3220,6 +3220,10 @@ const styles = (theme: ThemeColors) =>
             color: theme.heading,
         },
 
+        moneyRequestLoadingHeight: {
+            height: 27,
+        },
+
         defaultCheckmarkWrapper: {
             marginLeft: 8,
             alignSelf: 'center',