diff --git a/app/ui/search.tsx b/app/ui/search.tsx index 757722e..4611f54 100644 --- a/app/ui/search.tsx +++ b/app/ui/search.tsx @@ -2,12 +2,15 @@ import { MagnifyingGlassIcon } from '@heroicons/react/24/outline'; import {usePathname, useRouter, useSearchParams} from "next/navigation"; +import { useDebouncedCallback } from 'use-debounce'; export default function Search({ placeholder }: { placeholder: string }) { const searchParams = useSearchParams(); const pathname = usePathname(); const { replace } = useRouter(); - function handleSearch(term: string) { + + const handleSearch = useDebouncedCallback((term) => { + console.log(`Searching... ${term}`); const params = new URLSearchParams(searchParams); if (term) { params.set('query', term); @@ -16,7 +19,7 @@ export default function Search({ placeholder }: { placeholder: string }) { } replace(`${pathname}?${params.toString()}`); - } + }, 300) return (