From c8ff3d7e76d2eb5a86e2a987ce246c69584dfc45 Mon Sep 17 00:00:00 2001
From: SohamBhattacharjee2003
 <125297948+SohamBhattacharjee2003@users.noreply.github.com>
Date: Wed, 8 Apr 2026 05:06:22 +0530
Subject: [PATCH] fix: debounce logs message filter to prevent UI jank

- Add local state for message filter input with 300ms debounce
- Use useDebouncedValue hook to delay table filter updates
- Prevents full filtering pipeline from running on every keystroke
- Improves responsiveness for large log datasets
---
 .../[search_space_id]/logs/(manage)/page.tsx  | 21 ++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/surfsense_web/app/dashboard/[search_space_id]/logs/(manage)/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/logs/(manage)/page.tsx
index d51cfac9b..443c964cf 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/logs/(manage)/page.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/logs/(manage)/page.tsx
@@ -44,8 +44,9 @@ import {
 import { AnimatePresence, motion, type Variants } from "motion/react";
 import { useParams } from "next/navigation";
 import { useTranslations } from "next-intl";
-import React, { useCallback, useContext, useId, useMemo, useRef, useState } from "react";
+import React, { useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
 import { toast } from "sonner";
+import { useDebouncedValue } from "@/hooks/use-debounced-value";
 import {
 	createLogMutationAtom,
 	deleteLogMutationAtom,
@@ -706,6 +707,15 @@ function LogsFilters({
 	id: string;
 }) {
 	const t = useTranslations("logs");
+	const [filterInput, setFilterInput] = useState(
+		(table.getColumn("message")?.getFilterValue() ?? "") as string
+	);
+	const debouncedFilter = useDebouncedValue(filterInput, 300);
+
+	useEffect(() => {
+		table.getColumn("message")?.setFilterValue(debouncedFilter || undefined);
+	}, [debouncedFilter, table]);
+
 	return (
 		<motion.div
 			className="flex flex-wrap items-center justify-start gap-3 w-full"
@@ -720,22 +730,23 @@ function LogsFilters({
 						ref={inputRef}
 						className={cn(
 							"peer w-full sm:min-w-60 ps-9",
-							Boolean(table.getColumn("message")?.getFilterValue()) && "pe-9"
+							Boolean(filterInput) && "pe-9"
 						)}
-						value={(table.getColumn("message")?.getFilterValue() ?? "") as string}
-						onChange={(e) => table.getColumn("message")?.setFilterValue(e.target.value)}
+						value={filterInput}
+						onChange={(e) => setFilterInput(e.target.value)}
 						placeholder={t("filter_by_message")}
 						type="text"
 					/>
 					<div className="pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80">
 						<ListFilter size={16} strokeWidth={2} />
 					</div>
-					{Boolean(table.getColumn("message")?.getFilterValue()) && (
+					{Boolean(filterInput) && (
 						<Button
 							className="absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-lg text-muted-foreground/80 hover:text-foreground"
 							variant="ghost"
 							size="icon"
 							onClick={() => {
+								setFilterInput("");
 								table.getColumn("message")?.setFilterValue("");
 								inputRef.current?.focus();
 							}}