mikkel/nexus
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Speed up issues page search responsiveness

Browse source 
Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
dotta 2026-03-26 11:01:09 -05:00
parent 5ee4cd98e8
commit dd8c1ca3b2
2 changed files with 60 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

71
ui/src/components/IssuesList.tsx
View file

@ -1,4 +1,4 @@
import { useEffect, useMemo, useState, useCallback, useRef } from "react";
import { startTransition, useEffect, useMemo, useState, useCallback, useRef } from "react";
import { useQuery } from "@tanstack/react-query";
import { pickTextColorForPillBg } from "@/lib/color-contrast";
import { useDialog } from "../context/DialogContext";
@ -68,6 +68,7 @@ const quickFilterPresets = [
{ label: "Backlog", statuses: ["backlog"] },
{ label: "Done", statuses: ["done", "cancelled"] },
];
const ISSUE_SEARCH_COMMIT_DELAY_MS = 150;
function getViewState(key: string): IssueViewState {
try {
@ -174,6 +175,39 @@ interface IssuesListProps {
onUpdateIssue: (id: string, data: Record<string, unknown>) => void;
}
interface IssuesSearchInputProps {
initialValue: string;
onValueCommitted: (value: string) => void;
}
function IssuesSearchInput({ initialValue, onValueCommitted }: IssuesSearchInputProps) {
const [value, setValue] = useState(initialValue);
useEffect(() => {
setValue(initialValue);
}, [initialValue]);
useEffect(() => {
const timeoutId = window.setTimeout(() => {
onValueCommitted(value);
}, ISSUE_SEARCH_COMMIT_DELAY_MS);
return () => window.clearTimeout(timeoutId);
}, [value, onValueCommitted]);
return (
<div className="relative w-48 sm:w-64 md:w-80">
<Search className="pointer-events-none absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
<Input
value={value}
onChange={(e) => setValue(e.target.value)}
placeholder="Search issues..."
className="pl-7 text-xs sm:text-sm"
aria-label="Search issues"
/>
</div>
);
}
export function IssuesList({
issues,
isLoading,
@ -210,20 +244,12 @@ export function IssuesList({
const [assigneePickerIssueId, setAssigneePickerIssueId] = useState<string | null>(null);
const [assigneeSearch, setAssigneeSearch] = useState("");
const [issueSearch, setIssueSearch] = useState(initialSearch ?? "");
const [debouncedIssueSearch, setDebouncedIssueSearch] = useState(issueSearch);
const normalizedIssueSearch = debouncedIssueSearch.trim();
const normalizedIssueSearch = issueSearch.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);
useEffect(() => {
@ -235,6 +261,13 @@ export function IssuesList({
}
}, [scopedKey, initialAssignees]);
const handleIssueSearchCommit = useCallback((nextSearch: string) => {
startTransition(() => {
setIssueSearch(nextSearch);
});
onSearchChange?.(nextSearch);
}, [onSearchChange]);
const updateView = useCallback((patch: Partial<IssueViewState>) => {
setViewState((prev) => {
const next = { ...prev, ...patch };
@ -250,6 +283,7 @@ export function IssuesList({
],
queryFn: () => issuesApi.list(selectedCompanyId!, { q: normalizedIssueSearch, projectId, ...searchFilters }),
enabled: !!selectedCompanyId && normalizedIssueSearch.length > 0,
placeholderData: (previousData) => previousData,
});
const agentName = useCallback((id: string | null) => {
@ -333,19 +367,10 @@ export function IssuesList({
<Plus className="h-4 w-4 sm:mr-1" />
<span className="hidden sm:inline">New Issue</span>
</Button>
<div className="relative w-48 sm:w-64 md:w-80">
<Search className="pointer-events-none absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
<Input
value={issueSearch}
onChange={(e) => {
setIssueSearch(e.target.value);
onSearchChange?.(e.target.value);
}}
placeholder="Search issues..."
className="pl-7 text-xs sm:text-sm"
aria-label="Search issues"
/>
</div>
<IssuesSearchInput
initialValue={initialSearch ?? ""}
onValueCommitted={handleIssueSearchCommit}
/>
</div>
<div className="flex items-center gap-0.5 sm:gap-1 shrink-0">

32
ui/src/pages/Issues.tsx
View file

@ -1,4 +1,4 @@
import { useEffect, useMemo, useCallback, useRef } from "react";
import { useEffect, useMemo, useCallback } from "react";
import { useLocation, useSearchParams } from "@/lib/router";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { issuesApi } from "../api/issues";
@ -22,28 +22,20 @@ export function Issues() {
const initialSearch = searchParams.get("q") ?? "";
const participantAgentId = searchParams.get("participantAgentId") ?? undefined;
const debounceRef = useRef<ReturnType<typeof setTimeout>>(undefined);
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 trimmedSearch = search.trim();
const currentSearch = new URLSearchParams(window.location.search).get("q") ?? "";
if (currentSearch === trimmedSearch) return;
const url = new URL(window.location.href);
if (trimmedSearch) {
url.searchParams.set("q", trimmedSearch);
} else {
url.searchParams.delete("q");
}
const url = new URL(window.location.href);
if (trimmedSearch) {
url.searchParams.set("q", trimmedSearch);
} else {
url.searchParams.delete("q");
}
const nextUrl = `${url.pathname}${url.search}${url.hash}`;
window.history.replaceState(window.history.state, "", nextUrl);
}, 300);
}, []);
useEffect(() => {
return () => clearTimeout(debounceRef.current);
const nextUrl = `${url.pathname}${url.search}${url.hash}`;
window.history.replaceState(window.history.state, "", nextUrl);
}, []);
const { data: agents } = useQuery({