QVirtualScroll remains in placeholder mode until scroll halts during momentum scroll

[aaliddell]

What happened?

This has been covered somewhat before, such as here, but the QVirtualScroll has a problem whereby the content will be stuck on the placeholder stripes while a scroll is in its momentum phase (between finger being lifted from screen and content stopping moving). This is particularly painful on mobile, where there may be no content rendered for multiple seconds as the target slows down. This seriously harms discoverability when using these elements, as a user has to keep manually stopping the scroll to view content in a reasonable time.

In the previous issue this was raised in linked above, this was claimed to be unsolvable due to scroll events not being fired during the momentum phase. However, other virtual scroll libraries do a far better job in this regard. For example, picking the first Vue virtual scroller from a Google search: try momentum scrolling here and see that content is rendered correctly during the momentum phase and the coordinates continue to update in the upper right.

The fix for this appears to be using a requestAnimationFrame callback to actively monitor the offset of the scroll target, rather than relying solely on scroll events. This allows you to respond to changes in the scroll position as fast as the browser allows and similarly continues to work during the scroll momentum phase where scroll events fail.

Now, there is the obvious concern that polling the scroll target offset increases the CPU load, so you may wish to have some sort of adaptive polling whereby you only poll with requestAnimationFrame when a scroll event has recently been fired and then stop active polling when a certain condition is met: e.g. callback has seen same offset twice in a row or otherwise quantify the max time a momentum scroll lasts.

What did you expect to happen?

Content continues to render during scroll momentum phase

Reproduction URL

https://jsfiddle.net/3vyzqe9t/

How to reproduce?

Go to https://quasar.dev/vue-components/virtual-scroll on a mobile device (or anything with momentum scrolling) and scroll the demos. The content will be placeholder stripes during the scroll momentum phase. When content stops moving, the render will finally show the correct data.

Flavour

UMD

Areas

Components (quasar)

Platforms/Browsers

Firefox, Chrome, Safari, iOS

Quasar info output

Quasar CLI is not installed. This is present in latest version though, as linked above

Relevant log output

N/A

Additional context

No response

[github-actions]

Hi @aaliddell! 👋

It looks like you provided an invalid or unsupported reproduction URL.
Do not use any service other than Codepen, jsFiddle, StackBlitz, Codesandbox, and GitHub.
Make sure the URL you provided is correct and reachable. You can test it by visiting it in a private tab, another device, etc.
Please edit your original post above and provide a valid reproduction URL as explained.

Without a proper reproduction, your issue will have to get closed.

Thank you for your collaboration. 👏

[aaliddell]

I have copied your QVirtualScroll demo verbatim to a jsfiddle, it shows the problem just fine either there or on your docs site as originally linked

[skmbr]

I would love to see these sorts of improvements too.

I've had loads of complaints from users that the parts of the app using QVirtualScroll are "slow" or "laggy".

I was convinced I had some sort of performance issue and spent ages trying different things to speed things up, then suddenly realised it was all loading in as soon as I stopped the inertia scrolling myself!

This would be a huge improvement as at the moment it makes my app look unresponsive.

[skmbr]

@aaliddell Thanks for the pointer to Vue-virtual-scroll! It was fairly trivial to swap out with QVirtualScroll and it makes a huge difference.

Obviously I'd rather avoid additional libraries, but I think I'm going to go with that until QVS can implement the same sort of approach.