👁️
dont debounce on external navigation
+8
-6
+8
-6
src/routes/cards/index.tsx
+8
-6
src/routes/cards/index.tsx
···
185
185
function CardsPage() {
186
186
const navigate = Route.useNavigate();
187
187
const search = Route.useSearch();
188
-
const { value: debouncedSearchQuery, isPending: isDebouncing } = useDebounce(
189
-
search.q || "",
190
-
400,
191
-
);
188
+
const {
189
+
value: debouncedSearchQuery,
190
+
isPending: isDebouncing,
191
+
flush: flushDebounce,
192
+
} = useDebounce(search.q || "", 400);
192
193
const searchInputRef = useRef<HTMLInputElement>(null);
193
194
const lastSyncedQuery = useRef<string>(search.q || "");
194
195
···
199
200
if (lastSyncedQuery.current === urlQuery) {
200
201
return;
201
202
}
202
-
// External change - sync input
203
+
// External change - sync input and skip debounce
203
204
if (searchInputRef.current) {
204
205
searchInputRef.current.value = urlQuery;
205
206
}
206
207
lastSyncedQuery.current = urlQuery;
207
-
}, [search.q]);
208
+
flushDebounce();
209
+
}, [search.q, flushDebounce]);
208
210
const listRef = useRef<HTMLDivElement>(null);
209
211
const columns = useColumns();
210
212
const hasRestoredScroll = useRef(false);