Skip to content

Long lists and the track cache

Lazy rows. nessie-track-list draws the first 100 rows. An IntersectionObserver watches a marker after the last drawn row. When it comes within 1500 px of view, the list adds 200 more rows with insertAdjacentHTML, so rows already drawn are left alone. A row's ⋮ menu is only built when it's opened. Together these keep a 2,000-song playlist as fast as a short one.

Paging. Library lists (Songs, Albums) show pages of 50 (48 for grids) with ?page= in the address. A playlist instead loads its first page of entries, then fetches the rest in the background and adds them with list.appendItems().

Track cache. The queue and the player state only carry track ids. track-cache.js keeps a Map of every track any list has shown (remember()), so the queue can show titles straight away. getTrack(id) only goes to the server for ids it hasn't seen.