Defer SearchAutocompleteList render in SearchRouter on native mobile until navigation triggers

src/CONST/index.ts

@@ -1794,6 +1794,7 @@ const CONST = {
         SPAN_SEARCH_ROUTER_OPTIONS_INIT: 'SearchRouter.OptionsInit',
         SPAN_SEARCH_ROUTER_COMPUTE_OPTIONS: 'SearchRouter.ComputeOptions',
         SPAN_SEARCH_ROUTER_LIST_RENDER: 'SearchRouter.ListRender',
+        SPAN_SEARCH_PAGE_VISIBLE: 'ManualOpenSearchRouterPageVisible',
         SPAN_OPEN_CREATE_EXPENSE: 'ManualOpenCreateExpense',
         SPAN_CAMERA_INIT: 'ManualCameraInit',
         SPAN_SHUTTER_TO_CONFIRMATION: 'ManualShutterToConfirmation',

src/components/OptionsListSkeletonView.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import type {LayoutChangeEvent} from 'react-native';
 import {Circle} from 'react-native-svg';
 import useThemeStyles from '@hooks/useThemeStyles';
 import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
@@ -26,9 +27,18 @@ type OptionsListSkeletonViewProps = {
     fixedNumItems?: number;
     speed?: number;
     reasonAttributes?: SkeletonSpanReasonAttributes;
+    onLayout?: (event: LayoutChangeEvent) => void;
 };
 
-function OptionsListSkeletonView({shouldAnimate = true, shouldStyleAsTable = false, gradientOpacityEnabled = false, fixedNumItems, speed, reasonAttributes}: OptionsListSkeletonViewProps) {
+function OptionsListSkeletonView({
+    shouldAnimate = true,
+    shouldStyleAsTable = false,
+    gradientOpacityEnabled = false,
+    fixedNumItems,
+    speed,
+    reasonAttributes,
+    onLayout,
+}: OptionsListSkeletonViewProps) {
     const styles = useThemeStyles();
     useSkeletonSpan('OptionsListSkeletonView', reasonAttributes);
 
@@ -37,6 +47,7 @@ function OptionsListSkeletonView({shouldAnimate = true, shouldStyleAsTable = fal
             fixedNumItems={fixedNumItems}
             speed={speed}
             shouldAnimate={shouldAnimate}
+            onLayout={onLayout}
             style={[styles.overflowHidden]}
             itemViewStyle={shouldStyleAsTable && [styles.highlightBG, styles.mb2, styles.ml5, styles.br2]}
             gradientOpacityEnabled={gradientOpacityEnabled}

src/components/Search/DeferredSearchAutocompleteList/index.native.tsx

@@ -0,0 +1,44 @@
+import React, {useCallback, useRef} from 'react';
+import OptionsListSkeletonView from '@components/OptionsListSkeletonView';
+import type {SearchAutocompleteListProps} from '@components/Search/SearchAutocompleteList';
+import SearchAutocompleteList from '@components/Search/SearchAutocompleteList';
+import {endSpan} from '@libs/telemetry/activeSpans';
+import CONST from '@src/CONST';
+
+/**
+ * This component acts as a wrapper for a SearchAutocompleteList, waiting for the navigation to be ready and deferring it,
+ * so that the base UI can render before the list is loaded.
+ * This enables the SearchRouterPage to open smoothly with a placeholder and load the list in the meantime.
+ */
+function DeferredAutocompleteList(props: SearchAutocompleteListProps) {
+    const [shouldRender, setShouldRender] = React.useState(false);
+    const [, startTransition] = React.useTransition();
+    const hasEndedPageVisibleSpan = useRef(false);
+
+    // Run the transition after the skeleton is mounted; end the "page visible" span once
+    const renderComponent = useCallback(() => {
+        if (!hasEndedPageVisibleSpan.current) {
+            hasEndedPageVisibleSpan.current = true;
+            endSpan(CONST.TELEMETRY.SPAN_SEARCH_PAGE_VISIBLE);
+        }
+        startTransition(() => setShouldRender(true));
+    }, []);
+
+    if (!shouldRender) {
+        return (
+            <OptionsListSkeletonView
+                fixedNumItems={4}
+                shouldStyleAsTable
+                onLayout={renderComponent}
+                speed={CONST.TIMING.SKELETON_ANIMATION_SPEED}
+            />
+        );
+    }
+
+    // eslint-disable-next-line react/jsx-props-no-spreading -- This is a transparent wrapper that forwards all props to SearchAutocompleteList
+    return <SearchAutocompleteList {...props} />;
+}
+
+DeferredAutocompleteList.displayName = 'DeferredSearchAutocompleteList';
+
+export default DeferredAutocompleteList;

src/components/Search/DeferredSearchAutocompleteList/index.tsx

@@ -0,0 +1,6 @@
+/**
+ * The rendering is fast enough for the web, so only a native implementation is required. See index.native.ts.
+ */
+import SearchAutocompleteList from '@components/Search/SearchAutocompleteList';
+
+export default SearchAutocompleteList;

src/components/Search/SearchAutocompleteList.tsx

@@ -355,7 +355,7 @@
     }, [autocompleteQueryWithoutFilters, debounceHandleSearch]);
 
     /* Sections generation */
     const sections: Array<Section<AutocompleteListItem>> = [];
     let sectionIndex = 0;
 
     if (searchQueryItem) {
@@ -504,4 +504,4 @@
 
 export default React.memo(SearchAutocompleteList);
 export {SearchRouterItem};
-export type {GetAdditionalSectionsCallback};
+export type {GetAdditionalSectionsCallback, SearchAutocompleteListProps};

src/components/Search/SearchRouter/SearchButton.tsx

@@ -11,6 +11,7 @@ import {startSpan} from '@libs/telemetry/activeSpans';
 import {callFunctionIfActionIsAllowed} from '@userActions/Session';
 import CONST from '@src/CONST';
 import {useSearchRouterActions} from './SearchRouterContext';
+import startSearchPageVisibleSpan from './startSearchPageVisibleSpan';
 
 type SearchButtonProps = {
     style?: StyleProp<ViewStyle>;
@@ -37,6 +38,8 @@ function SearchButton({style, shouldUseAutoHitSlop = false}: SearchButtonProps)
                 },
             });
 
+            startSearchPageVisibleSpan();
+
             openSearchRouter();
         })();
     };

src/components/Search/SearchRouter/SearchRouter.tsx

@@ -6,8 +6,8 @@ import type {ValueOf} from 'type-fest';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import {usePersonalDetails} from '@components/OnyxListItemProvider';
 import type {AnimatedTextInputRef} from '@components/RNTextInput';
+import DeferredAutocompleteList from '@components/Search/DeferredSearchAutocompleteList';
 import type {GetAdditionalSectionsCallback} from '@components/Search/SearchAutocompleteList';
-import SearchAutocompleteList from '@components/Search/SearchAutocompleteList';
 import {useSearchActionsContext} from '@components/Search/SearchContext';
 import SearchInputSelectionWrapper from '@components/Search/SearchInputSelectionWrapper';
 import type {SearchQueryString} from '@components/Search/types';
@@ -344,7 +344,7 @@ function SearchRouter({onRouterClose, shouldHideInputCaret, isSearchRouterDispla
                     shouldDelayFocus
                 />
             </View>
-            <SearchAutocompleteList
+            <DeferredAutocompleteList
                 autocompleteQueryValue={autocompleteQueryValue || textInputValue}
                 handleSearch={searchInServer}
                 searchQueryItem={searchQueryItem}

src/components/Search/SearchRouter/SearchRouterContext.tsx

@@ -2,7 +2,7 @@ import React, {useContext, useEffect, useRef, useState} from 'react';
 import type {AnimatedTextInputRef} from '@components/RNTextInput';
 import isSearchTopmostFullScreenRoute from '@libs/Navigation/helpers/isSearchTopmostFullScreenRoute';
 import {navigationRef} from '@libs/Navigation/Navigation';
-import {endSpan, getSpan, startSpan} from '@libs/telemetry/activeSpans';
+import {cancelSpan, endSpan, getSpan, startSpan} from '@libs/telemetry/activeSpans';
 import {close} from '@userActions/Modal';
 import CONST from '@src/CONST';
 import NAVIGATORS from '@src/NAVIGATORS';
@@ -94,6 +94,7 @@ function SearchRouterContextProvider({children}: ChildrenProps) {
     };
 
     const closeSearchRouter = () => {
+        cancelSpan(CONST.TELEMETRY.SPAN_SEARCH_PAGE_VISIBLE);
         closeSearch(setIsSearchRouterDisplayed);
         searchRouterDisplayedRef.current = false;
         if (isBrowserWithHistory) {

src/components/Search/SearchRouter/startSearchPageVisibleSpan/index.native.ts

@@ -0,0 +1,11 @@
+import {startSpan} from '@libs/telemetry/activeSpans';
+import CONST from '@src/CONST';
+
+function startSearchPageVisibleSpan() {
+    startSpan(CONST.TELEMETRY.SPAN_SEARCH_PAGE_VISIBLE, {
+        name: CONST.TELEMETRY.SPAN_SEARCH_PAGE_VISIBLE,
+        op: CONST.TELEMETRY.SPAN_SEARCH_PAGE_VISIBLE,
+    });
+}
+
+export default startSearchPageVisibleSpan;

src/components/Search/SearchRouter/startSearchPageVisibleSpan/index.ts

@@ -0,0 +1,5 @@
+function startSearchPageVisibleSpan() {
+    // Do not start span on the web
+}
+
+export default startSearchPageVisibleSpan;

src/components/Skeletons/ItemListSkeletonView.tsx

@@ -15,6 +15,7 @@ type ListItemSkeletonProps = {
     itemViewHeight?: number;
     speed?: number;
     style?: StyleProp<ViewStyle>;
+    onLayout?: (event: LayoutChangeEvent) => void;
 };
 
 const getVerticalMargin = (style: StyleProp<ViewStyle>): number => {
@@ -39,6 +40,7 @@ function ItemListSkeletonView({
     itemViewHeight = CONST.LHN_SKELETON_VIEW_ITEM_HEIGHT,
     speed,
     style,
+    onLayout,
 }: ListItemSkeletonProps) {
     const theme = useTheme();
     const themeStyles = useThemeStyles();
@@ -49,6 +51,8 @@ function ItemListSkeletonView({
 
     const handleLayout = useCallback(
         (event: LayoutChangeEvent) => {
+            onLayout?.(event);
+
             if (fixedNumItems) {
                 return;
             }
@@ -59,7 +63,7 @@ function ItemListSkeletonView({
                 setNumItems(newNumItems);
             }
         },
-        [fixedNumItems, numItems, totalItemHeight],
+        [fixedNumItems, numItems, onLayout, totalItemHeight],
     );
 
     const skeletonViewItems = useMemo(() => {