diff --git a/src/components/MoneyRequestHeader.tsx b/src/components/MoneyRequestHeader.tsx index f34ebb132ad8..362cab556bef 100644 --- a/src/components/MoneyRequestHeader.tsx +++ b/src/components/MoneyRequestHeader.tsx @@ -29,6 +29,7 @@ import * as Expensicons from './Icon/Expensicons'; import type {MoneyRequestHeaderStatusBarProps} from './MoneyRequestHeaderStatusBar'; import MoneyRequestHeaderStatusBar from './MoneyRequestHeaderStatusBar'; import ProcessMoneyRequestHoldMenu from './ProcessMoneyRequestHoldMenu'; +import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue'; type MoneyRequestHeaderProps = { /** The report currently being looked at */ @@ -52,7 +53,8 @@ function MoneyRequestHeader({report, parentReportAction, policy, shouldUseNarrow const [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${(parentReportAction as ReportAction & OriginalMessageIOU)?.originalMessage?.IOUTransactionID ?? 0}`); const [transactionViolations] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS); const [session] = useOnyx(ONYXKEYS.SESSION); - const [shownHoldUseExplanation] = useOnyx(ONYXKEYS.NVP_HOLD_USE_EXPLAINED, {initialValue: false}); + const [holdUseExplained, holdUseExplainedResult] = useOnyx(ONYXKEYS.NVP_HOLD_USE_EXPLAINED); + const isLoadingHoldUseExplained = isLoadingOnyxValue(holdUseExplainedResult); const styles = useThemeStyles(); const theme = useTheme(); @@ -171,8 +173,11 @@ function MoneyRequestHeader({report, parentReportAction, policy, shouldUseNarrow } useEffect(() => { - setShouldShowHoldMenu(isOnHold && !shownHoldUseExplanation); - }, [isOnHold, shownHoldUseExplanation]); + if (isLoadingHoldUseExplained) { + return; + } + setShouldShowHoldMenu(isOnHold && !holdUseExplained); + }, [isOnHold, holdUseExplained, isLoadingHoldUseExplained]); useEffect(() => { if (!shouldShowHoldMenu) {