Debounce search results in the catalog

#482 React · Mid-level

Try another stack

src/hooks/useSearchResults.ts hover a line, then click the + · drag to comment on a range

@@ -1,8 +1,9 @@
     import { useEffect, useState } from 'react'
    - import { searchCatalog } from '../api/search'
    + import { searchCatalog, type SearchHit } from '../api/search'
     
     export function useSearchResults(query: string) {
    -   const [results, setResults] = useState([])
    +   const [results, setResults] = useState<SearchHit[]>([])
       const [loading, setLoading] = useState(false)
       const [error, setError] = useState<string | null>(null)
     
@@ -10,18 +11,22 @@ export function useSearchResults(query: string) {
       useEffect(() => {
         if (!query.trim()) {
           setResults([])
           return
         }
     
         setLoading(true)
         setError(null)
     
    -     searchCatalog(query)
    +     const timer = setTimeout(() => {
    +       searchCatalog(query)
             .then((hits) => {
               setResults(hits)
               setLoading(false)
             })
             .catch((err) => {
               setError(err.message ?? 'Search failed')
               setLoading(false)
    -         })
    +         })
    +     }, 250)
     
    -   }, [])
    +     return () => clearTimeout(timer)
    +   }, [])
     
       return { results, loading, error }
     }