Debounce the filter changes

Author: matt-aitken

apps/webapp/app/components/runs/v3/RunFilters.tsx

@@ -60,6 +60,7 @@ import {
   TaskRunStatusCombo,
 } from "./TaskRunStatus";
 import { TaskTriggerSourceIcon } from "./TaskTriggerSource";
+import { useDebounceEffect } from "~/hooks/useDebounce";
 
 export const RunStatus = z.enum(allTaskRunStatuses);
 
@@ -854,18 +855,22 @@ function QueuesDropdown({
 
   const fetcher = useFetcher<typeof queuesLoader>();
 
-  useEffect(() => {
-    const searchParams = new URLSearchParams();
-    searchParams.set("per_page", "25");
-    if (searchValue) {
-      searchParams.set("query", encodeURIComponent(searchValue));
-    }
-    fetcher.load(
-      `/resources/orgs/${organization.slug}/projects/${project.slug}/env/${
-        environment.slug
-      }/queues?${searchParams.toString()}`
-    );
-  }, [searchValue]);
+  useDebounceEffect(
+    searchValue,
+    (s) => {
+      const searchParams = new URLSearchParams();
+      searchParams.set("per_page", "25");
+      if (searchValue) {
+        searchParams.set("query", encodeURIComponent(s));
+      }
+      fetcher.load(
+        `/resources/orgs/${organization.slug}/projects/${project.slug}/env/${
+          environment.slug
+        }/queues?${searchParams.toString()}`
+      );
+    },
+    250
+  );
 
   const filtered = useMemo(() => {
     console.log(fetcher.data);

apps/webapp/app/hooks/useDebounce.ts

@@ -1,4 +1,4 @@
-import { useRef } from "react";
+import { useEffect, useRef } from "react";
 
 /**
  * A function that you call with a debounce delay, the function will only be called after the delay has passed
@@ -19,3 +19,25 @@ export function useDebounce<T extends (...args: any[]) => any>(fn: T, delay: num
     }, delay);
   };
 }
+
+/**
+ * A function that takes in a value, function, and delay.
+ * It will run the function with the debounced value, only if the value has changed.
+ * It should deal with the function being passed in not being a useCallback
+ */
+export function useDebounceEffect<T>(value: T, fn: (value: T) => void, delay: number) {
+  const fnRef = useRef(fn);
+
+  // Update the ref whenever the function changes
+  fnRef.current = fn;
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      fnRef.current(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [value, delay]); // Only depend on value and delay, not fn
+}