Lots of idle time when loading 6.5k items

[dplatt-xavier]

It's currently taking me 5+ minutes to load a list of around 6.5k items.

<RecycleScroller
    class="scroller"
    :item-size="80"
    :items="myItems" // 6.5k objects
    key-field="id"
    v-slot="{ item }"
    :prerender="5"
>
    {{ item.name }}
</RecycleScroller>

The network request to retrieve the data is currently taking 8s in my local environment (obviously some performance issues here to get to for myself) but that doesn't really explain where the rest of the 5 minutes is coming from. I have observed the performance tab and recorded that there is a lot of "idle" time and a lot of time taken up by "GC events".

I can see that this can support up to 500k items, but with 5 minutes of loading for 6.5k items, I don't think that would be possible.

In this time, the screen is essentially frozen from about 15s or so, until the paint on the screen.

Is there anything that could be causing such a slow load please?

[Akryum]

Looks like the virtual scroller is trying to render everything at once. Try setting a fixed height in pixels to it to troubleshoot.

[dplatt-xavier]

Is :item-size="80" setting the height to a fixed size?

[Akryum]

It sets the height of the items, but if the scroller doesn't have height, it will try to render everything since it's not scrolling.