diff --git a/internal/site/src/components/routes/system.tsx b/internal/site/src/components/routes/system.tsx index a4996bde..fd7a1d01 100644 --- a/internal/site/src/components/routes/system.tsx +++ b/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) => debouncedStoreSet(e.target.value), - [debouncedStoreSet] + (e: React.ChangeEvent) => { + const value = e.target.value + setInputValue(value) + }, + [] ) + const handleClear = useCallback(() => { + setInputValue("") + store.set("") + }, [store]) + return ( <> - {containerFilter && ( + {inputValue && (