Add performance timings handling for SearchRouterList

Expensify · Oct 4, 2024 · cb51d04 · cb51d04
1 parent 4052f9a
commit cb51d04
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 4 deletions.
diff --git a/src/components/Search/SearchRouter/SearchButton.tsx b/src/components/Search/SearchRouter/SearchButton.tsx
@@ -27,7 +27,6 @@ function SearchButton() {
             accessibilityLabel={translate('common.search')}
             style={[styles.flexRow, styles.touchableButtonImage]}
             onPress={Session.checkIfActionIsAllowed(() => {
-                // Todo [Search] add finishing for this timing in <SearchRouterList>
                 Timing.start(CONST.TIMING.SEARCH_ROUTER_OPEN);
                 Performance.markStart(CONST.TIMING.SEARCH_ROUTER_OPEN);
 

diff --git a/src/components/Search/SearchRouter/SearchRouter.tsx b/src/components/Search/SearchRouter/SearchRouter.tsx
@@ -19,6 +19,7 @@ import * as SearchUtils from '@libs/SearchUtils';
 import Navigation from '@navigation/Navigation';
 import variables from '@styles/variables';
 import * as Report from '@userActions/Report';
+import Timing from '@userActions/Timing';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
@@ -65,7 +66,9 @@ function SearchRouter() {
             };
         }
 
+        Timing.start(CONST.TIMING.SEARCH_FILTER_OPTIONS);
         const newOptions = OptionsListUtils.filterOptions(searchOptions, debouncedInputValue, {sortByReportTypeInSearch: true, preferChatroomsOverThreads: true});
+        Timing.end(CONST.TIMING.SEARCH_FILTER_OPTIONS);
 
         return {
             recentReports: newOptions.recentReports,

diff --git a/src/components/Search/SearchRouter/SearchRouterList.tsx b/src/components/Search/SearchRouter/SearchRouterList.tsx
@@ -13,10 +13,13 @@ import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
+import Performance from '@libs/Performance';
 import {getAllTaxRates} from '@libs/PolicyUtils';
 import type {OptionData} from '@libs/ReportUtils';
 import * as SearchUtils from '@libs/SearchUtils';
 import * as Report from '@userActions/Report';
+import Timing from '@userActions/Timing';
+import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 
@@ -47,6 +50,11 @@ type SearchRouterListProps = {
     closeAndClearRouter: () => void;
 };
 
+const setPerformanceTimersEnd = () => {
+    Timing.end(CONST.TIMING.SEARCH_ROUTER_OPEN);
+    Performance.markEnd(CONST.TIMING.SEARCH_ROUTER_OPEN);
+};
+
 function isSearchQueryItem(item: OptionData | SearchQueryItem): item is SearchQueryItem {
     if ('singleIcon' in item && item.singleIcon && 'query' in item && item.query) {
         return true;
@@ -174,6 +182,7 @@ function SearchRouterList(
             ListItem={SearchRouterItem}
             containerStyle={[styles.mh100]}
             sectionListStyle={[isSmallScreenWidth ? styles.ph5 : styles.ph2, styles.pb2]}
+            onLayout={setPerformanceTimersEnd}
             ref={ref}
             showScrollIndicator={!isSmallScreenWidth}
         />

diff --git a/src/libs/E2E/tests/openSearchRouterTest.e2e.ts b/src/libs/E2E/tests/openSearchRouterTest.e2e.ts
@@ -20,10 +20,10 @@ const test = () => {
 
         console.debug('[E2E] Logged in, getting search router metrics and submitting them…');
 
-        const [openSearchPagePromise, openSearchPageResolve] = getPromiseWithResolve();
+        const [openSearchRouterPromise, openSearchRouterResolve] = getPromiseWithResolve();
         const [loadSearchOptionsPromise, loadSearchOptionsResolve] = getPromiseWithResolve();
 
-        Promise.all([openSearchPagePromise, loadSearchOptionsPromise]).then(() => {
+        Promise.all([openSearchRouterPromise, loadSearchOptionsPromise]).then(() => {
             console.debug(`[E2E] Submitting!`);
 
             E2EClient.submitTestDone();
@@ -40,7 +40,7 @@ const test = () => {
                     unit: 'ms',
                 })
                     .then(() => {
-                        openSearchPageResolve();
+                        openSearchRouterResolve();
                         console.debug('[E2E] Done with search, exiting…');
                     })
                     .catch((err) => {