FIX: Not found page shows briefly when deleting a track expense

src/libs/Navigation/Navigation.ts

@@ -219,8 +219,9 @@ function goBack(fallbackRoute?: Route, shouldEnforceFallback = false, shouldPopT
 
     if (shouldPopToTop) {
         if (shouldPopAllStateOnUP) {
+            const rootState = navigationRef.getRootState();
             shouldPopAllStateOnUP = false;
-            navigationRef.current?.dispatch(StackActions.popToTop());
+            navigationRef.current?.dispatch({...StackActions.popToTop(), target: rootState.key});
             return;
         }
     }

src/pages/Debug/Report/DebugReportPage.tsx

@@ -1,5 +1,5 @@
 import React, {useCallback, useMemo} from 'react';
-import {View} from 'react-native';
+import {InteractionManager, View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import Button from '@components/Button';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
@@ -10,7 +10,7 @@ import useLocalize from '@hooks/useLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import {navigateToConciergeChatAndDeleteReport} from '@libs/actions/Report';
+import {deleteReport} from '@libs/actions/Report';
 import DebugUtils from '@libs/DebugUtils';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import type {DebugTabNavigatorRoutes} from '@libs/Navigation/DebugTabNavigator';
@@ -123,7 +123,12 @@ function DebugReportPage({
                     Debug.setDebugData(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`, data);
                 }}
                 onDelete={() => {
-                    navigateToConciergeChatAndDeleteReport(reportID, true, true);
+                    Navigation.resetToHome();
+                    // We need to wait for navigation animations to finish before deleting an action,
+                    // otherwise the user will see a not found page briefly.
+                    InteractionManager.runAfterInteractions(() => {
+                        deleteReport(reportID, true);
+                    });
                 }}
                 validate={DebugUtils.validateReportDraftProperty}
             >

src/pages/home/report/withReportOrNotFound.tsx

@@ -1,11 +1,11 @@
 /* eslint-disable rulesdir/no-negated-variables */
-import {useIsFocused} from '@react-navigation/native';
 import type {ComponentType, ForwardedRef, RefAttributes} from 'react';
 import React, {useEffect} from 'react';
 import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
 import {useOnyx} from 'react-native-onyx';
 import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import getComponentDisplayName from '@libs/getComponentDisplayName';
+import Navigation from '@libs/Navigation/Navigation';
 import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
 import * as ReportUtils from '@libs/ReportUtils';
 import type {
@@ -66,10 +66,11 @@ export default function (
             const [reportMetadata] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_METADATA}${props.route.params.reportID}`);
             const [isLoadingReportData] = useOnyx(ONYXKEYS.IS_LOADING_REPORT_DATA);
             const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${props.route.params.reportID}`);
-            const isFocused = useIsFocused();
             const contentShown = React.useRef(false);
+            const wasReportAccessible = React.useRef(false);
             const isReportIdInRoute = !!props.route.params.reportID?.length;
             const isReportLoaded = !isEmptyObject(report) && !!report?.reportID;
+            const canAccessReport = isReportLoaded && ReportUtils.canAccessReport(report, policies, betas);
 
             // The `isLoadingInitialReportActions` value will become `false` only after the first OpenReport API call is finished (either succeeded or failed)
             const shouldFetchReport = isReportIdInRoute && reportMetadata?.isLoadingInitialReportActions !== false;
@@ -86,14 +87,25 @@ export default function (
                 // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
             }, [shouldFetchReport, isReportLoaded, props.route.params.reportID]);
 
+            // Track when we lose access to a previously accessible report
+            useEffect(() => {
+                if (canAccessReport) {
+                    wasReportAccessible.current = true;
+                } else if (wasReportAccessible.current && !canAccessReport) {
+                    // If we previously had access but lost it, reset to home in order to avoid
+                    // being stuck on blank page or get infinite report skeleton loading
+                    Navigation.resetToHome();
+                }
+            }, [canAccessReport]);
+
             if (shouldRequireReportID || isReportIdInRoute) {
                 const shouldShowFullScreenLoadingIndicator = !isReportLoaded && (isLoadingReportData !== false || shouldFetchReport);
                 const shouldShowNotFoundPage = !isReportLoaded || !ReportUtils.canAccessReport(report, policies, betas);
 
                 // If the content was shown, but it's not anymore, that means the report was deleted, and we are probably navigating out of this screen.
                 // Return null for this case to avoid rendering FullScreenLoadingIndicator or NotFoundPage when animating transition.
                 // eslint-disable-next-line react-compiler/react-compiler
-                if (shouldShowNotFoundPage && contentShown.current && !isFocused) {
+                if (shouldShowNotFoundPage && contentShown.current) {
                     return null;
                 }