Merge pull request Expensify#65486 from callstack-internal/perf/searchsidebar-optimize-loading-check

perf: optimize SearchSidebar loading logic

Author: mountiny

src/components/Navigation/SearchSidebar.tsx

@@ -16,7 +16,7 @@ import SearchTypeMenu from '@pages/Search/SearchTypeMenu';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import SCREENS from '@src/SCREENS';
-import type {SearchResults} from '@src/types/onyx';
+import type {SearchResultsInfo} from '@src/types/onyx/SearchResults';
 import NavigationTabBar from './NavigationTabBar';
 import NAVIGATION_TABS from './NavigationTabBar/NAVIGATION_TABS';
 import TopBar from './TopBar';
@@ -43,21 +43,24 @@ function SearchSidebar({state}: SearchSidebarProps) {
     }, [params?.q]);
 
     const currentSearchResultsKey = queryJSON?.hash ?? CONST.DEFAULT_NUMBER_ID;
-    const [currentSearchResults] = useOnyx(`${ONYXKEYS.COLLECTION.SNAPSHOT}${currentSearchResultsKey}`, {canBeMissing: true});
-    const [lastNonEmptySearchResults, setLastNonEmptySearchResults] = useState<SearchResults | undefined>(undefined);
+    const [currentSearchResults] = useOnyx(`${ONYXKEYS.COLLECTION.SNAPSHOT}${currentSearchResultsKey}`, {canBeMissing: true, selector: (snapshot) => snapshot?.search});
+    const [lastNonEmptySearchResults, setLastNonEmptySearchResults] = useState<SearchResultsInfo | undefined>(undefined);
 
     useEffect(() => {
-        if (!currentSearchResults?.search?.type) {
+        if (!currentSearchResults?.type) {
             return;
         }
 
-        setLastSearchType(currentSearchResults.search.type);
-        if (currentSearchResults.data) {
+        setLastSearchType(currentSearchResults.type);
+        if (currentSearchResults.hasResults ?? currentSearchResults.hasMoreResults) {
             setLastNonEmptySearchResults(currentSearchResults);
         }
     }, [lastSearchType, queryJSON, setLastSearchType, currentSearchResults]);
 
-    const isDataLoaded = isSearchDataLoaded(currentSearchResults?.data ? currentSearchResults : lastNonEmptySearchResults, queryJSON);
+    const searchResultsToUse = (currentSearchResults?.hasResults ?? currentSearchResults?.hasMoreResults) ? currentSearchResults : lastNonEmptySearchResults;
+
+    const isDataLoaded = isSearchDataLoaded(searchResultsToUse, queryJSON);
+
     const shouldShowLoadingState = route?.name === SCREENS.SEARCH.MONEY_REQUEST_REPORT ? false : !isOffline && !isDataLoaded;
 
     if (shouldUseNarrowLayout) {

src/components/Search/index.tsx

@@ -238,7 +238,7 @@ function Search({queryJSON, searchResults, onSearchListScroll, contentContainerS
 
     // There's a race condition in Onyx which makes it return data from the previous Search, so in addition to checking that the data is loaded
     // we also need to check that the searchResults matches the type and status of the current search
-    const isDataLoaded = isSearchDataLoaded(searchResults, queryJSON);
+    const isDataLoaded = isSearchDataLoaded(searchResults?.search, queryJSON) ?? false;
 
     const shouldShowLoadingState = !isOffline && (!isDataLoaded || (!!searchResults?.search.isLoading && Array.isArray(searchResults?.data) && searchResults?.data.length === 0));
     const shouldShowLoadingMoreItems = !shouldShowLoadingState && searchResults?.search?.isLoading && searchResults?.search?.offset > 0;

src/libs/SearchUIUtils.ts

@@ -38,6 +38,7 @@ import type {
     SearchPersonalDetails,
     SearchPolicy,
     SearchReport,
+    SearchResultsInfo,
     SearchTask,
     SearchTransaction,
     SearchTransactionAction,
@@ -1648,13 +1649,13 @@ function shouldShowEmptyState(isDataLoaded: boolean, dataLength: number, type: S
     return !isDataLoaded || dataLength === 0 || !Object.values(CONST.SEARCH.DATA_TYPES).includes(type);
 }
 
-function isSearchDataLoaded(searchResults: SearchResults | undefined, queryJSON: SearchQueryJSON | undefined) {
+function isSearchDataLoaded(searchResults: SearchResultsInfo | undefined, queryJSON: SearchQueryJSON | undefined) {
     const {status} = queryJSON ?? {};
 
     const isDataLoaded =
-        searchResults?.data !== undefined &&
-        searchResults?.search?.type === queryJSON?.type &&
-        (Array.isArray(status) ? searchResults?.search?.status === status.join(',') : searchResults?.search?.status === status);
+        (searchResults?.hasResults ?? searchResults?.hasMoreResults) &&
+        searchResults?.type === queryJSON?.type &&
+        (Array.isArray(status) ? searchResults?.status === status.join(',') : searchResults?.status === status);
 
     return isDataLoaded;
 }

src/pages/Search/SearchPageNarrow.tsx

@@ -132,7 +132,7 @@ function SearchPageNarrow({queryJSON, headerButtonsOptions, searchResults, isMob
         );
     }
 
-    const isDataLoaded = isSearchDataLoaded(searchResults, queryJSON);
+    const isDataLoaded = isSearchDataLoaded(searchResults?.search, queryJSON);
     const shouldShowLoadingState = !isOffline && !isDataLoaded;
 
     return (

src/types/onyx/SearchResults.ts

@@ -515,4 +515,5 @@ export type {
     SearchReportAction,
     SearchPolicy,
     SearchCard,
+    SearchResultsInfo,
 };