Merge pull request #91848 from software-mansion-labs/dariusz-biela/perf/search/navigation-deferred-mount

Perf: Defer Search/Reports list mount via NavigationDeferredMount

Author: luacmartins

src/components/Search/SearchWithNavigationDeferredMount.tsx

@@ -0,0 +1,49 @@
+import type {ComponentProps} from 'react';
+import React from 'react';
+import NavigationDeferredMount from '@components/NavigationDeferredMount';
+import SearchRowSkeleton from '@components/Skeletons/SearchRowSkeleton';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useThemeStyles from '@hooks/useThemeStyles';
+import {endSpanWithAttributes} from '@libs/telemetry/activeSpans';
+import {endSubmitFollowUpActionSpan, getPendingSubmitFollowUpAction} from '@libs/telemetry/submitFollowUpAction';
+import CONST from '@src/CONST';
+import Search from './index';
+
+const REASON_ATTRIBUTES = {context: 'SearchPage.NavigationDeferred'} as const;
+
+function handleSkeletonLayout() {
+    endSpanWithAttributes(CONST.TELEMETRY.SPAN_NAVIGATE_TO_REPORTS, {[CONST.TELEMETRY.ATTRIBUTE_IS_WARM]: true});
+
+    // Skeleton paint is the first user-perceivable signal that the submit destination
+    // (Search) is up. End the submit-to-destination-visible span here for any pending
+    // action that targets Search. DISMISS_MODAL_AND_OPEN_REPORT is excluded because
+    // that flow's destination is the report, not Search.
+    const pending = getPendingSubmitFollowUpAction();
+    if (pending && pending.followUpAction !== CONST.TELEMETRY.SUBMIT_FOLLOW_UP_ACTION.DISMISS_MODAL_AND_OPEN_REPORT) {
+        endSubmitFollowUpActionSpan(pending.followUpAction, undefined, {[CONST.TELEMETRY.ATTRIBUTE_IS_WARM]: true});
+    }
+}
+
+function SearchWithNavigationDeferredMount(props: ComponentProps<typeof Search>) {
+    const styles = useThemeStyles();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
+    const containerStyle = shouldUseNarrowLayout ? styles.searchListContentContainerStyles(!!props.hasFilterBars) : styles.mt3;
+
+    return (
+        <NavigationDeferredMount
+            waitForUpcomingTransition={false}
+            placeholder={
+                <SearchRowSkeleton
+                    shouldAnimate
+                    onLayout={handleSkeletonLayout}
+                    containerStyle={containerStyle}
+                    reasonAttributes={REASON_ATTRIBUTES}
+                />
+            }
+        >
+            <Search {...props} />
+        </NavigationDeferredMount>
+    );
+}
+
+export default SearchWithNavigationDeferredMount;

src/pages/Search/SearchPageNarrow/index.tsx

@@ -17,6 +17,7 @@ import {useSearchResultsContext, useSearchSelectionActions} from '@components/Se
 import SearchLoadingSkeleton from '@components/Search/SearchLoadingSkeleton';
 import SearchPageFooter from '@components/Search/SearchPageFooter';
 import SearchPageHeaderNarrow from '@components/Search/SearchPageHeader/SearchPageHeaderNarrow';
+import SearchWithNavigationDeferredMount from '@components/Search/SearchWithNavigationDeferredMount';
 import type {SearchParams, SearchQueryJSON} from '@components/Search/types';
 import useAndroidBackButtonHandler from '@hooks/useAndroidBackButtonHandler';
 import useEndSubmitNavigationSpans from '@hooks/useEndSubmitNavigationSpans';
@@ -398,7 +399,7 @@ function SearchPageNarrow({
                                             }}
                                         />
                                     ) : (
-                                        <Search
+                                        <SearchWithNavigationDeferredMount
                                             searchResults={searchResults}
                                             queryJSON={queryJSON}
                                             key={queryJSON.hash}

src/pages/Search/SearchPageWide.tsx

@@ -6,12 +6,12 @@ import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView
 import ReceiptScanDropZone from '@components/ReceiptScanDropZone';
 import ScreenWrapper from '@components/ScreenWrapper';
 import {ScrollOffsetContext} from '@components/ScrollOffsetContextProvider';
-import Search from '@components/Search';
 import {useSearchResultsContext} from '@components/Search/SearchContext';
 import SearchLoadingSkeleton from '@components/Search/SearchLoadingSkeleton';
 import SearchPageFooter from '@components/Search/SearchPageFooter';
 import SearchActionsBarWide from '@components/Search/SearchPageHeader/SearchActionsBarWide';
 import SearchPageHeaderWide from '@components/Search/SearchPageHeader/SearchPageHeaderWide';
+import SearchWithNavigationDeferredMount from '@components/Search/SearchWithNavigationDeferredMount';
 import type {SearchParams, SearchQueryJSON} from '@components/Search/types';
 import useEndSubmitNavigationSpans from '@hooks/useEndSubmitNavigationSpans';
 import useNetwork from '@hooks/useNetwork';
@@ -131,7 +131,7 @@ function SearchPageWide({
                                         }}
                                     />
                                 ) : (
-                                    <Search
+                                    <SearchWithNavigationDeferredMount
                                         key={queryJSON.hash}
                                         queryJSON={queryJSON}
                                         searchResults={searchResults}