sebastjan/videofolxtv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve search performance by debouncing requests and filtering short queries

Browse Source 
Adds a debounce function to the client-side search header to limit API calls and filters out search queries shorter than 2 characters on the server-side to improve performance.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: d7424866-83d1-4486-a212-ac12b4c7becf
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/d7424866-83d1-4486-a212-ac12b4c7becf/66oOTXh
This commit is contained in:
sebastjanartic 2025-08-28 11:53:56 +00:00
parent fd2cde73b8
commit 337888fe47
2 changed files with 25 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
client/src/components/search-header.tsx
View File

@ -1,4 +1,4 @@
import { useState } from "react"; import { useState, useCallback } from "react";
import { Search, Play, Menu, Grid3X3, List } from "lucide-react"; import { Search, Play, Menu, Grid3X3, List } from "lucide-react";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
@ -17,9 +17,26 @@ export default function SearchHeader({
}: SearchHeaderProps) { }: SearchHeaderProps) {
const [searchQuery, setSearchQuery] = useState(""); const [searchQuery, setSearchQuery] = useState("");
// Debounce function to delay search API calls
const debounce = useCallback((func: Function, delay: number) => {
let timeoutId: NodeJS.Timeout;
return (...args: any[]) => {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => func(...args), delay);
};
}, []);
// Debounced search function - waits 500ms after user stops typing
const debouncedSearch = useCallback(
debounce((query: string) => {
onSearch(query);
}, 500),
[onSearch, debounce]
);
const handleSearchChange = (value: string) => { const handleSearchChange = (value: string) => {
setSearchQuery(value); setSearchQuery(value);
onSearch(value); debouncedSearch(value);
}; };
return ( return (

9
server/routes.ts
View File

@ -176,10 +176,13 @@ export async function registerRoutes(app: Express): Promise<Server> {
const offset = parseInt(req.query.offset as string) || 0; const offset = parseInt(req.query.offset as string) || 0;
const search = req.query.search as string; const search = req.query.search as string;
console.log(`Fetching videos: limit=${limit}, offset=${offset}, search=${search}`); // Skip search for queries shorter than 2 characters for performance
const searchQuery = search && search.length >= 2 ? search : undefined;
const videos = await storage.getVideos(limit, offset, search); console.log(`Fetching videos: limit=${limit}, offset=${offset}, search=${searchQuery}`);
const total = await storage.getVideoCount(search);
const videos = await storage.getVideos(limit, offset, searchQuery);
const total = await storage.getVideoCount(searchQuery);
console.log(`Returning ${videos.length} videos`); console.log(`Returning ${videos.length} videos`);