fix!: performance issues related to lucide-svelte and shadcn

package.json

@@ -12,6 +12,7 @@
 		"build:proto": "bunx protoc --ts_out ./src/lib/proto/ --proto_path protos protos/*"
 	},
 	"devDependencies": {
+		"@iconify-json/lucide": "^1.2.17",
 		"@sveltejs/adapter-auto": "^3.0.0",
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^4.0.0",
@@ -19,7 +20,7 @@
 		"bits-ui": "^1.0.0-next.64",
 		"clsx": "^2.1.1",
 		"globals": "^15.0.0",
-		"lucide-svelte": "^0.460.1",
+		"lucide-svelte": "^0.462.0",
 		"prettier": "^3.3.2",
 		"prettier-plugin-svelte": "^3.2.6",
 		"prettier-plugin-tailwindcss": "^0.6.5",
@@ -30,6 +31,7 @@
 		"tailwindcss": "^3.4.9",
 		"tailwindcss-animate": "^1.0.7",
 		"typescript": "^5.0.0",
+		"unplugin-icons": "^0.20.2",
 		"vite": "^5.0.3"
 	},
 	"dependencies": {

src/app.d.ts

@@ -1,3 +1,5 @@
+import 'unplugin-icons/types/svelte';
+
 // See https://svelte.dev/docs/kit/types#app.d.ts
 // for information about these interfaces
 declare global {

src/lib/components/groove/Queue.svelte

@@ -64,7 +64,7 @@
 </script>
 
 <form
-	class="flex h-full flex-col gap-1 overflow-y-auto pr-3"
+	class="flex h-full flex-col gap-1 overflow-y-auto"
 	method="POST"
 	use:enhance={submitPlayerAction}
 >

src/lib/components/groove/TrackListing.svelte

@@ -1,89 +1,37 @@
 <script lang="ts">
-	import { enhance } from '$app/forms';
 	import { getCoverUrl } from '$lib/covers';
-	import { getPlayerState } from '$lib/player.svelte';
-	import { AudioLines, Music2, ListMusic, ListEnd } from 'lucide-svelte';
-	import type { SubmitFunction } from '../../../routes/tracks/[hash]/$types';
 	import type { Track } from '$lib/proto/library';
-	import * as ContextMenu from '$lib/components/ui/context-menu';
-	import type { Action } from 'svelte/action';
+	import AudioLines from 'virtual:icons/lucide/audio-lines';
 
 	interface Props {
 		track: Track;
-		hideCover?: boolean;
-		action: Action;
+		currentlyPlaying?: boolean;
+		oncontextmenu?: (event: MouseEvent, hash: string) => any;
 	}
 
-	let { track, action, hideCover = false }: Props = $props();
-
-	let isOpen = $state(false);
-
-	const player = getPlayerState();
-
-	const submitPlayTrack: SubmitFunction = async () => {
-		return async ({ update, result }) => {
-			isOpen = false;
-
-			await update({
-				invalidateAll: false
-			});
-
-			if (result.type === 'success' && result.data && 'track' in result.data) {
-				player.queue = [];
-				player.currentlyPlaying = result.data.track ?? null;
-				player.progress = result.data.position;
-				player.isPaused = false;
-			}
-		};
-	};
-
-	const submitEnqueue: SubmitFunction = async () => {
-		return async ({ update, result }) => {
-			isOpen = false;
-
-			await update({
-				invalidateAll: false
-			});
-
-			if (result.type === 'success' && result.data && 'tracks' in result.data) {
-				player.queue = result.data.tracks;
-			}
-		};
-	};
-
-	function contextMenuItemClicked(e: MouseEvent) {
-		e.stopPropagation();
-	}
+	let { track, currentlyPlaying = false, oncontextmenu }: Props = $props();
 </script>
 
-<form
+<div
 	class="flex flex-col gap-3"
-	method="POST"
-	action="/tracks/{track.hash}?/play"
-	use:enhance={submitPlayTrack}
-	use:action
 	data-track-hash={track.hash}
+	oncontextmenu={(e) => oncontextmenu?.(e, track.hash)}
 >
-	<ContextMenu.Root bind:open={isOpen}>
-		<ContextMenu.Trigger>
 	<div class="relative aspect-square w-full">
 		<button
 			type="submit"
 			class="relative aspect-square h-full w-full overflow-hidden rounded-lg"
+			formaction="/tracks/{track.hash}?/play"
 		>
 			<img
 				class="aspect-square h-full w-full transform-gpu transition-all duration-150 hover:scale-105 hover:saturate-150"
-						src={hideCover ? undefined : getCoverUrl(track.hash)}
+				src={getCoverUrl(track.hash)}
 				alt={track.name}
 				width="640"
 				height="640"
 			/>
 		</button>
-
-				<div
-					class="absolute bottom-6 left-2 size-4 animate-pulse"
-					class:hidden={player.currentlyPlaying?.hash !== track.hash}
-				>
+		<div class="absolute bottom-6 left-2 size-4 animate-pulse" class:hidden={!currentlyPlaying}>
 			<AudioLines class="text-primary" />
 		</div>
 	</div>
@@ -91,59 +39,4 @@
 		<h3 class="font-medium leading-none">{track.name}</h3>
 		<p class="text-xs text-muted-foreground">{track.artistName}</p>
 	</div>
-		</ContextMenu.Trigger>
-		<ContextMenu.Content>
-			<ContextMenu.Item class="!p-0">
-				<form
-					class="flex w-full"
-					method="POST"
-					action="/tracks/{track.hash}?/play"
-					use:enhance={submitPlayTrack}
-				>
-					<button
-						type="submit"
-						class="flex w-full items-center px-2 py-1.5 focus:outline-0"
-						onclick={contextMenuItemClicked}
-					>
-						<Music2 class="mr-1 size-4" />
-						Play
-					</button>
-				</form>
-			</ContextMenu.Item>
-			<ContextMenu.Item class="!p-0">
-				<form
-					class="flex w-full"
-					method="POST"
-					action="/tracks/{track.hash}?/play-next"
-					use:enhance={submitEnqueue}
-				>
-					<button
-						type="submit"
-						class="flex w-full items-center px-2 py-1.5 focus:outline-0"
-						onclick={contextMenuItemClicked}
-					>
-						<ListMusic class="mr-1 size-4" />
-						Play Next
-					</button>
-				</form>
-			</ContextMenu.Item>
-			<ContextMenu.Item class="!p-0">
-				<form
-					class="flex w-full"
-					method="POST"
-					action="/tracks/{track.hash}?/add-to-queue"
-					use:enhance={submitEnqueue}
-				>
-					<button
-						type="submit"
-						class="flex w-full items-center px-2 py-1.5 focus:outline-0"
-						onclick={contextMenuItemClicked}
-					>
-						<ListEnd class="mr-1 size-4" />
-						Add to Queue
-					</button>
-				</form>
-			</ContextMenu.Item>
-		</ContextMenu.Content>
-	</ContextMenu.Root>
-</form>
+</div>

src/lib/search.svelte.ts

@@ -8,7 +8,7 @@ class SearchState {
 	filterTracks(tracks: Track[]) {
 		const fzf = new Fzf(tracks, {
 			selector: (t) => `${t.name} ${t.artistName}`,
-			sort: true,
+			sort: true
 		});
 		return fzf.find(this.input);
 	}

src/routes/tracks/+page.svelte

@@ -1,61 +1,150 @@
 <script lang="ts">
+	import { enhance } from '$app/forms';
 	import TrackListing from '$lib/components/groove/TrackListing.svelte';
+	import { getPlayerState } from '$lib/player.svelte';
 	import type { PageServerData } from './$types';
-	import { getSearchState } from '$lib/search.svelte';
-	import type { Action } from 'svelte/action';
-	import { SvelteSet as Set } from 'svelte/reactivity';
+	import type { SubmitFunction } from './[hash]/$types';
+	import * as ContextMenu from '$lib/components/ui/context-menu';
+	import Music2 from 'virtual:icons/lucide/music-2';
+	import ListMusic from 'virtual:icons/lucide/list-music';
+	import ListEnd from 'virtual:icons/lucide/list-end';
 
 	interface Props {
 		data: PageServerData;
 	}
 
-	const search = getSearchState();
+	const player = getPlayerState();
 
 	let { data }: Props = $props();
 
-	let container: HTMLDivElement;
-	let visibleTracks = $state<Set<string>>(new Set());
+	let contextMenuTarget = $state<string | null>(null);
 
-	const options: IntersectionObserverInit = {
-		// @ts-ignore
-		root: container,
-		rootMargin: "400px 0px 400px 0px",
-		threshold: 0.0,
+	const submitPlayTrack: SubmitFunction = async () => {
+		return async ({ update, result }) => {
+			contextMenuTarget = null;
+
+			await update({
+				invalidateAll: false
+			});
+
+			if (result.type === 'success' && result.data && 'track' in result.data) {
+				player.queue = [];
+				player.currentlyPlaying = result.data.track ?? null;
+				player.progress = result.data.position;
+				player.isPaused = false;
+			}
+		};
 	};
 
-	const callback: IntersectionObserverCallback = (entries, _observer) => {
-		entries.forEach(entry => {
-			const hash = entry.target.getAttribute('data-track-hash')!;
-			if (entry.isIntersecting) {
-				if (!visibleTracks.has(hash)) {
-					visibleTracks.add(hash);
-				}
-			}
-			else if (visibleTracks.has(hash)) {
-				visibleTracks.delete(hash);
-			}
+	const submitEnqueue: SubmitFunction = async () => {
+		return async ({ update, result }) => {
+			contextMenuTarget = null;
+
+			await update({
+				invalidateAll: false
 			});
+
+			if (result.type === 'success' && result.data && 'tracks' in result.data) {
+				player.queue = result.data.tracks;
+			}
+		};
 	};
 
-	const observer = new IntersectionObserver(callback, options);
-
-	const observe: Action = (node) => {
-		observer.observe(node);
+	function contextMenuItemClicked(e: MouseEvent) {
+		e.stopPropagation();
 	}
-
-	$effect(() => {
-		const firstFewTracks = search.filterTracks(data.tracks).slice(0,40);
-		firstFewTracks.forEach(e => {
-			visibleTracks.add(e.item.hash);
-		});
-	});
 </script>
 
-<div
+<form
+	method="POST"
 	class="grid grid-cols-2 gap-4 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 xl:grid-cols-7 2xl:grid-cols-8"
-	bind:this={container}
+	use:enhance={submitPlayTrack}
 >
-	{#each search.input.length > 0 ? (search.filterTracks(data.tracks).map(r => r.item) ?? []) : data.tracks as track (track.hash)}
-		<TrackListing {track} action={observe} hideCover={!visibleTracks.has(track.hash)}/>
+	{#each data.tracks as track}
+		<TrackListing
+			{track}
+			currentlyPlaying={player.currentlyPlaying?.hash === track.hash}
+			oncontextmenu={(e, hash) => {
+				e.stopPropagation();
+				e.preventDefault();
+				contextMenuTarget = hash;
+			}}
+		/>
 	{/each}
-</div>
+</form>
+
+<ContextMenu.Root
+	open={contextMenuTarget !== null}
+	onOpenChange={(value) => {
+		if (!value) {
+			contextMenuTarget = null;
+		}
+	}}
+>
+	<ContextMenu.Content
+		customAnchor={`div[data-track-hash="${contextMenuTarget!}"]`}
+		strategy="fixed"
+	>
+		<ContextMenu.Item class="!p-0">
+			<form
+				class="flex w-full"
+				method="POST"
+				action="/tracks/{contextMenuTarget!}?/play"
+				use:enhance={submitPlayTrack}
+			>
+				<button
+					type="submit"
+					class="flex w-full items-center px-2 py-1.5 focus:outline-0"
+					onclick={contextMenuItemClicked}
+				>
+					<Music2 class="mr-1 size-4" />
+					Play
+				</button>
+			</form>
+		</ContextMenu.Item>
+		<ContextMenu.Item class="!p-0">
+			<form
+				class="flex w-full"
+				method="POST"
+				action="/tracks/{contextMenuTarget!}?/play-next"
+				use:enhance={submitEnqueue}
+			>
+				<button
+					type="submit"
+					class="flex w-full items-center px-2 py-1.5 focus:outline-0"
+					onclick={contextMenuItemClicked}
+				>
+					<ListMusic class="mr-1 size-4" />
+					Play Next
+				</button>
+			</form>
+		</ContextMenu.Item>
+		<ContextMenu.Item class="!p-0">
+			<form
+				class="flex w-full"
+				method="POST"
+				action="/tracks/{contextMenuTarget!}?/add-to-queue"
+				use:enhance={submitEnqueue}
+			>
+				<button
+					type="submit"
+					class="flex w-full items-center px-2 py-1.5 focus:outline-0"
+					onclick={contextMenuItemClicked}
+				>
+					<ListEnd class="mr-1 size-4" />
+					Add to Queue
+				</button>
+			</form>
+		</ContextMenu.Item>
+	</ContextMenu.Content>
+</ContextMenu.Root>
+
+<svelte:window
+	oncontextmenu={(e) => {
+		e.preventDefault();
+
+		if (contextMenuTarget) {
+			contextMenuTarget = null;
+		}
+	}}
+/>

src/routes/tracks/[hash]/+page.server.ts

@@ -7,6 +7,7 @@ import type { PlayTrackResponse, Queue } from '$lib/proto/player';
 
 export const actions = {
 	play: async ({ params }) => {
+		try {
 			const client = new PlayerClient(protoTransport);
 
 			const response = await client.playTrack({
@@ -18,6 +19,10 @@ export const actions = {
 			}
 
 			return serializable<PlayTrackResponse>(response.response);
+		} catch (e) {
+			console.log('play error:');
+			console.log(e);
+		}
 	},
 	'add-to-queue': async ({ params }) => {
 		const client = new PlayerClient(protoTransport);

vite.config.ts

@@ -1,6 +1,12 @@
 import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
+import Icons from 'unplugin-icons/vite';
 
 export default defineConfig({
-	plugins: [sveltekit()]
+	plugins: [
+		sveltekit(),
+		Icons({
+			compiler: 'svelte'
+		})
+	]
 });