add fixed debounce functionality

marhaupe · Oct 13, 2024 · 7b54fbe · 7b54fbe
1 parent e59a9a5
commit 7b54fbe
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 12 deletions.
diff --git a/packages/frontend/src/App.tsx b/packages/frontend/src/App.tsx
@@ -1,7 +1,7 @@
-import { useEffect, useState, useRef, useLayoutEffect } from "react";
+import { useEffect, useState, useRef, useLayoutEffect, useCallback } from "react";
 import { nanoid } from "nanoid";
 import { Card } from "@/components/ui/card";
-import { ControlBar } from "./components/ControlBar";
+import { ControlBar, FilterState } from "./components/ControlBar";
 import { config } from "./config";
 import { useHotkeys } from "react-hotkeys-hook";
 import { LogList, LogListRef } from "./components/LogList";
@@ -126,6 +126,16 @@ export function App() {
     }
   );
 
+  const onFilterStateChange = useCallback(
+    (query: FilterState) => {
+      setFilterState((prev) => ({
+        ...prev,
+        ...query,
+      }));
+    },
+    [setFilterState]
+  );
+
   return (
     <div className="bg-slate-50 overflow-hidden">
       <div className="md:container md:p-6 h-screen">
@@ -134,13 +144,7 @@ export function App() {
             status={connectionStatus}
             filter={filterState}
             ref={searchInputRef}
-            onFilterStateChange={(query) =>
-              setFilterState({
-                regex: Boolean(query.regex) || undefined,
-                caseSensitive: Boolean(query.caseSensitive) || undefined,
-                query: query.query || undefined,
-              })
-            }
+            onFilterStateChange={onFilterStateChange}
             onClear={handleClear}
             onRestart={handleRestart}
             onScrollToTop={() => logListRef.current?.scrollToTop()}

diff --git a/packages/frontend/src/components/ControlBar.tsx b/packages/frontend/src/components/ControlBar.tsx
@@ -1,11 +1,12 @@
-import { forwardRef, useImperativeHandle, useEffect } from "react";
+import { forwardRef, useImperativeHandle, useEffect, useMemo } from "react";
 import { useForm } from "react-hook-form";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import { Button, buttonVariants } from "@/components/ui/button";
 import { Trash2, RefreshCw, ChevronsUp, ChevronsDown } from "lucide-react";
 import { Circle } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { FilterInput } from "@/components/FilterInput";
+import debounce from "lodash.debounce";
 
 type Props = {
   status: "active" | "inactive";
@@ -53,14 +54,35 @@ export const ControlBar = forwardRef(function ControlBar(
   }));
 
   useEffect(() => {
-    const subscription = watch((value) => {
-      onFilterStateChange(value);
+    const subscription = watch((value, { name }) => {
+      if (name !== "query") {
+        onFilterStateChange(value);
+      }
     });
     return () => {
       subscription.unsubscribe();
     };
   }, [watch, onFilterStateChange, filter]);
 
+  const debouncedOnFilterStateChange = useMemo(
+    () => debounce(onFilterStateChange, 100),
+    [onFilterStateChange]
+  );
+
+  useEffect(() => {
+    const subscription = watch((value, { name }) => {
+      if (name === "query") {
+        debouncedOnFilterStateChange({
+          query: value.query,
+        });
+      }
+    });
+    return () => {
+      subscription.unsubscribe();
+      debouncedOnFilterStateChange.cancel();
+    };
+  }, [watch, onFilterStateChange, debouncedOnFilterStateChange]);
+
   return (
     <TooltipProvider>
       <div className="sticky rounded-md top-0 p-2 bg-background z-50">