diff --git a/src/components/Search/SearchAutocompleteList.tsx b/src/components/Search/SearchAutocompleteList.tsx index f8f1ddaa3e84..20a7dd197084 100644 --- a/src/components/Search/SearchAutocompleteList.tsx +++ b/src/components/Search/SearchAutocompleteList.tsx @@ -718,7 +718,7 @@ function SearchAutocompleteList( // will fail because the list will be empty on first render so we only render after options are initialized. areOptionsInitialized && ( - showLoadingPlaceholder={!areOptionsInitialized} + showLoadingPlaceholder fixedNumItemsForLoader={4} loaderSpeed={CONST.TIMING.SKELETON_ANIMATION_SPEED} sections={sections} diff --git a/src/components/Search/SearchRouter/SearchRouter.tsx b/src/components/Search/SearchRouter/SearchRouter.tsx index 71b30722c890..bc17d297a9d0 100644 --- a/src/components/Search/SearchRouter/SearchRouter.tsx +++ b/src/components/Search/SearchRouter/SearchRouter.tsx @@ -7,6 +7,8 @@ import type {ValueOf} from 'type-fest'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import * as Expensicons from '@components/Icon/Expensicons'; import {usePersonalDetails} from '@components/OnyxListItemProvider'; +import {useOptionsList} from '@components/OptionListContextProvider'; +import OptionsListSkeletonView from '@components/OptionsListSkeletonView'; import type {AnimatedTextInputRef} from '@components/RNTextInput'; import type {GetAdditionalSectionsCallback} from '@components/Search/SearchAutocompleteList'; import SearchAutocompleteList from '@components/Search/SearchAutocompleteList'; @@ -83,7 +85,10 @@ function SearchRouter({onRouterClose, shouldHideInputCaret, isSearchRouterDispla const {translate} = useLocalize(); const styles = useThemeStyles(); const [, recentSearchesMetadata] = useOnyx(ONYXKEYS.RECENT_SEARCHES, {canBeMissing: true}); + const {areOptionsInitialized} = useOptionsList(); const [isSearchingForReports] = useOnyx(ONYXKEYS.IS_SEARCHING_FOR_REPORTS, {initWithStoredValues: false, canBeMissing: true}); + const isRecentSearchesDataLoaded = !isLoadingOnyxValue(recentSearchesMetadata); + const shouldShowList = isRecentSearchesDataLoaded && areOptionsInitialized; const personalDetails = usePersonalDetails(); const [reports] = useOnyx(ONYXKEYS.COLLECTION.REPORT, {canBeMissing: true}); const [workspaceCardFeeds] = useOnyx(ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST, {canBeMissing: true}); @@ -450,7 +455,6 @@ function SearchRouter({onRouterClose, shouldHideInputCaret, isSearchRouterDispla }); const modalWidth = shouldUseNarrowLayout ? styles.w100 : {width: variables.searchRouterPopoverWidth}; - const isRecentSearchesDataLoaded = !isLoadingOnyxValue(recentSearchesMetadata); const focusTimeoutRef = useRef(null); /** We added a delay to focus on text input to allow navigation/modal animations to get completed, see issue https://github.com/Expensify/App/issues/65855 for more details */ @@ -482,51 +486,56 @@ function SearchRouter({onRouterClose, shouldHideInputCaret, isSearchRouterDispla shouldDisplayHelpButton={false} /> )} - {isRecentSearchesDataLoaded && ( - <> - { - const focusedOption = listRef.current?.getFocusedOption(); - - if (!focusedOption) { - submitSearch(textInputValue); - return; - } + { + const focusedOption = listRef.current?.getFocusedOption(); + + if (!focusedOption) { + submitSearch(textInputValue); + return; + } - onListItemPress(focusedOption); - }} - caretHidden={shouldHideInputCaret} - autocompleteListRef={listRef} - shouldShowOfflineMessage - wrapperStyle={{...styles.border, ...styles.alignItemsCenter}} - outerWrapperStyle={[shouldUseNarrowLayout ? styles.mv3 : styles.mv2, shouldUseNarrowLayout ? styles.mh5 : styles.mh2]} - wrapperFocusedStyle={styles.borderColorFocus} - isSearchingForReports={isSearchingForReports} - selection={selection} - substitutionMap={autocompleteSubstitutions} - ref={textInputRef} - autoFocus={false} - /> - listRef.current?.updateAndScrollToFocusedIndex(1)} - ref={listRef} - textInputRef={textInputRef} - personalDetails={personalDetails} - reports={reports} - allFeeds={allFeeds} - allCards={allCards} - /> - + onListItemPress(focusedOption); + }} + caretHidden={shouldHideInputCaret} + autocompleteListRef={listRef} + shouldShowOfflineMessage + wrapperStyle={{...styles.border, ...styles.alignItemsCenter}} + outerWrapperStyle={[shouldUseNarrowLayout ? styles.mv3 : styles.mv2, shouldUseNarrowLayout ? styles.mh5 : styles.mh2]} + wrapperFocusedStyle={styles.borderColorFocus} + isSearchingForReports={isSearchingForReports} + selection={selection} + substitutionMap={autocompleteSubstitutions} + ref={textInputRef} + autoFocus={false} + /> + {shouldShowList && ( + listRef.current?.updateAndScrollToFocusedIndex(1)} + ref={listRef} + textInputRef={textInputRef} + personalDetails={personalDetails} + reports={reports} + allFeeds={allFeeds} + allCards={allCards} + /> + )} + {!shouldShowList && ( + )} );