Search bar fixes and performance updates

src/pages/settings/components/Search/SearchHistory.tsx

@@ -9,14 +9,10 @@ import type { SearchHistoryItem } from 'types';
 
 const SearchHistory = () => {
 	const searchEndpoint = 'api/searchHistory';
-	const {
-		data: historyData,
-		isFetched: historyDataIsFetched,
-		isFetching: historyDataIsFetching,
-	} = useQueryAPI({
+	const { data: historyData, isFetching: historyDataIsFetching } = useQueryAPI({
 		endpoint: searchEndpoint,
 	});
-	const [searchHistory, setSearchHistory] = useState<SearchHistoryItem[]>([]);
+	const searchHistory: SearchHistoryItem[] = historyData || [];
 	const [searchValue, setSearchValue] = useState<string | number>('');
 	const [searchHistoryItem, setSearchHistoryItem] = useState<SearchHistoryItem>();
 	const [debouncedSearch] = useDebouncedValue(searchValue, 500);
@@ -36,12 +32,6 @@ const SearchHistory = () => {
 		},
 	]);
 
-	useEffect(() => {
-		if (historyData && historyDataIsFetched) {
-			setSearchHistory(historyData);
-		}
-	}, [historyData, historyDataIsFetched]);
-
 	useEffect(() => {
 		setGlobalFilter(debouncedSearch);
 		if (debouncedSearch === globalFilter) {

src/pages/settings/components/Search/SearchProviders.tsx

@@ -52,19 +52,23 @@ const SearchProviderSettings = () => {
 		},
 	});
 	const endpoint = 'api/providers';
-	const {
-		data: providerData,
-		isFetched: providerDataIsFetched,
-		isFetching: providerDataIsFetching,
-	} = useQueryAPI({
+	const { data: providerData, isFetching: providerDataIsFetching } = useQueryAPI({
 		endpoint: endpoint,
 	});
-	const [providers, setProviders] = useState<Provider[]>([]);
+	const [searchValue, setSearchValue] = useState<string | number>('');
+	const [debouncedSearch] = useDebouncedValue(searchValue, 500);
+	const providers =
+		providerData
+			.filter(
+				(a: Provider) =>
+					a.name.toLowerCase().includes((debouncedSearch as string).toLowerCase()) ||
+					a.url.toLowerCase().includes((debouncedSearch as string).toLowerCase()) ||
+					a.prefix.toLowerCase().includes((debouncedSearch as string).toLowerCase()),
+			)
+			.sort((a: Provider, b: Provider) => (a.prefix > b.prefix ? 1 : -1)) ?? [];
 	const { isMobile, theme, iconFilter } = useCommonHooks();
 	const { mutateAsync } = useMutationAPI();
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
-	const [searchValue, setSearchValue] = useState<string | number>('');
-	const [debouncedSearch] = useDebouncedValue(searchValue, 500);
 	const [isOpen, setIsOpen] = useState(false);
 	const [isLoading, setIsLoading] = useState(false);
 
@@ -74,22 +78,10 @@ const SearchProviderSettings = () => {
 	};
 
 	useEffect(() => {
-		if (providerData && providerDataIsFetched) {
-			setProviders(
-				providerData
-					.filter(
-						(a: Provider) =>
-							a.name.toLowerCase().includes((debouncedSearch as string).toLowerCase()) ||
-							a.url.toLowerCase().includes((debouncedSearch as string).toLowerCase()) ||
-							a.prefix.toLowerCase().includes((debouncedSearch as string).toLowerCase()),
-					)
-					.sort((a: Provider, b: Provider) => (a.prefix > b.prefix ? 1 : -1)),
-			);
-		}
 		if (debouncedSearch === searchValue) {
 			setIsLoading(false);
 		}
-	}, [providerData, providerDataIsFetched, debouncedSearch]);
+	}, [debouncedSearch]);
 
 	return (
 		<Stack>