improve perf of filter bar

internal/site/src/components/routes/system.tsx

@@ -42,7 +42,6 @@ import {
 	chartTimeData,
 	cn,
 	compareSemVer,
-	debounce,
 	decimalString,
 	formatBytes,
 	secondsToString,
@@ -1042,32 +1041,51 @@ function GpuEnginesChart({ chartData }: { chartData: ChartData }) {
 }
 
 function FilterBar({ store = $containerFilter }: { store?: typeof $containerFilter }) {
-	const containerFilter = useStore(store)
+	const storeValue = useStore(store)
+	const [inputValue, setInputValue] = useState(storeValue)
 	const { t } = useLingui()
 
-	const debouncedStoreSet = useMemo(() => debounce((value: string) => store.set(value), 80), [store])
+	useEffect(() => {
+		setInputValue(storeValue)
+	}, [storeValue])
+
+	useEffect(() => {
+		if (inputValue === storeValue) {
+			return
+		}
+		const handle = window.setTimeout(() => store.set(inputValue), 80)
+		return () => clearTimeout(handle)
+	}, [inputValue, storeValue, store])
 
 	const handleChange = useCallback(
-		(e: React.ChangeEvent<HTMLInputElement>) => debouncedStoreSet(e.target.value),
-		[debouncedStoreSet]
+		(e: React.ChangeEvent<HTMLInputElement>) => {
+			const value = e.target.value
+			setInputValue(value)
+		},
+		[]
 	)
 
+	const handleClear = useCallback(() => {
+		setInputValue("")
+		store.set("")
+	}, [store])
+
 	return (
 		<>
 			<Input
 				placeholder={t`Filter...`}
 				className="ps-4 pe-8 w-full sm:w-44"
 				onChange={handleChange}
-				value={containerFilter}
+				value={inputValue}
 			/>
-			{containerFilter && (
+			{inputValue && (
 				<Button
 					type="button"
 					variant="ghost"
 					size="icon"
 					aria-label="Clear"
 					className="absolute right-1 top-1/2 -translate-y-1/2 h-7 w-7 text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100"
-					onClick={() => store.set("")}
+					onClick={handleClear}
 				>
 					<XIcon className="h-4 w-4" />
 				</Button>