refactor: improve virtual scrolling implementation

should be far more performant and less buggy now hopefully

closes #8

src/js/events.js

···
 		selectedClass: CLASSES.SELECTED,
 	});
 
+	// initialize virtual scrolling for queue
+	initVirtualScroll();
+
 	// setup settings modal
 	setupSettings();
 

src/js/image-cache.js

···
 
 // check if art is enabled in settings
 function shouldShowArt(artType, artId) {
-	return state.settings[artType] > 0 ? artId : null;
+	const setting = state.settings[artType];
+	return setting > 0 ? artId : null;
 }
 
 // load image with appropriate device density
···
 			? [url1x, state.api.getCoverArtUrl(artId, size1x * 2)]
 			: [url1x];
 
-	const setImage = (srcs) => {
-		img.src = srcs[0];
-		if (srcs.length > 1) img.srcset = `${srcs[0]} 1x, ${srcs[1]} 2x`;
-	};
-
 	// sync cache check
 	const cached = imageCache.cachedUrls(urls);
 	if (cached) {
-		setImage(cached);
+		img.src = cached[0];
+		if (cached.length > 1) img.srcset = `${cached[0]} 1x, ${cached[1]} 2x`;
 		return;
 	}
 
 	// async lazy load on viewport entry
-	const loadImages = async () => {
+	imageCache.observeImage(img, async () => {
 		try {
 			const srcs = await Promise.all(urls.map((url) => imageCache.get(url)));
-			setImage(srcs);
+			img.src = srcs[0];
+			if (srcs.length > 1) img.srcset = `${srcs[0]} 1x, ${srcs[1]} 2x`;
 		} catch (err) {
 			// network error, img shows placeholder
 		}
-	};
-
-	imageCache.observeImage(img, loadImages);
+	});
 }

src/js/queue.js

···
 	}
 }
 
-// update queue display, highlight current track, and save state
-function updateQueue(updateDisplay = true) {
-	if (updateDisplay) updateQueueDisplay();
+// update queue display and save state
+function updateQueue() {
+	updateQueueDisplay();
 	saveQueue();
 }
 
···
 	song: (s) => [s],
 };
 
-// add songs to queue (with optional insertNext mode)
+// add songs to queue
 async function addToQueue(fetcher, songExtractor, insertNext = false) {
 	const songs = await songExtractor(await fetcher());
 	if (insertNext) {
···
 // virtual scrolling state with dynamic row height measurement
 const VIRTUAL_SCROLL = {
 	rowHeight: null,
-	buffer: 4,
+	buffer: 16,
 	container: null,
 	visibleStart: 0,
 	visibleEnd: 0,
-	initialized: false,
-	measured: false,
-	rowCache: new Map(),
+	wrapper: null,
 	scrollScheduled: false,
+	measurementScheduled: false,
 	SPACER_CLASS: "virtual-spacer",
 };
 
-// reset cached measurements when layout changes
 function resetVirtualScrollMeasurements() {
 	VIRTUAL_SCROLL.rowHeight = null;
-	VIRTUAL_SCROLL.measured = false;
-	VIRTUAL_SCROLL.rowCache.clear();
 }
 
 // setup scroll and resize listeners
 function initVirtualScroll() {
-	if (VIRTUAL_SCROLL.initialized) return;
-	VIRTUAL_SCROLL.initialized = true;
+	if (VIRTUAL_SCROLL.container) return;
 
 	VIRTUAL_SCROLL.container = document.querySelector("main");
 	if (!VIRTUAL_SCROLL.container) return;
 
+	VIRTUAL_SCROLL.wrapper = ui.queueList;
+
 	VIRTUAL_SCROLL.container.addEventListener("scroll", handleVirtualScroll, {
 		passive: true,
 	});
 	window.addEventListener("resize", () => {
-		resetVirtualScrollMeasurements();
-		handleVirtualScroll(true);
+		handleVirtualScroll(false);
 	});
 }
 
···
 	if (!VIRTUAL_SCROLL.rowHeight) {
 		return { start: 0, end: state.queue.length };
 	}
+
+	const rowHeight = VIRTUAL_SCROLL.rowHeight;
 	return {
 		start: Math.max(
 			0,
-			Math.floor(scrollTop / VIRTUAL_SCROLL.rowHeight) - VIRTUAL_SCROLL.buffer,
+			Math.floor(scrollTop / rowHeight) - VIRTUAL_SCROLL.buffer,
 		),
 		end: Math.min(
 			state.queue.length,
-			Math.ceil((scrollTop + viewportHeight) / VIRTUAL_SCROLL.rowHeight) +
+			Math.ceil((scrollTop + viewportHeight) / rowHeight) +
 				VIRTUAL_SCROLL.buffer,
 		),
 	};
 }
 
-// update visible rows on scroll (throttled with requestAnimationFrame)
+// update visible rows on scroll
 function handleVirtualScroll(forceRender = false) {
 	if (!VIRTUAL_SCROLL.container) return;
 
···
 	});
 }
 
-// render visible rows and spacers, measure actual row height
+// render visible rows with spacers
 function renderVirtualRows(forceRender = true) {
-	const { visibleStart, visibleEnd } = VIRTUAL_SCROLL;
+	const { visibleStart, visibleEnd, wrapper } = VIRTUAL_SCROLL;
+	const rowHeight = VIRTUAL_SCROLL.rowHeight || 0;
 
-	for (const [idx, row] of VIRTUAL_SCROLL.rowCache.entries()) {
-		if (idx < visibleStart || idx >= visibleEnd) {
-			row.remove();
-			VIRTUAL_SCROLL.rowCache.delete(idx);
-		}
-	}
+	// spacer rows for unrendered content
+	const topSpacer = document.createElement("tr");
+	topSpacer.style.height = `${visibleStart * rowHeight}px`;
+	topSpacer.classList.add(VIRTUAL_SCROLL.SPACER_CLASS);
 
-	const newContent = [];
-
-	// create spacer row (invisible, used for scroll height)
-	const createSpacer = (rowCount) => {
-		const spacer = document.createElement("tr");
-		spacer.style.height = `${rowCount * VIRTUAL_SCROLL.rowHeight}px`;
-		spacer.classList.add(VIRTUAL_SCROLL.SPACER_CLASS);
-		return spacer;
-	};
-
-	if (visibleStart > 0) newContent.push(createSpacer(visibleStart));
+	const bottomSpacer = document.createElement("tr");
+	const remainingRows = state.queue.length - visibleEnd;
+	bottomSpacer.style.height = `${remainingRows * rowHeight}px`;
+	bottomSpacer.classList.add(VIRTUAL_SCROLL.SPACER_CLASS);
 
+	// collect rows to render
+	const newRows = [topSpacer];
 	for (let idx = visibleStart; idx < visibleEnd; idx++) {
-		let row = VIRTUAL_SCROLL.rowCache.get(idx);
-		if (!row) {
-			row = createQueueRow(state.queue[idx], idx);
-			VIRTUAL_SCROLL.rowCache.set(idx, row);
-		}
-		newContent.push(row);
+		newRows.push(createQueueRow(state.queue[idx], idx));
 	}
-
-	const remainingRows = state.queue.length - visibleEnd;
-	if (remainingRows > 0) newContent.push(createSpacer(remainingRows));
+	newRows.push(bottomSpacer);
 
-	ui.queueList.replaceChildren(...newContent);
+	wrapper.replaceChildren(...newRows);
 	updateSelectionUI();
 
-	if (forceRender && !VIRTUAL_SCROLL.measured && visibleStart < visibleEnd) {
+	// schedule measurement after structural changes
+	if (forceRender && !VIRTUAL_SCROLL.measurementScheduled) {
+		VIRTUAL_SCROLL.measurementScheduled = true;
 		requestAnimationFrame(() => {
-			const firstRow = ui.queueList.querySelector(
-				`tr:not(.${VIRTUAL_SCROLL.SPACER_CLASS})`,
-			);
-			if (firstRow?.offsetHeight > 0) {
-				const measured = firstRow.offsetHeight;
-				if (measured !== VIRTUAL_SCROLL.rowHeight) {
-					VIRTUAL_SCROLL.rowHeight = measured;
-					const newRange = calculateVisibleRange(
-						VIRTUAL_SCROLL.container.scrollTop,
-						VIRTUAL_SCROLL.container.clientHeight,
-					);
-					if (
-						newRange.start !== VIRTUAL_SCROLL.visibleStart ||
-						newRange.end !== VIRTUAL_SCROLL.visibleEnd
-					) {
-						VIRTUAL_SCROLL.visibleStart = newRange.start;
-						VIRTUAL_SCROLL.visibleEnd = newRange.end;
-						renderVirtualRows(false);
-						highlightCurrentTrack();
+			if (visibleStart < visibleEnd) {
+				const firstRow = wrapper.querySelector(
+					`tr:not(.${VIRTUAL_SCROLL.SPACER_CLASS})`,
+				);
+				if (firstRow?.offsetHeight > 0) {
+					const measured = firstRow.offsetHeight;
+					if (VIRTUAL_SCROLL.rowHeight !== measured) {
+						VIRTUAL_SCROLL.rowHeight = measured;
+						const newRange = calculateVisibleRange(
+							VIRTUAL_SCROLL.container.scrollTop,
+							VIRTUAL_SCROLL.container.clientHeight,
+						);
+						if (
+							newRange.start !== VIRTUAL_SCROLL.visibleStart ||
+							newRange.end !== VIRTUAL_SCROLL.visibleEnd
+						) {
+							const oldRowCount =
+								VIRTUAL_SCROLL.visibleEnd - VIRTUAL_SCROLL.visibleStart;
+							const newRowCount = newRange.end - newRange.start;
+							const rowCountDiff = Math.abs(newRowCount - oldRowCount);
+							// only re-render if visible row count changed significantly (more than buffer)
+							if (rowCountDiff > VIRTUAL_SCROLL.buffer / 2) {
+								VIRTUAL_SCROLL.visibleStart = newRange.start;
+								VIRTUAL_SCROLL.visibleEnd = newRange.end;
+								renderVirtualRows(false);
+							}
+						}
 					}
 				}
 			}
-			VIRTUAL_SCROLL.measured = true;
+			VIRTUAL_SCROLL.measurementScheduled = false;
+			highlightCurrentTrack();
 		});
+	} else {
+		highlightCurrentTrack();
 	}
 }
 
-// clear cache and reset height measurement when queue changes
+// update queue display and re-render with fresh visible range
 function updateQueueDisplay() {
 	ui.queueCount.textContent = state.queue.length;
-	resetVirtualScrollMeasurements();
-	initVirtualScroll();
 	handleVirtualScroll(true);
 }
 
···
 
 	clearSelection();
 	updateQueue();
-	// ensure highlight applies with correct adjusted index
 	highlightCurrentTrack();
 }
 
···
 		state.queueIndex = state.queue.indexOf(currentTrack);
 	}
 
-	updateQueueDisplay();
+	updateQueue();
 }
 
 // remove all items from queue
···
 	},
 ];
 
+// set cover art cell content
+function setQueueCoverArt(cell, song) {
+	cell.replaceChildren();
+	const songArtId = shouldShowArt("artSong", song.coverArt);
+	const size = state.settings.artSong;
+	
+	if (size > 0) {
+		// create wrapper to reserve space for image before it loads
+		const wrapper = document.createElement("div");
+		wrapper.style.width = `${size}px`;
+		wrapper.style.height = `${size}px`;
+		wrapper.style.flexShrink = "0";
+		wrapper.style.overflow = "hidden";
+		
+		const img = document.createElement("img");
+		img.alt = "cover";
+		img.className = CLASSES.QUEUE_COVER;
+		img.style.width = "100%";
+		img.style.height = "100%";
+		
+		wrapper.appendChild(img);
+		cell.appendChild(wrapper);
+		
+		// load actual image if art should be shown
+		if (songArtId) {
+			loadCachedImage(img, songArtId, "artSong");
+		}
+	}
+}
+
 // create table row element for a song in queue
 function createQueueRow(song, idx) {
 	const tr = document.createElement("tr");
 	tr.draggable = true;
 	tr.setAttribute(DATA_ATTRS.INDEX, idx);
 	tr.classList.toggle("stripe", idx % 2 === 1);
-
-	// helper to create and append text cell
-	const createTextCell = (content) => {
-		const cell = document.createElement("td");
-		cell.textContent = content;
-		tr.appendChild(cell);
-	};
+	tr.dataset.songId = song.id; // for event handling
 
 	// cover art cell
 	const coverCell = document.createElement("td");
-	const songArtId = shouldShowArt("artSong", song.coverArt);
-	if (songArtId) {
-		const img = document.createElement("img");
-		img.alt = "cover";
-		img.className = CLASSES.QUEUE_COVER;
-		loadCachedImage(img, songArtId, "artSong");
-		coverCell.appendChild(img);
-	}
+	setQueueCoverArt(coverCell, song);
 	tr.appendChild(coverCell);
 
 	// text cells
+	const createTextCell = (content) => {
+		const cell = document.createElement("td");
+		cell.textContent = content;
+		tr.appendChild(cell);
+	};
 	createTextCell(song.title);
 	createTextCell(song.artist || "");
 	createTextCell(song.album || "");