[WIP] Render list inside SearchAutocompleteList after navigation triggers

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import OptionsListSkeletonView from '@components/OptionsListSkeletonView';
+import type {SearchAutocompleteListProps} from '@components/Search/SearchAutocompleteList';
+import SearchAutocompleteList from '@components/Search/SearchAutocompleteList';
+import Navigation from '@navigation/Navigation';
+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);
+
+    React.useEffect(() => {
+        Navigation.setNavigationActionToMicrotaskQueue(() => {
+            setShouldRender(true);
+        });
+    }, []);
+
+    if (!shouldRender) {
+        return (
+            <OptionsListSkeletonView
+                fixedNumItems={4}
+                shouldStyleAsTable
+                speed={CONST.TIMING.SKELETON_ANIMATION_SPEED}
+            />
+        );
+    }
+
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    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

@@ -4,7 +4,6 @@
 import React, {useEffect, useRef, useState} from 'react';
 import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
 import {useOptionsList} from '@components/OptionListContextProvider';
-import OptionsListSkeletonView from '@components/OptionsListSkeletonView';
 import type {AnimatedTextInputRef} from '@components/RNTextInput';
 import type {ListItem as NewListItem, UserListItemProps} from '@components/SelectionList/ListItem/types';
 import UserListItem from '@components/SelectionList/ListItem/UserListItem';
@@ -904,7 +903,7 @@
                 flatIndex++;
             }
         }
     }, [areOptionsInitialized, firstRecentReportKey, shouldUseNarrowLayout]);
 
     useEffect(() => {
         const targetText = autocompleteQueryValue;
@@ -917,16 +916,6 @@
     const isRecentSearchesDataLoaded = !isLoadingOnyxValue(recentSearchesMetadata);
     const isLoading = !isRecentSearchesDataLoaded || !areOptionsInitialized;
 
-    if (isLoading) {
-        return (
-            <OptionsListSkeletonView
-                fixedNumItems={4}
-                shouldStyleAsTable
-                speed={CONST.TIMING.SKELETON_ANIMATION_SPEED}
-            />
-        );
-    }
-
     return (
         <SelectionListWithSections<AutocompleteListItem>
             showLoadingPlaceholder
@@ -943,6 +932,7 @@
             shouldSingleExecuteRowSelect
             ref={setListRef}
             initialScrollIndex={0}
+            isLoadingNewOptions={isLoading}
             initiallyFocusedItemKey={!shouldUseNarrowLayout ? firstRecentReportKey : undefined}
             shouldScrollToFocusedIndex={!isInitialRender}
             disableKeyboardShortcuts={!shouldSubscribeToArrowKeyEvents}
@@ -960,4 +950,4 @@
 
 export default React.memo(SearchAutocompleteList);
 export {SearchRouterItem};
-export type {GetAdditionalSectionsCallback};
+export type {GetAdditionalSectionsCallback, SearchAutocompleteListProps};

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';
@@ -455,7 +455,7 @@ function SearchRouter({onRouterClose, shouldHideInputCaret, isSearchRouterDispla
                     shouldDelayFocus
                 />
             </View>
-            <SearchAutocompleteList
+            <DeferredAutocompleteList
                 autocompleteQueryValue={autocompleteQueryValue || textInputValue}
                 handleSearch={searchInServer}
                 searchQueryItem={searchQueryItem}