perf(web-player): cut down the searches the explore page fires

Typing in the search box navigated on every pause, so single letters and
round-trips back to the same term each triggered a full YouTube search and a
new grid of covers. The debounce is longer, a term identical to the current
one no longer navigates, YouTube is only queried past a minimum length, and
the infinite scroll waits until the sentinel is closer before pulling a page.
This commit is contained in:
2026-07-20 17:38:37 +02:00
parent 470d24c9ca
commit 9e4388332f
4 changed files with 19 additions and 8 deletions
@@ -11,7 +11,7 @@
import Input from '$lib/components/ui/Input.svelte';
import EmptyState from '$lib/components/ui/EmptyState.svelte';
import InfiniteScroll from '$lib/components/ui/InfiniteScroll.svelte';
import { EXPLORE_PAGE_SIZE } from '$lib/config';
import { EXPLORE_PAGE_SIZE, SEARCH_DEBOUNCE_MS } from '$lib/config';
import { hueFor } from '$lib/theme/color';
import type { YouTubeSong } from '$lib/types';
import TrackTile from '$lib/components/TrackTile.svelte';
@@ -94,12 +94,14 @@
const value = (event.currentTarget as HTMLInputElement).value;
clearTimeout(searchTimeout);
searchTimeout = setTimeout(() => {
goto(buildHref(value.trim()), {
const term = value.trim();
if (term === data.query) return;
goto(buildHref(term), {
keepFocus: true,
replaceState: true,
noScroll: true
});
}, 350);
}, SEARCH_DEBOUNCE_MS);
}
function togglePlay(index: number) {