fix(diagnostics): a pivot or Back applies the search text at once
The query read the typing-debounced search, so for 300 ms after a jump it mixed the new view's filters with the old view's text and fetched rows neither view shows. useDebounced takes a settle key whose change applies the value immediately.
This commit is contained in:
@@ -158,6 +158,10 @@ describe("AdminLogs", () => {
|
|||||||
expect(screen.queryByText("adminLogs.pivotRequest:req-00000001")).toBeNull();
|
expect(screen.queryByText("adminLogs.pivotRequest:req-00000001")).toBeNull();
|
||||||
const url = new URLSearchParams(window.location.search);
|
const url = new URLSearchParams(window.location.search);
|
||||||
expect([url.get("lreq"), url.get("lgrp"), url.get("lq")]).toEqual([null, "error", "boom"]);
|
expect([url.get("lreq"), url.get("lgrp"), url.get("lq")]).toEqual([null, "error", "boom"]);
|
||||||
|
// Neither jump waited out the typing debounce: no read ever mixed one view's filters with the
|
||||||
|
// other's search text (the request with "boom", or the restored view without it).
|
||||||
|
const mixed = logsMock.mock.calls.filter(([q]) => (q.request_id != null) === (q.q === "boom"));
|
||||||
|
expect(mixed).toEqual([]);
|
||||||
});
|
});
|
||||||
|
|
||||||
it("keeps the account in use offered when the facets no longer count it", async () => {
|
it("keeps the account in use offered when the facets no longer count it", async () => {
|
||||||
|
|||||||
@@ -82,12 +82,16 @@ export default function AdminLogs() {
|
|||||||
setLiveState(on);
|
setLiveState(on);
|
||||||
};
|
};
|
||||||
const [open, setOpen] = useState<number | null>(null);
|
const [open, setOpen] = useState<number | null>(null);
|
||||||
const q = useDebounced(state.q, 300);
|
// Bumped when the view changes by a jump (a pivot, Back/Forward) rather than by typing: the
|
||||||
|
// search box's text then applies at once instead of after the typing debounce.
|
||||||
|
const [jumps, setJumps] = useState(0);
|
||||||
|
const q = useDebounced(state.q, 300, jumps);
|
||||||
useUrlMirror(logsParamUpdates(state));
|
useUrlMirror(logsParamUpdates(state));
|
||||||
// Back/Forward lands on another view of the console (a pivot pushed one, below): read it back.
|
// Back/Forward lands on another view of the console (a pivot pushed one, below): read it back.
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const onPop = () => {
|
const onPop = () => {
|
||||||
setOpen(null);
|
setOpen(null);
|
||||||
|
setJumps((n) => n + 1);
|
||||||
setState(logsParamsToState(new URLSearchParams(window.location.search)));
|
setState(logsParamsToState(new URLSearchParams(window.location.search)));
|
||||||
};
|
};
|
||||||
window.addEventListener("popstate", onPop);
|
window.addEventListener("popstate", onPop);
|
||||||
@@ -206,6 +210,7 @@ export default function AdminLogs() {
|
|||||||
urlWithParams(logsParamUpdates(next)),
|
urlWithParams(logsParamUpdates(next)),
|
||||||
);
|
);
|
||||||
notifyNav();
|
notifyNav();
|
||||||
|
setJumps((n) => n + 1);
|
||||||
update(next);
|
update(next);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,35 @@
|
|||||||
|
// @vitest-environment jsdom
|
||||||
|
import { afterEach, describe, expect, it, vi } from "vitest";
|
||||||
|
import { act, renderHook } from "@testing-library/react";
|
||||||
|
|
||||||
|
import { useDebounced } from "./useDebounced";
|
||||||
|
|
||||||
|
afterEach(() => {
|
||||||
|
vi.useRealTimers();
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("useDebounced", () => {
|
||||||
|
it("hands a value on once it stopped changing for the delay", () => {
|
||||||
|
vi.useFakeTimers();
|
||||||
|
const { result, rerender } = renderHook(({ v }) => useDebounced(v, 300), {
|
||||||
|
initialProps: { v: "a" },
|
||||||
|
});
|
||||||
|
rerender({ v: "ab" });
|
||||||
|
expect(result.current).toBe("a");
|
||||||
|
act(() => vi.advanceTimersByTime(300));
|
||||||
|
expect(result.current).toBe("ab");
|
||||||
|
});
|
||||||
|
|
||||||
|
it("takes the value at once when `settle` changes — a jump, not typing", () => {
|
||||||
|
vi.useFakeTimers();
|
||||||
|
const { result, rerender } = renderHook(({ v, s }) => useDebounced(v, 300, s), {
|
||||||
|
initialProps: { v: "", s: 0 },
|
||||||
|
});
|
||||||
|
rerender({ v: "boom", s: 1 });
|
||||||
|
expect(result.current).toBe("boom");
|
||||||
|
rerender({ v: "boomx", s: 1 });
|
||||||
|
expect(result.current).toBe("boom");
|
||||||
|
act(() => vi.advanceTimersByTime(300));
|
||||||
|
expect(result.current).toBe("boomx");
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -3,11 +3,21 @@ import { useEffect, useState } from "react";
|
|||||||
// Returns `value` after it has stopped changing for `delay` ms. Lets a text input stay
|
// Returns `value` after it has stopped changing for `delay` ms. Lets a text input stay
|
||||||
// responsive (it owns the immediate value) while the query it drives only re-runs once the
|
// responsive (it owns the immediate value) while the query it drives only re-runs once the
|
||||||
// user pauses — so we don't refetch the feed on every keystroke.
|
// user pauses — so we don't refetch the feed on every keystroke.
|
||||||
export function useDebounced<T>(value: T, delay = 300): T {
|
//
|
||||||
|
// `settle`: a change of it takes `value` at once. A value that did not come from typing (Back
|
||||||
|
// restoring a search, a pivot clearing one) has no keystrokes to wait out, and the lag only ran a
|
||||||
|
// query mixing the new filters with the old text (deep-review 2026-09-19).
|
||||||
|
export function useDebounced<T>(value: T, delay = 300, settle?: unknown): T {
|
||||||
const [debounced, setDebounced] = useState(value);
|
const [debounced, setDebounced] = useState(value);
|
||||||
|
const [settled, setSettled] = useState(settle);
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const id = window.setTimeout(() => setDebounced(value), delay);
|
const id = window.setTimeout(() => setDebounced(value), delay);
|
||||||
return () => window.clearTimeout(id);
|
return () => window.clearTimeout(id);
|
||||||
}, [value, delay]);
|
}, [value, delay]);
|
||||||
|
if (settle !== settled) {
|
||||||
|
setSettled(settle);
|
||||||
|
setDebounced(value);
|
||||||
|
return value;
|
||||||
|
}
|
||||||
return debounced;
|
return debounced;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user