Merge pull request #88316 from software-mansion-labs/perf/cache-and-defer-heavy-saved-search-computation

perf: Cache and defer heavy saved search computation

Author: luacmartins

src/libs/SearchQueryUtils.ts

@@ -1603,6 +1603,21 @@ function formatDefaultRawFilterSegment(rawFilter: RawQueryFilter, policies: Onyx
  * We try to replace every numeric id value with a display version of this value,
  * So: user IDs get turned into emails, report ids into report names etc.
  */
+type BuildUserReadableQueryStringParams = {
+    queryJSON: SearchQueryJSON;
+    PersonalDetails: OnyxTypes.PersonalDetailsList | undefined;
+    reports: OnyxCollection<OnyxTypes.Report>;
+    taxRates: Record<string, string[]>;
+    cardList: OnyxTypes.CardList | undefined;
+    cardFeeds: OnyxCollection<OnyxTypes.CardFeeds>;
+    policies: OnyxCollection<OnyxTypes.Policy>;
+    currentUserAccountID: number;
+    autoCompleteWithSpace: boolean;
+    translate: LocalizedTranslate;
+    feedKeysWithCards?: FeedKeysWithAssignedCards;
+    reportAttributes: OnyxTypes.ReportAttributesDerivedValue['reports'] | undefined;
+};
+
 function buildUserReadableQueryString({
     queryJSON,
     PersonalDetails,
@@ -1616,20 +1631,7 @@ function buildUserReadableQueryString({
     translate,
     feedKeysWithCards,
     reportAttributes,
-}: {
-    queryJSON: SearchQueryJSON;
-    PersonalDetails: OnyxTypes.PersonalDetailsList | undefined;
-    reports: OnyxCollection<OnyxTypes.Report>;
-    taxRates: Record<string, string[]>;
-    cardList: OnyxTypes.CardList | undefined;
-    cardFeeds: OnyxCollection<OnyxTypes.CardFeeds>;
-    policies: OnyxCollection<OnyxTypes.Policy>;
-    currentUserAccountID: number;
-    autoCompleteWithSpace: boolean;
-    translate: LocalizedTranslate;
-    feedKeysWithCards?: FeedKeysWithAssignedCards;
-    reportAttributes: OnyxTypes.ReportAttributesDerivedValue['reports'] | undefined;
-}) {
+}: BuildUserReadableQueryStringParams) {
     const {type, status, groupBy, view, columns, policyID, rawFilterList, flatFilters: filters = [], limit} = queryJSON;
 
     if (rawFilterList && rawFilterList.length > 0) {
@@ -2145,4 +2147,6 @@ export {
     isAmountFilterKey,
 };
 
+export type {BuildUserReadableQueryStringParams};
+
 export type {SearchDateValues};

src/pages/Search/SavedSearchList.tsx

@@ -4,7 +4,6 @@ import React from 'react';
 import MenuItemList from '@components/MenuItemList';
 import {usePersonalDetails} from '@components/OnyxListItemProvider';
 import {useProductTrainingContext} from '@components/ProductTrainingContext';
-import type {SearchQueryJSON} from '@components/Search/types';
 import useDeleteSavedSearch from '@hooks/useDeleteSavedSearch';
 import useFeedKeysWithAssignedCards from '@hooks/useFeedKeysWithAssignedCards';
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
@@ -17,20 +16,79 @@ import {setSearchContext} from '@libs/actions/Search';
 import {mergeCardListWithWorkspaceFeeds} from '@libs/CardUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import {getAllTaxRates} from '@libs/PolicyUtils';
-import {buildSearchQueryJSON, buildUserReadableQueryString} from '@libs/SearchQueryUtils';
 import type {SavedSearchMenuItem} from '@libs/SearchUIUtils';
 import {createBaseSavedSearchMenuItem, getOverflowMenu as getOverflowMenuUtil} from '@libs/SearchUIUtils';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type {SaveSearchItem} from '@src/types/onyx/SaveSearch';
+import useSavedSearchTitles from './hooks/useSavedSearchTitles';
 import SavedSearchItemThreeDotMenu from './SavedSearchItemThreeDotMenu';
 
 type SavedSearchListProps = {
     hash: number | undefined;
 };
 
+type SavedSearchMenuItemBuilderParams = {
+    item: SaveSearchItem;
+    key: string;
+    index: number;
+    hash: number | undefined;
+    title: string;
+    getOverflowMenu: (itemName: string, itemHash: number, itemQuery: string) => ReturnType<typeof getOverflowMenuUtil>;
+    shouldShowSavedSearchTooltip: boolean;
+    hideSavedSearchTooltip: (() => void) | undefined;
+    renderSavedSearchTooltip: () => React.JSX.Element;
+    itemStyle: SavedSearchMenuItem['style'];
+    tooltipWrapperStyle: SavedSearchMenuItem['tooltipWrapperStyle'];
+};
+
+function buildSavedSearchMenuItem({
+    item,
+    key,
+    index,
+    hash,
+    title,
+    getOverflowMenu,
+    shouldShowSavedSearchTooltip,
+    hideSavedSearchTooltip,
+    renderSavedSearchTooltip,
+    itemStyle,
+    tooltipWrapperStyle,
+}: SavedSearchMenuItemBuilderParams): SavedSearchMenuItem {
+    const isItemFocused = Number(key) === hash;
+    const baseMenuItem: SavedSearchMenuItem = createBaseSavedSearchMenuItem(item, key, index, title, isItemFocused);
+
+    return {
+        ...baseMenuItem,
+        role: CONST.ROLE.TAB,
+        sentryLabel: CONST.SENTRY_LABEL.SEARCH.SAVED_SEARCH_MENU_ITEM,
+        onPress: () => {
+            setSearchContext(false);
+            Navigation.navigate(ROUTES.SEARCH_ROOT.getRoute({query: item?.query ?? '', name: item?.name}));
+        },
+        rightComponent: (
+            <SavedSearchItemThreeDotMenu
+                menuItems={getOverflowMenu(title, Number(key), item.query)}
+                isDisabledItem={item.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE}
+                hideProductTrainingTooltip={index === 0 && shouldShowSavedSearchTooltip ? hideSavedSearchTooltip : undefined}
+                shouldRenderTooltip={index === 0 && shouldShowSavedSearchTooltip}
+                renderTooltipContent={renderSavedSearchTooltip}
+            />
+        ),
+        style: itemStyle,
+        tooltipAnchorAlignment: {
+            horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
+            vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
+        },
+        tooltipShiftHorizontal: variables.savedSearchShiftHorizontal,
+        tooltipShiftVertical: variables.savedSearchShiftVertical,
+        tooltipWrapperStyle,
+        renderTooltipContent: renderSavedSearchTooltip,
+    };
+}
+
 function SavedSearchList({hash}: SavedSearchListProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
@@ -60,61 +118,42 @@ function SavedSearchList({hash}: SavedSearchListProps) {
     const taxRates = getAllTaxRates(allPolicies);
     const cardsForSavedSearchDisplay = mergeCardListWithWorkspaceFeeds(workspaceCardList ?? CONST.EMPTY_OBJECT, cardList);
 
-    const getOverflowMenu = (itemName: string, itemHash: number, itemQuery: string) => getOverflowMenuUtil(expensifyIcons, itemName, itemHash, itemQuery, translate, showDeleteModal);
-
-    const createSavedSearchMenuItem = (item: SaveSearchItem, key: string, index: number) => {
-        let title = item.name;
-        if (title === item.query) {
-            const jsonQuery = buildSearchQueryJSON(item.query) ?? ({} as SearchQueryJSON);
-            title = buildUserReadableQueryString({
-                queryJSON: jsonQuery,
-                PersonalDetails: personalDetails,
-                reports,
-                taxRates,
-                cardList: cardsForSavedSearchDisplay,
-                cardFeeds: allFeeds,
-                policies: allPolicies,
-                currentUserAccountID,
-                autoCompleteWithSpace: false,
-                translate,
-                feedKeysWithCards,
-                reportAttributes,
-            });
-        }
+    const savedSearchTitles = useSavedSearchTitles({
+        savedSearches,
+        PersonalDetails: personalDetails,
+        reports,
+        taxRates,
+        cardList: cardsForSavedSearchDisplay,
+        cardFeeds: allFeeds,
+        policies: allPolicies,
+        currentUserAccountID,
+        translate,
+        feedKeysWithCards,
+        reportAttributes,
+    });
 
-        const isItemFocused = Number(key) === hash;
-        const baseMenuItem: SavedSearchMenuItem = createBaseSavedSearchMenuItem(item, key, index, title, isItemFocused);
+    const getOverflowMenu = (itemName: string, itemHash: number, itemQuery: string) => getOverflowMenuUtil(expensifyIcons, itemName, itemHash, itemQuery, translate, showDeleteModal);
 
-        return {
-            ...baseMenuItem,
-            role: CONST.ROLE.TAB,
-            sentryLabel: CONST.SENTRY_LABEL.SEARCH.SAVED_SEARCH_MENU_ITEM,
-            onPress: () => {
-                setSearchContext(false);
-                Navigation.navigate(ROUTES.SEARCH_ROOT.getRoute({query: item?.query ?? '', name: item?.name}));
-            },
-            rightComponent: (
-                <SavedSearchItemThreeDotMenu
-                    menuItems={getOverflowMenu(title, Number(key), item.query)}
-                    isDisabledItem={item.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE}
-                    hideProductTrainingTooltip={index === 0 && shouldShowSavedSearchTooltip ? hideSavedSearchTooltip : undefined}
-                    shouldRenderTooltip={index === 0 && shouldShowSavedSearchTooltip}
-                    renderTooltipContent={renderSavedSearchTooltip}
-                />
-            ),
-            style: [styles.alignItemsCenter],
-            tooltipAnchorAlignment: {
-                horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
-                vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
-            },
-            tooltipShiftHorizontal: variables.savedSearchShiftHorizontal,
-            tooltipShiftVertical: variables.savedSearchShiftVertical,
-            tooltipWrapperStyle: [styles.mh4, styles.pv2, styles.productTrainingTooltipWrapper],
-            renderTooltipContent: renderSavedSearchTooltip,
-        };
-    };
+    const itemStyle = [styles.alignItemsCenter];
+    const tooltipWrapperStyle = [styles.mh4, styles.pv2, styles.productTrainingTooltipWrapper];
 
-    const savedSearchesMenuItems = savedSearches ? Object.entries(savedSearches).map(([key, item], index) => createSavedSearchMenuItem(item, key, index)) : [];
+    const savedSearchesMenuItems = savedSearches
+        ? Object.entries(savedSearches).map(([key, item], index) =>
+              buildSavedSearchMenuItem({
+                  item,
+                  key,
+                  index,
+                  hash,
+                  title: item.name === item.query ? (savedSearchTitles.get(item.query) ?? item.name) : item.name,
+                  getOverflowMenu,
+                  shouldShowSavedSearchTooltip,
+                  hideSavedSearchTooltip,
+                  renderSavedSearchTooltip,
+                  itemStyle,
+                  tooltipWrapperStyle,
+              }),
+          )
+        : [];
 
     return (
         <MenuItemList

src/pages/Search/SearchTypeMenuNarrow.tsx

@@ -24,12 +24,12 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import {setSearchContext} from '@libs/actions/Search';
 import {mergeCardListWithWorkspaceFeeds} from '@libs/CardUtils';
 import {getAllTaxRates} from '@libs/PolicyUtils';
-import {buildSearchQueryJSON, buildUserReadableQueryString} from '@libs/SearchQueryUtils';
 import {getItemBadgeText, getOverflowMenu} from '@libs/SearchUIUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import {accountIDSelector} from '@src/selectors/Session';
 import todosReportCountsSelector from '@src/selectors/Todos';
+import useSavedSearchTitles from './hooks/useSavedSearchTitles';
 
 type SearchTypeMenuNarrowProps = {
     /** Search query JSON */
@@ -91,6 +91,20 @@ function SearchTypeMenuNarrow({queryJSON, onTabPress}: SearchTypeMenuNarrowProps
 
     const taxRates = getAllTaxRates(allPolicies);
     const cardsForSavedSearchDisplay = mergeCardListWithWorkspaceFeeds(workspaceCardList ?? CONST.EMPTY_OBJECT, cardList);
+    const savedSearchTitles = useSavedSearchTitles({
+        savedSearches,
+        PersonalDetails: personalDetails,
+        reports,
+        taxRates,
+        cardList: cardsForSavedSearchDisplay,
+        cardFeeds: allFeeds,
+        policies: allPolicies,
+        currentUserAccountID,
+        translate,
+        feedKeysWithCards,
+        reportAttributes,
+        enabled: !!queryJSON,
+    });
 
     const [savedSearchToModifyKey, setSavedSearchToModifyKey] = useState<string | null>(null);
     const menuAnchorRef = useRef<View>(null);
@@ -127,24 +141,7 @@ function SearchTypeMenuNarrow({queryJSON, onTabPress}: SearchTypeMenuNarrowProps
                       return null;
                   }
 
-                  let title = item.name;
-                  const itemJsonQuery = buildSearchQueryJSON(item.query);
-                  if (queryJSON && itemJsonQuery && title === item.query) {
-                      title = buildUserReadableQueryString({
-                          queryJSON: itemJsonQuery,
-                          PersonalDetails: personalDetails,
-                          reports,
-                          taxRates,
-                          cardList: cardsForSavedSearchDisplay,
-                          cardFeeds: allFeeds,
-                          policies: allPolicies,
-                          currentUserAccountID,
-                          autoCompleteWithSpace: false,
-                          translate,
-                          feedKeysWithCards,
-                          reportAttributes,
-                      });
-                  }
+                  const title = item.name === item.query ? (savedSearchTitles.get(item.query) ?? item.name) : item.name;
 
                   queryMap.set(key, {query: item.query ?? '', name: item.name});
                   savedSearchesPopoverMenuItems[key] = getOverflowMenu(expensifyIcons, title, Number(key), item.query, translate, showDeleteModal, true, () =>

src/pages/Search/hooks/useSavedSearchTitles.ts

@@ -0,0 +1,57 @@
+import {useDeferredValue} from 'react';
+import {buildSearchQueryJSON, buildUserReadableQueryString} from '@libs/SearchQueryUtils';
+import type {BuildUserReadableQueryStringParams} from '@libs/SearchQueryUtils';
+import type {SaveSearchItem} from '@src/types/onyx/SaveSearch';
+
+type SavedSearchCollection = Record<string, SaveSearchItem>;
+
+type SavedSearchTitlesHookParams = Omit<BuildUserReadableQueryStringParams, 'queryJSON' | 'autoCompleteWithSpace'> & {
+    savedSearches: SavedSearchCollection | undefined;
+    enabled?: boolean;
+};
+
+/** Returns a map of raw query string → human-readable title for saved searches that have no custom name. Heavy resolution is deferred to avoid blocking the UI. */
+function useSavedSearchTitles({savedSearches, translate, enabled = true, ...rest}: SavedSearchTitlesHookParams): Map<string, string> {
+    // `savedSearches` and `translate` are intentionally excluded from the deferred object.
+    // `savedSearches` drives which items appear in the list — deferring it would cause a flash
+    // `translate` is a stable function reference that never triggers heavy re-computation on its own.
+    const deferredRest = useDeferredValue(rest);
+    const {PersonalDetails, reports, taxRates, cardList, cardFeeds, policies, currentUserAccountID, feedKeysWithCards, reportAttributes} = deferredRest;
+
+    const titles = new Map<string, string>();
+
+    if (!savedSearches || !enabled) {
+        return titles;
+    }
+
+    for (const item of Object.values(savedSearches)) {
+        if (item.name !== item.query || titles.has(item.query)) {
+            continue;
+        }
+
+        const itemJsonQuery = buildSearchQueryJSON(item.query);
+        if (!itemJsonQuery) {
+            continue;
+        }
+
+        const title = buildUserReadableQueryString({
+            queryJSON: itemJsonQuery,
+            PersonalDetails,
+            reports,
+            taxRates,
+            cardList,
+            cardFeeds,
+            policies,
+            currentUserAccountID,
+            autoCompleteWithSpace: false,
+            translate,
+            feedKeysWithCards,
+            reportAttributes,
+        });
+        titles.set(item.query, title);
+    }
+
+    return titles;
+}
+
+export default useSavedSearchTitles;