diff --git a/src/components/ReportActionItem/MoneyReportView.tsx b/src/components/ReportActionItem/MoneyReportView.tsx
index 6ab2db05c49f..8546aa8165c9 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
/>
)}
-
- {formattedTotalAmount}
-
+ {!isTotalUpdated && !isOffline ? (
+
+ ) : (
+
+ {formattedTotalAmount}
+
+ )}
)}
diff --git a/src/styles/index.ts b/src/styles/index.ts
index ad6c0552aa29..9dcc4a28f18d 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',