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 (