fix searchRouterLoading bug

Expensify · Oct 2, 2024 · a986ab6 · a986ab6
1 parent 1b7f6ac
commit a986ab6
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 4 deletions.
diff --git a/src/components/Search/SearchRouter/SearchRouter.tsx b/src/components/Search/SearchRouter/SearchRouter.tsx
@@ -35,6 +35,7 @@ function SearchRouter() {
     const {translate} = useLocalize();
     const [betas] = useOnyx(ONYXKEYS.BETAS);
     const [recentSearches] = useOnyx(ONYXKEYS.RECENT_SEARCHES);
+    const [isSearchingForReports] = useOnyx(ONYXKEYS.IS_SEARCHING_FOR_REPORTS, {initWithStoredValues: false});
 
     const {isSmallScreenWidth} = useResponsiveLayout();
     const {isSearchRouterDisplayed, closeSearchRouter} = useSearchRouterContext();
@@ -179,6 +180,7 @@ function SearchRouter() {
                         routerListRef={listRef}
                         wrapperStyle={[isSmallScreenWidth ? styles.mv3 : styles.mv2, isSmallScreenWidth ? styles.mh5 : styles.mh2, styles.border]}
                         wrapperFocusedStyle={[styles.borderColorFocus]}
+                        isSearchingForReports={isSearchingForReports}
                     />
                     <SearchRouterList
                         currentQuery={userSearchQuery}

diff --git a/src/components/Search/SearchRouter/SearchRouterInput.tsx b/src/components/Search/SearchRouter/SearchRouterInput.tsx
@@ -2,14 +2,12 @@ import React, {useState} from 'react';
 import type {ReactNode, RefObject} from 'react';
 import {View} from 'react-native';
 import type {StyleProp, ViewStyle} from 'react-native';
-import {useOnyx} from 'react-native-onyx';
 import type {SelectionListHandle} from '@components/SelectionList/types';
 import TextInput from '@components/TextInput';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
-import ONYXKEYS from '@src/ONYXKEYS';
 
 type SearchRouterInputProps = {
     /** Value of TextInput */
@@ -38,12 +36,25 @@ type SearchRouterInputProps = {
 
     /** Component to be displayed on the right */
     rightComponent?: ReactNode;
+
+    /** Whether the search reports API call is running  */
+    isSearchingForReports?: boolean;
 };
 
-function SearchRouterInput({value, setValue, updateSearch, routerListRef, isFullWidth, disabled = false, wrapperStyle, wrapperFocusedStyle, rightComponent}: SearchRouterInputProps) {
+function SearchRouterInput({
+    value,
+    setValue,
+    updateSearch,
+    routerListRef,
+    isFullWidth,
+    disabled = false,
+    wrapperStyle,
+    wrapperFocusedStyle,
+    rightComponent,
+    isSearchingForReports,
+}: SearchRouterInputProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
-    const [isSearchingForReports] = useOnyx(ONYXKEYS.IS_SEARCHING_FOR_REPORTS, {initWithStoredValues: false});
     const [isFocused, setIsFocused] = useState<boolean>(false);
 
     const onChangeText = (text: string) => {