diff --git a/src/pages/ReportDetailsPage.tsx b/src/pages/ReportDetailsPage.tsx index 9cbda7d61d0bb..5486193bb0873 100644 --- a/src/pages/ReportDetailsPage.tsx +++ b/src/pages/ReportDetailsPage.tsx @@ -1,6 +1,6 @@ import {StackActions} from '@react-navigation/native'; import React, {useCallback, useEffect, useMemo} from 'react'; -import {View} from 'react-native'; +import {InteractionManager, View} from 'react-native'; import type {OnyxEntry} from 'react-native-onyx'; import type {ValueOf} from 'type-fest'; import AvatarWithImagePicker from '@components/AvatarWithImagePicker'; @@ -1012,7 +1012,12 @@ function ReportDetailsPage({policy, report, route, reportMetadata}: ReportDetail } Navigation.setNavigationActionToMicrotaskQueue(() => { navigateToTargetUrl(); - deleteTransaction(); + // Delay deletion until the RHP close animation finishes to prevent a brief + // "Not Found" flash inside the animating-out panel on slower devices. + // eslint-disable-next-line @typescript-eslint/no-deprecated + InteractionManager.runAfterInteractions(() => { + deleteTransaction(); + }); }); }, [showConfirmModal, translate, caseID, navigateToTargetUrl, deleteTransaction]); diff --git a/src/pages/inbox/DeleteTransactionNavigateBackHandler.tsx b/src/pages/inbox/DeleteTransactionNavigateBackHandler.tsx index 3391067b22123..d5cfc415ca2a1 100644 --- a/src/pages/inbox/DeleteTransactionNavigateBackHandler.tsx +++ b/src/pages/inbox/DeleteTransactionNavigateBackHandler.tsx @@ -9,20 +9,20 @@ import ONYXKEYS from '@src/ONYXKEYS'; /** * Component that does not render anything but isolates the NVP_DELETE_TRANSACTION_NAVIGATE_BACK_URL * subscription from ReportScreen. Clears the URL after interactions complete - * when the report is focused. + * when the report is no longer focused. */ function DeleteTransactionNavigateBackHandler() { const isFocused = useIsFocused(); const [deleteTransactionNavigateBackUrl] = useOnyx(ONYXKEYS.NVP_DELETE_TRANSACTION_NAVIGATE_BACK_URL); useEffect(() => { - if (!isFocused || !deleteTransactionNavigateBackUrl) { + if (isFocused || !deleteTransactionNavigateBackUrl) { return; } if (doesDeleteNavigateBackUrlIncludeDuplicatesReview(deleteTransactionNavigateBackUrl)) { return; } - // Clear the URL after all interactions are processed to ensure all updates are completed before hiding the skeleton + // Clear the URL only after we navigate away to avoid a brief Not Found flash. // eslint-disable-next-line @typescript-eslint/no-deprecated InteractionManager.runAfterInteractions(() => { requestAnimationFrame(() => {