Merge pull request #50143 from software-mansion-labs/@szymczak/fix-se…

…arch-router-performance Fix performance of SearchRouter
Expensify · Oct 3, 2024 · 0c2900c · 0c2900c
2 parents cb58008 + ea856bd
commit 0c2900c
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 43 deletions.
diff --git a/src/components/Search/SearchRouter/SearchRouter.tsx b/src/components/Search/SearchRouter/SearchRouter.tsx
@@ -3,9 +3,7 @@ import debounce from 'lodash/debounce';
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
-import FocusTrapForModal from '@components/FocusTrap/FocusTrapForModal';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
-import Modal from '@components/Modal';
 import {useOptionsList} from '@components/OptionListContextProvider';
 import type {SearchQueryJSON} from '@components/Search/types';
 import type {SelectionListHandle} from '@components/SelectionList/types';
@@ -160,48 +158,37 @@ function SearchRouter() {
         clearUserQuery();
     });
 
-    const modalType = isSmallScreenWidth ? CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE : CONST.MODAL.MODAL_TYPE.POPOVER;
     const modalWidth = isSmallScreenWidth ? styles.w100 : {width: variables.popoverWidth};
 
     return (
-        <Modal
-            type={modalType}
-            fullscreen
-            isVisible={isSearchRouterDisplayed}
-            popoverAnchorPosition={{right: 20, top: 20}}
-            onClose={closeSearchRouter}
-        >
-            <FocusTrapForModal active={isSearchRouterDisplayed}>
-                <View style={[styles.flex1, modalWidth, styles.h100, !isSmallScreenWidth && styles.mh85vh]}>
-                    {isSmallScreenWidth && (
-                        <HeaderWithBackButton
-                            title={translate('common.search')}
-                            onBackButtonPress={() => closeSearchRouter()}
-                        />
-                    )}
-                    <SearchRouterInput
-                        value={textInputValue}
-                        setValue={setTextInputValue}
-                        isFullWidth={isSmallScreenWidth}
-                        updateSearch={onSearchChange}
-                        routerListRef={listRef}
-                        wrapperStyle={[isSmallScreenWidth ? styles.mv3 : styles.mv2, isSmallScreenWidth ? styles.mh5 : styles.mh2, styles.border]}
-                        wrapperFocusedStyle={[styles.borderColorFocus]}
-                        isSearchingForReports={isSearchingForReports}
-                    />
-                    <SearchRouterList
-                        currentQuery={userSearchQuery}
-                        reportForContextualSearch={contextualReportData}
-                        recentSearches={sortedRecentSearches?.slice(0, 5)}
-                        recentReports={recentReports}
-                        onSearchSubmit={onSearchSubmit}
-                        updateUserSearchQuery={updateUserSearchQuery}
-                        closeAndClearRouter={closeAndClearRouter}
-                        ref={listRef}
-                    />
-                </View>
-            </FocusTrapForModal>
-        </Modal>
+        <View style={[styles.flex1, modalWidth, styles.h100, !isSmallScreenWidth && styles.mh85vh]}>
+            {isSmallScreenWidth && (
+                <HeaderWithBackButton
+                    title={translate('common.search')}
+                    onBackButtonPress={() => closeSearchRouter()}
+                />
+            )}
+            <SearchRouterInput
+                value={textInputValue}
+                setValue={setTextInputValue}
+                isFullWidth={isSmallScreenWidth}
+                updateSearch={onSearchChange}
+                routerListRef={listRef}
+                wrapperStyle={[isSmallScreenWidth ? styles.mv3 : styles.mv2, isSmallScreenWidth ? styles.mh5 : styles.mh2, styles.border]}
+                wrapperFocusedStyle={[styles.borderColorFocus]}
+                isSearchingForReports={isSearchingForReports}
+            />
+            <SearchRouterList
+                currentQuery={userSearchQuery}
+                reportForContextualSearch={contextualReportData}
+                recentSearches={sortedRecentSearches?.slice(0, 5)}
+                recentReports={recentReports}
+                onSearchSubmit={onSearchSubmit}
+                updateUserSearchQuery={updateUserSearchQuery}
+                closeAndClearRouter={closeAndClearRouter}
+                ref={listRef}
+            />
+        </View>
     );
 }
 

diff --git a/src/components/Search/SearchRouter/SearchRouterList.tsx b/src/components/Search/SearchRouter/SearchRouterList.tsx
@@ -175,6 +175,7 @@ function SearchRouterList(
             containerStyle={[styles.mh100]}
             sectionListStyle={[isSmallScreenWidth ? styles.ph5 : styles.ph2, styles.pb2]}
             ref={ref}
+            showScrollIndicator={!isSmallScreenWidth}
         />
     );
 }

diff --git a/src/components/Search/SearchRouter/SearchRouterModal.tsx b/src/components/Search/SearchRouter/SearchRouterModal.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import FocusTrapForModal from '@components/FocusTrap/FocusTrapForModal';
+import Modal from '@components/Modal';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import CONST from '@src/CONST';
+import SearchRouter from './SearchRouter';
+import {useSearchRouterContext} from './SearchRouterContext';
+
+function SearchRouterModal() {
+    const {isSmallScreenWidth} = useResponsiveLayout();
+    const {isSearchRouterDisplayed, closeSearchRouter} = useSearchRouterContext();
+
+    const modalType = isSmallScreenWidth ? CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE : CONST.MODAL.MODAL_TYPE.POPOVER;
+
+    return (
+        <Modal
+            type={modalType}
+            fullscreen
+            isVisible={isSearchRouterDisplayed}
+            popoverAnchorPosition={{right: 20, top: 20}}
+            onClose={closeSearchRouter}
+        >
+            <FocusTrapForModal active={isSearchRouterDisplayed}>{isSearchRouterDisplayed && <SearchRouter />}</FocusTrapForModal>
+        </Modal>
+    );
+}
+
+SearchRouterModal.displayName = 'SearchRouterModal';
+
+export default SearchRouterModal;
diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.tsx b/src/libs/Navigation/AppNavigator/AuthScreens.tsx
@@ -7,7 +7,7 @@ import ActiveGuidesEventListener from '@components/ActiveGuidesEventListener';
 import ComposeProviders from '@components/ComposeProviders';
 import OptionsListContextProvider from '@components/OptionListContextProvider';
 import {SearchContextProvider} from '@components/Search/SearchContext';
-import SearchRouter from '@components/Search/SearchRouter/SearchRouter';
+import SearchRouterModal from '@components/Search/SearchRouter/SearchRouterModal';
 import useActiveWorkspace from '@hooks/useActiveWorkspace';
 import useOnboardingFlowRouter from '@hooks/useOnboardingFlow';
 import usePermissions from '@hooks/usePermissions';
@@ -578,7 +578,7 @@ function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDApplie
                         );
                     })}
                 </RootStack.Navigator>
-                <SearchRouter />
+                <SearchRouterModal />
             </View>
             {didPusherInit && <ActiveGuidesEventListener />}
         </ComposeProviders>