diff --git a/__tests__/snapshots/sections/home10/__snapshots__/Section1.test.tsx.snap b/__tests__/snapshots/sections/home10/__snapshots__/Section1.test.tsx.snap index 22bb35c6..b4a6ee26 100644 --- a/__tests__/snapshots/sections/home10/__snapshots__/Section1.test.tsx.snap +++ b/__tests__/snapshots/sections/home10/__snapshots__/Section1.test.tsx.snap @@ -62,7 +62,7 @@ exports[`Section1 Component matches snapshot 1`] = ` alt="" src="/assets/img/icons/calender1.svg" /> - 15th, 16th, & 17th January “2025” + 15th, 16th, & 17th January “2025” diff --git a/components/layout/TalksFilterBar.tsx b/components/layout/TalksFilterBar.tsx index c05acb1f..5077ca38 100644 --- a/components/layout/TalksFilterBar.tsx +++ b/components/layout/TalksFilterBar.tsx @@ -1,7 +1,7 @@ "use client"; import { usePathname, useRouter, useSearchParams } from "next/navigation"; -import { useCallback, useEffect, useState, useTransition } from "react"; +import { useCallback, useEffect, useRef, useState, useTransition } from "react"; import { motion } from "framer-motion"; interface TalksFilterBarProps { @@ -21,6 +21,7 @@ export default function TalksFilterBar({ tracks, year: _year }: TalksFilterBarPr const [selectedTrack, setSelectedTrack] = useState(searchParams.get("track") || ""); const [searchQuery, setSearchQuery] = useState(searchParams.get("q") || ""); + const searchTimeoutRef = useRef | null>(null); // Update state when URL changes useEffect(() => { @@ -28,6 +29,14 @@ export default function TalksFilterBar({ tracks, year: _year }: TalksFilterBarPr setSearchQuery(searchParams.get("q") || ""); }, [searchParams]); + useEffect(() => { + return () => { + if (searchTimeoutRef.current) { + clearTimeout(searchTimeoutRef.current); + } + }; + }, []); + const updateFilters = useCallback( (track: string, query: string) => { const params = new URLSearchParams(searchParams.toString()); @@ -60,11 +69,15 @@ export default function TalksFilterBar({ tracks, year: _year }: TalksFilterBarPr const handleSearchChange = (e: React.ChangeEvent) => { const newQuery = e.target.value; setSearchQuery(newQuery); + + if (searchTimeoutRef.current) { + clearTimeout(searchTimeoutRef.current); + } + // Debounce the URL update for search - const timeoutId = setTimeout(() => { + searchTimeoutRef.current = setTimeout(() => { updateFilters(selectedTrack, newQuery); }, 300); - return () => clearTimeout(timeoutId); }; return (