Added Debounced API Query Component (#373)

Author: mijinummi

app/frontend/src/components/DebouncedQueryHandler.jsx

@@ -0,0 +1,44 @@
+import React, { useState, useRef, useEffect } from 'react';
+
+export default function DebouncedQueryHandler({ queryFn, delay = 500, children }) {
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const timeoutRef = useRef(null);
+  const abortControllerRef = useRef(null);
+
+  const runQuery = (input) => {
+    // Cancel previous debounce
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+
+    timeoutRef.current = setTimeout(async () => {
+      // Cancel previous request
+      if (abortControllerRef.current) abortControllerRef.current.abort();
+      abortControllerRef.current = new AbortController();
+
+      setLoading(true);
+      setError(null);
+
+      try {
+        const result = await queryFn(input, { signal: abortControllerRef.current.signal });
+        setData(result);
+      } catch (err) {
+        if (err.name !== 'AbortError') {
+          setError(err);
+        }
+      } finally {
+        setLoading(false);
+      }
+    }, delay);
+  };
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      if (abortControllerRef.current) abortControllerRef.current.abort();
+    };
+  }, []);
+
+  return children({ runQuery, data, loading, error });
+}