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:
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user