From 8af7840f5cbf6c9c52392f8810052a7f036eac24 Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Mon, 20 Jul 2026 17:38:37 +0200
Subject: [PATCH] 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.
---
 .../src/lib/components/ui/InfiniteScroll.svelte     |  3 ++-
 web-player/src/lib/config.ts                        |  3 +++
 web-player/src/routes/(app)/explore/+page.server.ts | 13 +++++++++----
 web-player/src/routes/(app)/explore/+page.svelte    |  8 +++++---
 4 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/web-player/src/lib/components/ui/InfiniteScroll.svelte b/web-player/src/lib/components/ui/InfiniteScroll.svelte
index 8dc8e09..3aed31c 100644
--- a/web-player/src/lib/components/ui/InfiniteScroll.svelte
+++ b/web-player/src/lib/components/ui/InfiniteScroll.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import LoaderCircle from '@lucide/svelte/icons/loader-circle';
+	import { INFINITE_SCROLL_ROOT_MARGIN } from '$lib/config';
 
 	interface Props {
 		onLoadMore: () => void;
@@ -8,7 +9,7 @@
 		rootMargin?: string;
 	}
 
-	let { onLoadMore, hasMore, loading, rootMargin = '600px' }: Props = $props();
+	let { onLoadMore, hasMore, loading, rootMargin = INFINITE_SCROLL_ROOT_MARGIN }: Props = $props();
 
 	let sentinel = $state<HTMLDivElement>();
 	let visible = $state(false);
diff --git a/web-player/src/lib/config.ts b/web-player/src/lib/config.ts
index 3aaf10c..832125e 100644
--- a/web-player/src/lib/config.ts
+++ b/web-player/src/lib/config.ts
@@ -1,3 +1,6 @@
 export const EXPLORE_PAGE_SIZE = 27;
+export const SEARCH_DEBOUNCE_MS = 450;
+export const SEARCH_MIN_LENGTH = 2;
+export const INFINITE_SCROLL_ROOT_MARGIN = '300px';
 export const HOME_LATEST_PAGE_SIZE = 12;
 export const YOUTUBE_FILLER_LIMIT = 27;
diff --git a/web-player/src/routes/(app)/explore/+page.server.ts b/web-player/src/routes/(app)/explore/+page.server.ts
index dbcefdb..359e411 100644
--- a/web-player/src/routes/(app)/explore/+page.server.ts
+++ b/web-player/src/routes/(app)/explore/+page.server.ts
@@ -2,7 +2,11 @@ import type { PageServerLoad, Actions } from './$types';
 import { createApiClient, requireUser, unwrapOrError } from '$lib/server/api';
 import { fetchYoutubeFiller } from '$lib/server/youtube';
 import { addTrackAction, addYouTubeToPlaylistAction } from '$lib/server/playlistActions';
-import { EXPLORE_PAGE_SIZE as PAGE_SIZE, YOUTUBE_FILLER_LIMIT } from '$lib/config';
+import {
+	EXPLORE_PAGE_SIZE as PAGE_SIZE,
+	SEARCH_MIN_LENGTH,
+	YOUTUBE_FILLER_LIMIT
+} from '$lib/config';
 
 export const load: PageServerLoad = async ({ url, locals, fetch }) => {
 	const query = url.searchParams.get('q')?.trim() ?? '';
@@ -15,9 +19,10 @@ export const load: PageServerLoad = async ({ url, locals, fetch }) => {
 		params: { query: { name: query || undefined, pageNumber: page, pageSize: PAGE_SIZE } }
 	});
 
-	const searchPromise = query
-		? api.GET('/youtube/search', { params: { query: { query } } })
-		: Promise.resolve(null);
+	const searchPromise =
+		query.length >= SEARCH_MIN_LENGTH
+			? api.GET('/youtube/search', { params: { query: { query } } })
+			: Promise.resolve(null);
 
 	const playlistsPromise = api.GET('/playlists/users/{userId}', {
 		params: { path: { userId: user.sub }, query: { pageNumber: 1, pageSize: 50 } }
diff --git a/web-player/src/routes/(app)/explore/+page.svelte b/web-player/src/routes/(app)/explore/+page.svelte
index 986906e..7682fb5 100644
--- a/web-player/src/routes/(app)/explore/+page.svelte
+++ b/web-player/src/routes/(app)/explore/+page.svelte
@@ -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) {