Fix: safe apps search performance (#3008)

* Fix: safe apps search performance

* Lint

src/hooks/safe-apps/useSafeAppsFilters.ts

@@ -20,18 +20,14 @@ type ReturnType = {
 
 const useSafeAppsFilters = (safeAppsList: SafeAppData[]): ReturnType => {
   const [query, setQuery] = useState<string>('')
-  const debouncedQuery = useDebounce(query, 400)
   const [selectedCategories, setSelectedCategories] = useState<string[]>([])
   const [optimizedWithBatchFilter, setOptimizedWithBatchFilter] = useState<boolean>(false)
 
-  const filteredAppsByQuery = useAppsSearch(safeAppsList, debouncedQuery)
-
+  const filteredAppsByQuery = useAppsSearch(safeAppsList, query)
   const filteredAppsByQueryAndCategories = useAppsFilterByCategory(filteredAppsByQuery, selectedCategories)
-
   const filteredApps = useAppsFilterByOptimizedForBatch(filteredAppsByQueryAndCategories, optimizedWithBatchFilter)
 
   const debouncedSearchQuery = useDebounce(query, 2000)
-
   useEffect(() => {
     if (debouncedSearchQuery) {
       trackSafeAppEvent({ ...SAFE_APPS_EVENTS.SEARCH, label: debouncedSearchQuery })

src/pages/apps/index.tsx

@@ -1,7 +1,8 @@
 import type { NextPage } from 'next'
 import Head from 'next/head'
 import { useRouter } from 'next/router'
-import { useEffect, useMemo } from 'react'
+import { useCallback, useEffect, useMemo } from 'react'
+import debounce from 'lodash/debounce'
 
 import { useSafeApps } from '@/hooks/safe-apps/useSafeApps'
 import SafeAppsSDKLink from '@/components/safe-apps/SafeAppsSDKLink'
@@ -23,6 +24,9 @@ const SafeApps: NextPage = () => {
     [remoteSafeApps, pinnedSafeAppIds],
   )
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const onChangeQuery = useCallback(debounce(setQuery, 300), [])
+
   // Redirect to an individual safe app page if the appUrl is in the query params
   useEffect(() => {
     const appUrl = router.query.appUrl as string
@@ -44,7 +48,7 @@ const SafeApps: NextPage = () => {
       <main>
         {/* Safe Apps Filters */}
         <SafeAppsFilters
-          onChangeQuery={setQuery}
+          onChangeQuery={onChangeQuery}
           onChangeFilterCategory={setSelectedCategories}
           onChangeOptimizedWithBatch={setOptimizedWithBatchFilter}
           selectedCategories={selectedCategories}