fix(ui): stabilize issue search URL sync and debounce query execution

This commit is contained in:
Dotta
2026-03-06 08:32:16 -06:00
parent 38b9a55eab
commit 86bd26ee8a
2 changed files with 23 additions and 6 deletions

View File

@@ -1,4 +1,4 @@
import { useEffect, useDeferredValue, useMemo, useState, useCallback, useRef } from "react";
import { useEffect, useMemo, useState, useCallback, useRef } from "react";
import { Link } from "@/lib/router";
import { useQuery } from "@tanstack/react-query";
import { useDialog } from "../context/DialogContext";
@@ -175,8 +175,19 @@ export function IssuesList({
const [assigneePickerIssueId, setAssigneePickerIssueId] = useState<string | null>(null);
const [assigneeSearch, setAssigneeSearch] = useState("");
const [issueSearch, setIssueSearch] = useState(initialSearch ?? "");
const deferredIssueSearch = useDeferredValue(issueSearch);
const normalizedIssueSearch = deferredIssueSearch.trim();
const [debouncedIssueSearch, setDebouncedIssueSearch] = useState(issueSearch);
const normalizedIssueSearch = debouncedIssueSearch.trim();
useEffect(() => {
setIssueSearch(initialSearch ?? "");
}, [initialSearch]);
useEffect(() => {
const timeoutId = window.setTimeout(() => {
setDebouncedIssueSearch(issueSearch);
}, 300);
return () => window.clearTimeout(timeoutId);
}, [issueSearch]);
// Reload view state from localStorage when company changes (scopedKey changes).
const prevScopedKey = useRef(scopedKey);

View File

@@ -22,13 +22,19 @@ export function Issues() {
const handleSearchChange = useCallback((search: string) => {
clearTimeout(debounceRef.current);
debounceRef.current = setTimeout(() => {
const trimmedSearch = search.trim();
const currentSearch = new URLSearchParams(window.location.search).get("q") ?? "";
if (currentSearch === trimmedSearch) return;
const url = new URL(window.location.href);
if (search.trim()) {
url.searchParams.set("q", search.trim());
if (trimmedSearch) {
url.searchParams.set("q", trimmedSearch);
} else {
url.searchParams.delete("q");
}
window.history.replaceState(null, "", url);
const nextUrl = `${url.pathname}${url.search}${url.hash}`;
window.history.replaceState(window.history.state, "", nextUrl);
}, 300);
}, []);