sebastjan/folx-tv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve search functionality by adding a debounce to input

Browse Source 
Adds a debounce mechanism to the search input field on the search page, delaying search execution for 500ms after the user stops typing to prevent excessive API calls and improve performance.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 4dc54121-0b3f-4812-85d1-73cc6650fb75
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/517dfa7b-26ac-463d-a6e1-a58c6df97188/jdAEdU5
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sebastjanartic 2026-03-04 09:06:42 +00:00
parent a7493e4279
commit b5c7bd2d86
1 changed files with 14 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
client/src/pages/search.tsx
View File

@ -1,5 +1,5 @@
import { useQuery } from "@tanstack/react-query"; import { useQuery } from "@tanstack/react-query";
import { useState, useEffect } from "react"; import { useState, useEffect, useRef } from "react";
import { useLocation } from "wouter"; import { useLocation } from "wouter";
import { Link } from "wouter"; import { Link } from "wouter";
import { Search, Play, FileText, ArrowLeft } from "lucide-react"; import { Search, Play, FileText, ArrowLeft } from "lucide-react";
@ -30,6 +30,7 @@ export default function SearchPage() {
const initialQuery = new URLSearchParams(qs).get("q") || ""; const initialQuery = new URLSearchParams(qs).get("q") || "";
const [query, setQuery] = useState(initialQuery); const [query, setQuery] = useState(initialQuery);
const [searchTerm, setSearchTerm] = useState(initialQuery); const [searchTerm, setSearchTerm] = useState(initialQuery);
const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
useEffect(() => { useEffect(() => {
const q = new URLSearchParams(window.location.search).get("q") || ""; const q = new URLSearchParams(window.location.search).get("q") || "";
@ -39,6 +40,16 @@ export default function SearchPage() {
} }
}, [qs]); }, [qs]);
const handleQueryChange = (val: string) => {
setQuery(val);
if (debounceRef.current) clearTimeout(debounceRef.current);
debounceRef.current = setTimeout(() => {
if (val.trim().length >= 2) {
setSearchTerm(val.trim());
}
}, 500);
};
const { data, isLoading } = useQuery<SearchResult>({ const { data, isLoading } = useQuery<SearchResult>({
queryKey: ["/api/search", searchTerm], queryKey: ["/api/search", searchTerm],
queryFn: async () => { queryFn: async () => {
@ -53,9 +64,9 @@ export default function SearchPage() {
const handleSubmit = (e: React.FormEvent) => { const handleSubmit = (e: React.FormEvent) => {
e.preventDefault(); e.preventDefault();
if (debounceRef.current) clearTimeout(debounceRef.current);
if (query.trim().length >= 2) { if (query.trim().length >= 2) {
setSearchTerm(query.trim()); setSearchTerm(query.trim());
navigate(`/search?q=${encodeURIComponent(query.trim())}`);
} }
}; };
@ -78,7 +89,7 @@ export default function SearchPage() {
<input <input
type="text" type="text"
value={query} value={query}
onChange={(e) => setQuery(e.target.value)} onChange={(e) => handleQueryChange(e.target.value)}
placeholder="Artikel, Videos, Künstler suchen..." placeholder="Artikel, Videos, Künstler suchen..."
className="w-full pl-12 pr-4 py-3 bg-card border border-card-border rounded-lg text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary text-base" className="w-full pl-12 pr-4 py-3 bg-card border border-card-border rounded-lg text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary text-base"
autoFocus autoFocus