Improve performance of inbox page loading

src/components/Navigation/NavigationTabBar/index.tsx

@@ -161,8 +161,15 @@ function NavigationTabBar({selectedTab, isTopLevelBar = false, shouldShowFloatin
             name: CONST.TELEMETRY.SPAN_NAVIGATE_TO_INBOX_TAB,
             op: CONST.TELEMETRY.SPAN_NAVIGATE_TO_INBOX_TAB,
         });
+
+        if (!shouldUseNarrowLayout && isRoutePreloaded(NAVIGATORS.REPORTS_SPLIT_NAVIGATOR)) {
+            // We use dispatch here because the correct screens and params are preloaded and set up in usePreloadFullScreenNavigators.
+            navigationRef.dispatch(StackActions.push(NAVIGATORS.REPORTS_SPLIT_NAVIGATOR));
+            return;
+        }
+
         Navigation.navigate(ROUTES.HOME);
-    }, [selectedTab]);
+    }, [selectedTab, shouldUseNarrowLayout]);
 
     const [lastSearchParams] = useOnyx(ONYXKEYS.REPORT_NAVIGATION_LAST_SEARCH_QUERY, {canBeMissing: true});
 

src/libs/Navigation/AppNavigator/Navigators/ReportsSplitNavigator.tsx

@@ -1,4 +1,4 @@
-import React, {useMemo, useState} from 'react';
+import React, {useState} from 'react';
 import usePermissions from '@hooks/usePermissions';
 import createSplitNavigator from '@libs/Navigation/AppNavigator/createSplitNavigator';
 import FreezeWrapper from '@libs/Navigation/AppNavigator/FreezeWrapper';
@@ -27,14 +27,11 @@ function ReportsSplitNavigator({route}: PlatformStackScreenProps<AuthScreensPara
     const {isBetaEnabled} = usePermissions();
     const splitNavigatorScreenOptions = useSplitNavigatorScreenOptions();
 
-    // Determine if the current URL indicates a transition.
-    const isTransitioning = useMemo(() => {
-        const currentURL = getCurrentUrl();
-        return currentURL.includes(ROUTES.TRANSITION_BETWEEN_APPS);
-    }, []);
-
     const [initialReportID] = useState(() => {
         const currentURL = getCurrentUrl();
+        // Determine if the current URL indicates a transition.
+        const isTransitioning = currentURL.includes(ROUTES.TRANSITION_BETWEEN_APPS);
+
         const reportIdFromPath = currentURL && new URL(currentURL).pathname.match(CONST.REGEX.REPORT_ID_FROM_PATH)?.at(1);
         if (reportIdFromPath) {
             return reportIdFromPath;
@@ -54,6 +51,13 @@ function ReportsSplitNavigator({route}: PlatformStackScreenProps<AuthScreensPara
     // This hook preloads the screens of adjacent tabs to make changing tabs faster.
     usePreloadFullScreenNavigators();
 
+    const isOpenOnAdminRoom = shouldOpenOnAdminRoom();
+
+    const reportScreenInitialParams = {
+        reportID: initialReportID,
+        openOnAdminRoom: isOpenOnAdminRoom ? true : undefined,
+    };
+
     return (
         <FreezeWrapper>
             <Split.Navigator
@@ -70,7 +74,7 @@ function ReportsSplitNavigator({route}: PlatformStackScreenProps<AuthScreensPara
                 />
                 <Split.Screen
                     name={SCREENS.REPORT}
-                    initialParams={{reportID: initialReportID, openOnAdminRoom: shouldOpenOnAdminRoom() ? true : undefined}}
+                    initialParams={reportScreenInitialParams}
                     getComponent={loadReportScreen}
                 />
             </Split.Navigator>

src/libs/Navigation/AppNavigator/usePreloadFullScreenNavigators.ts

@@ -24,8 +24,8 @@ import {getPreservedNavigatorState} from './createSplitNavigator/usePreserveNavi
 // This timing is used to call the preload function after a tab change, when the initial tab screen has already been rendered.
 const TIMING_TO_CALL_PRELOAD = 1000;
 
-// Currently, only the Workspaces, Account tabs are preloaded. The remaining tabs will be supported soon.
-const TABS_TO_PRELOAD = [NAVIGATION_TABS.WORKSPACES, NAVIGATION_TABS.SETTINGS];
+// Currently the Inbox, Workspaces and Account tabs are preloaded, while Search is not preloaded due to its potential complexity.
+const TABS_TO_PRELOAD = [NAVIGATION_TABS.HOME, NAVIGATION_TABS.WORKSPACES, NAVIGATION_TABS.SETTINGS];
 
 function preloadWorkspacesTab(navigation: PlatformStackNavigationProp<AuthScreensParamList>) {
     const state = getWorkspacesTabStateFromSessionStorage() ?? navigation.getState();

src/pages/home/ReportScreen.tsx

@@ -164,7 +164,6 @@ function ReportScreen({route, navigation, isInSidePanel = false}: ReportScreenPr
     const reportActionIDFromRoute = route?.params?.reportActionID;
     const isFocused = useIsFocused();
     const prevIsFocused = usePrevious(isFocused);
-    const firstRenderRef = useRef(true);
     const [firstRender, setFirstRender] = useState(true);
     const isSkippingOpenReport = useRef(false);
     const flatListRef = useRef<FlatList>(null);
@@ -311,8 +310,6 @@ function ReportScreen({route, navigation, isInSidePanel = false}: ReportScreenPr
     const [isBannerVisible, setIsBannerVisible] = useState(true);
     const [scrollPosition, setScrollPosition] = useState<ScrollPosition>({});
 
-    const wasReportAccessibleRef = useRef(false);
-
     const viewportOffsetTop = useViewportOffsetTop();
 
     const {reportPendingAction, reportErrors} = getReportOfflinePendingActionAndErrors(report);
@@ -370,14 +367,6 @@ function ReportScreen({route, navigation, isInSidePanel = false}: ReportScreenPr
         hideEmojiPicker(true);
     }, [prevIsFocused, isFocused]);
 
-    useEffect(() => {
-        if (!report?.reportID) {
-            wasReportAccessibleRef.current = false;
-            return;
-        }
-        wasReportAccessibleRef.current = true;
-    }, [report?.reportID]);
-
     const backTo = route?.params?.backTo as string;
     const onBackButtonPress = useCallback(
         (prioritizeBackTo = false) => {
@@ -410,40 +399,55 @@ function ReportScreen({route, navigation, isInSidePanel = false}: ReportScreenPr
         [isInSidePanel, backTo, isInNarrowPaneModal, closeSidePanel],
     );
 
-    let headerView = (
-        <HeaderView
-            reportID={reportIDFromRoute}
-            onNavigationMenuButtonClicked={onBackButtonPress}
-            report={report}
-            parentReportAction={parentReportAction}
-            shouldUseNarrowLayout={shouldUseNarrowLayout}
-            isInSidePanel={isInSidePanel}
-        />
-    );
+    const headerView = useMemo(() => {
+        if (isTransactionThreadView) {
+            return (
+                <MoneyRequestHeader
+                    report={report}
+                    policy={policy}
+                    parentReportAction={parentReportAction}
+                    onBackButtonPress={onBackButtonPress}
+                />
+            );
+        }
 
-    if (isTransactionThreadView) {
-        headerView = (
-            <MoneyRequestHeader
-                report={report}
-                policy={policy}
-                parentReportAction={parentReportAction}
-                onBackButtonPress={onBackButtonPress}
-            />
-        );
-    }
+        if (isMoneyRequestOrInvoiceReport) {
+            return (
+                <MoneyReportHeader
+                    report={report}
+                    policy={policy}
+                    transactionThreadReportID={transactionThreadReportID}
+                    isLoadingInitialReportActions={reportMetadata.isLoadingInitialReportActions}
+                    reportActions={reportActions}
+                    onBackButtonPress={onBackButtonPress}
+                />
+            );
+        }
 
-    if (isMoneyRequestOrInvoiceReport) {
-        headerView = (
-            <MoneyReportHeader
+        return (
+            <HeaderView
+                reportID={reportIDFromRoute}
+                onNavigationMenuButtonClicked={onBackButtonPress}
                 report={report}
-                policy={policy}
-                transactionThreadReportID={transactionThreadReportID}
-                isLoadingInitialReportActions={reportMetadata.isLoadingInitialReportActions}
-                reportActions={reportActions}
-                onBackButtonPress={onBackButtonPress}
+                parentReportAction={parentReportAction}
+                shouldUseNarrowLayout={shouldUseNarrowLayout}
+                isInSidePanel={isInSidePanel}
             />
         );
-    }
+    }, [
+        isTransactionThreadView,
+        isMoneyRequestOrInvoiceReport,
+        report,
+        policy,
+        parentReportAction,
+        onBackButtonPress,
+        transactionThreadReportID,
+        reportMetadata.isLoadingInitialReportActions,
+        reportActions,
+        reportIDFromRoute,
+        shouldUseNarrowLayout,
+        isInSidePanel,
+    ]);
 
     useEffect(() => {
         if (!transactionThreadReportID || !route?.params?.reportActionID || !isOneTransactionThread(childReport, report, linkedAction)) {
@@ -462,7 +466,7 @@ function ReportScreen({route, navigation, isInSidePanel = false}: ReportScreenPr
 
     const prevIsLinkedActionDeleted = usePrevious(linkedAction ? isLinkedActionDeleted : undefined);
 
-    const lastReportActionIDFromRoute = usePrevious(!firstRenderRef.current ? reportActionIDFromRoute : undefined);
+    const lastReportActionIDFromRoute = usePrevious(!firstRender ? reportActionIDFromRoute : undefined);
 
     const [isNavigatingToDeletedAction, setIsNavigatingToDeletedAction] = useState(false);
 
@@ -498,25 +502,34 @@ function ReportScreen({route, navigation, isInSidePanel = false}: ReportScreenPr
     const currentReportIDFormRoute = route.params?.reportID;
 
     // eslint-disable-next-line rulesdir/no-negated-variables
-    const shouldShowNotFoundPage = useMemo(
-        (): boolean => {
-            if (shouldShowNotFoundLinkedAction) {
-                return true;
-            }
+    const shouldShowNotFoundPage = useMemo((): boolean => {
+        const isLoading = !!isLoadingApp || !!isLoadingReportData || !!reportMetadata?.isLoadingInitialReportActions;
+        const reportExists = !!reportID || !!isOptimisticDelete || !!userLeavingStatus;
+        const isInvalidReportPath = !!currentReportIDFormRoute && !isValidReportIDFromPath(currentReportIDFormRoute);
 
-            if (isLoadingApp !== false) {
-                return false;
-            }
+        if (shouldShowNotFoundLinkedAction) {
+            return true;
+        }
 
-            if (!wasReportAccessibleRef.current && !firstRenderRef.current && !reportID && !isOptimisticDelete && !reportMetadata?.isLoadingInitialReportActions && !userLeavingStatus) {
-                return true;
-            }
+        if (isLoading) {
+            return false;
+        }
 
-            return !!currentReportIDFormRoute && !isValidReportIDFromPath(currentReportIDFormRoute);
-        },
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        [firstRender, shouldShowNotFoundLinkedAction, reportID, isOptimisticDelete, reportMetadata?.isLoadingInitialReportActions, userLeavingStatus, currentReportIDFormRoute],
-    );
+        if (!reportExists) {
+            return true;
+        }
+
+        return isInvalidReportPath;
+    }, [
+        shouldShowNotFoundLinkedAction,
+        isLoadingApp,
+        isLoadingReportData,
+        reportMetadata?.isLoadingInitialReportActions,
+        reportID,
+        isOptimisticDelete,
+        userLeavingStatus,
+        currentReportIDFormRoute,
+    ]);
 
     const createOneTransactionThreadReport = useCallback(() => {
         const currentReportTransaction = getReportTransactions(reportID).filter((transaction) => transaction.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE);
@@ -693,8 +706,7 @@ function ReportScreen({route, navigation, isInSidePanel = false}: ReportScreenPr
 
     useEffect(() => {
         // We don't want this effect to run on the first render.
-        if (firstRenderRef.current) {
-            firstRenderRef.current = false;
+        if (firstRender) {
             setFirstRender(false);
             return;
         }