As soon as you render more than ~200 tracks you feel the browser freezing on an M2 MacBook. This is primarily due to 1) the amount of javascript work each <r4-track> and its child components do, and 2) the CSS layout for so many elements.
This PR
conditionally renders the dialogs inside r4-track, only when the menu is actually open (this makes the difference)
uses content:visibility css trick on r4-list-item to allow the browser to optimize rendering depending on viewport
The branch also touches on the query, filter and search components to eliminate double-fetching.
As soon as you render more than ~200 tracks you feel the browser freezing on an M2 MacBook. This is primarily due to 1) the amount of javascript work each
<r4-track>
and its child components do, and 2) the CSS layout for so many elements.This PR
content:visibility
css trick on r4-list-item to allow the browser to optimize rendering depending on viewportThe branch also touches on the query, filter and search components to eliminate double-fetching.