Improve collection items scrolling

[davelopez]

Requires #16725

We know the total number of items in a collection since they are immutable. We can then initialize the virtual scroller array with all the items as placeholders and then just fetch those that are missing real data. The direct benefit is that we can scroll and navigate to the end of the collection (or any point in the middle) much more smoothly.

This approach might be a bit naive though as with potentially huge collections we are creating a lot of items that will probably never be navigated to... but it is probably worth it.

We can observe the differences in scrolling behavior in the examples below with a modest collection containing 25k items.

Note: expanding a placeholder has been disabled.

Before

• Scrolling to the bottom of the collection is time-consuming and almost "impossible" for large collections.
• The scroll bar doesn't represent the actual size of the collection, so it keeps "popping" whenever new items get loaded.

CollectionScrollingBefore.mp4

After

• You can smoothly scroll to any point of the collection within seconds.
• The scrollbar matches the actual size of the collection, so moving it to the very bottom will take you directly to the bottom of the collection.

CollectionScrollingWithPlaceholders.mp4

How to test the changes?

• I've included appropriate automated tests.
• This is a refactoring of components with existing test coverage.

License

• I agree to license these and all my past contributions to the core galaxy codebase under the MIT license.

[davelopez]

This is finally ready for review.
I've updated the videos in the description using a collection with 25000 datasets and seems to work pretty smoothly on my local tests.

[mvdbeek]

Very minor: Don't you always know the element_index ? Similarly, could you require fetching to be a boolean and init it with true ?

[davelopez]

Good point, making element_index optional here was just to be able to make it work with Array.fill but now that I look at it we still need to map the index to each placeholder so making it required and using simple for loop would be even better. I'll go and do that 👍

About making the fetching boolean default to true... I'm not so sure, maybe default them to false, I think not even setting it by default will save a tiny bit of memory if you have a huge number of elements that you would never navigate to 😅

[mvdbeek]

Clever, I like it!

[bgruening]

That works super smooth!

[bgruening]

Thanks @davelopez