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',