JS Code in items slow down page scrolling

[Amerlander]

Having list items with heavy js usage on initialization will lead to a buggy scroll experience.

As example I had a VirtualList with 8 columns and each item was using some jquery code to call a function from semantic ui:
window.$(cardItem).children('.inlinepopup').popup();

The popup was called when the item got initialized the first time, but when I scrolled down and up it doesnt. Therefore I wrapped it in a onMount function. That lead to a very laggy scroll experience.

I worked arround this by introducing a finished variable, which tells if the user is still scrolling or has finished/paused for at least 800ms:

VirtualList.svelte

export let finished = true;
let lastUpdate = Date.now();

async function handle_scroll() {
		finished = false;
// … whole existing handle_scroll() function here
		lastUpdate = Date.now();
}

$: {
        if(!finished && (lastUpdate + 800) < Date.now() ) {
            finished = true;
        } else if(!finished) {
            setTimeout(() => {
                lastUpdate = lastUpdate - 1
            }, 900);
        }
}

App.svelte

<VirtualList {items} let:item bind:finished>
	<ListItem  {item} {finished} />
</VirtualList>

ListItem.svelte

    export let finished;
    let initialized = false;

    $: {
        if(!initialized && finished ) {
            window.$(cardItem).children('.inlinepopup').popup();
            initialized = true;
        }
    }

If this is a good idea, I could open an PR.
Edit: maybe finished should be isScrolling instead with inverse boolean.