Ionosphere.tv
perf: debounce concordance filter by 150ms
Separates the input value (immediate) from the filter used for
computation (debounced). Prevents re-filtering 10k entries on
every keystroke.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
+12
-2
+12
-2
apps/ionosphere/src/app/concordance/IndexContent.tsx
+12
-2
apps/ionosphere/src/app/concordance/IndexContent.tsx
···
234
234
} | null>(null);
235
235
236
236
const [comments, setComments] = useState<CommentData[]>([]);
237
+
const [filterInput, setFilterInput] = useState("");
237
238
const [filter, setFilter] = useState("");
238
239
const [isRegex, setIsRegex] = useState(false);
240
+
const filterTimer = useRef<ReturnType<typeof setTimeout>>();
241
+
const handleFilterChange = useCallback((value: string) => {
242
+
setFilterInput(value);
243
+
clearTimeout(filterTimer.current);
244
+
filterTimer.current = setTimeout(() => {
245
+
setFilter(value);
246
+
setStartIndex(0);
247
+
}, 150);
248
+
}, []);
239
249
const [widePlayer, setWidePlayer] = useState(false);
240
250
const [showMobilePlayer, setShowMobilePlayer] = useState(false);
241
251
···
555
565
<div className="flex-1 max-w-sm relative">
556
566
<input
557
567
type="text"
558
-
value={filter}
559
-
onChange={(e) => { setFilter(e.target.value); setStartIndex(0); }}
568
+
value={filterInput}
569
+
onChange={(e) => handleFilterChange(e.target.value)}
560
570
placeholder={isRegex ? "Filter (regex)..." : "Filter..."}
561
571
className="w-full bg-neutral-900 border border-neutral-700 rounded px-3 py-1.5 text-sm text-neutral-200 placeholder:text-neutral-600 focus:outline-none focus:border-neutral-500"
562
572
/>