Improve search performance by debouncing requests and filtering short queries

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

client/src/components/search-header.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useCallback } from "react";
 import { Search, Play, Menu, Grid3X3, List } from "lucide-react";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
@@ -17,9 +17,26 @@ export default function SearchHeader({
 }: SearchHeaderProps) {
   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) => {
     setSearchQuery(value);
-    onSearch(value);
+    debouncedSearch(value);
   };
 
   return (