diff --git a/src/components/Search/SearchAutocompleteList.tsx b/src/components/Search/SearchAutocompleteList.tsx index e4340b8f66e01..2af5a351b24f8 100644 --- a/src/components/Search/SearchAutocompleteList.tsx +++ b/src/components/Search/SearchAutocompleteList.tsx @@ -294,9 +294,11 @@ function SearchAutocompleteList({ const autocompleteQueryWithoutFilters = getQueryWithoutFilters(autocompleteQueryValue); - const sortedRecentSearches = Object.values(recentSearches ?? {}).sort((a, b) => localeCompare(b.timestamp, a.timestamp)); + const sortedRecentSearches = Object.entries(recentSearches ?? {}).sort(([, firstRecentSearch], [, secondRecentSearch]) => + localeCompare(secondRecentSearch.timestamp, firstRecentSearch.timestamp), + ); - const recentSearchesData = sortedRecentSearches?.slice(0, 5).map(({query, timestamp}) => { + const recentSearchesData = sortedRecentSearches?.slice(0, 5).map(([recentSearchHash, {query}]) => { const searchQueryJSON = buildSearchQueryJSON(query); return { text: searchQueryJSON @@ -317,7 +319,7 @@ function SearchAutocompleteList({ : query, singleIcon: expensifyIcons.History, searchQuery: query, - keyForList: timestamp, + keyForList: recentSearchHash, searchItemType: CONST.SEARCH.SEARCH_ROUTER_ITEM_TYPE.SEARCH, }; }); @@ -352,6 +354,12 @@ function SearchAutocompleteList({ debounceHandleSearch(); }, [autocompleteQueryWithoutFilters, debounceHandleSearch]); + const reasonAttributes: SkeletonSpanReasonAttributes = { + context: 'SearchAutocompleteList', + isRecentSearchesDataLoaded, + areOptionsInitialized, + }; + /* Sections generation */ const {sections, styledRecentReports, suggestionsCount} = useMemo(() => { const nextSections: Array> = []; @@ -394,11 +402,31 @@ function SearchAutocompleteList({ } as AutocompleteListItem; }); - pushSection({ - title: autocompleteQueryValue.trim() === '' ? translate('search.recentChats') : undefined, - data: nextStyledRecentReports, - sectionIndex: sectionIndex++, - }); + if (areOptionsInitialized) { + pushSection({ + title: autocompleteQueryValue.trim() === '' ? translate('search.recentChats') : undefined, + data: nextStyledRecentReports, + sectionIndex: sectionIndex++, + }); + } else if (autocompleteQueryValue.trim() === '') { + pushSection({ + title: translate('search.recentChats'), + data: [], + sectionIndex: sectionIndex++, + customHeader: ( + + ), + }); + } if (autocompleteSuggestions.length > 0) { const autocompleteData: AutocompleteListItem[] = autocompleteSuggestions.map(({filterKey, text, autocompleteID, mapKey}) => { @@ -417,12 +445,25 @@ function SearchAutocompleteList({ } return {sections: nextSections, styledRecentReports: nextStyledRecentReports, suggestionsCount: nextSuggestionsCount}; - }, [autocompleteQueryValue, autocompleteSuggestions, expensifyIcons, getAdditionalSections, recentReportsOptions, recentSearchesData, searchOptions, searchQueryItem, styles, translate]); + }, [ + autocompleteQueryValue, + autocompleteSuggestions, + expensifyIcons, + getAdditionalSections, + recentReportsOptions, + recentSearchesData, + searchOptions, + searchQueryItem, + styles, + translate, + areOptionsInitialized, + isRecentSearchesDataLoaded, + ]); const sectionItemText = sections?.at(1)?.data?.[0]?.text ?? ''; const normalizedReferenceText = sectionItemText.toLowerCase(); const trimmedAutocompleteQueryValue = autocompleteQueryValue.trim(); - const isLoading = !isRecentSearchesDataLoaded || !areOptionsInitialized; + const isLoading = !isRecentSearchesDataLoaded; const suggestionsAnnouncement = suggestionsCount > 0 ? translate('search.suggestionsAvailable', {count: suggestionsCount}, trimmedAutocompleteQueryValue) : ''; useDebouncedAccessibilityAnnouncement(suggestionsAnnouncement, !!suggestionsAnnouncement, autocompleteQueryValue); @@ -473,12 +514,6 @@ function SearchAutocompleteList({ } }, [autocompleteQueryValue, onHighlightFirstItem, normalizedReferenceText]); - const reasonAttributes: SkeletonSpanReasonAttributes = { - context: 'SearchAutocompleteList', - isRecentSearchesDataLoaded, - areOptionsInitialized, - }; - if (isLoading) { return (