Avoid flushSync on reverse lists / allow "starting at bottom"

[natew]

So first I just love virtua it works wonderfully well.

I've been profiling my app a bit and found that the flushSync calls during intiial render are really hurting performance though.

Some of it just seems to happen on it's own, but a good chunk comes from needing to scrollToIndex because its reversed.

I'd be happy to help contribute here, but would like to find a way to get rid of as many flushSync as possible.

[inokawa]

Hi, thank you for raising this issue.
I agree with that some of flushSync calls should be removed. It's also causing other issue (#470).

Currently flushSync has 2 purposes, to reduce blank screen on huge scroll

virtua/src/core/store.ts

Line 304 in 5d5ef07

shouldSync = distance > viewportSize;

and to avoid layout shift on resize, especially when scrolling up.

virtua/src/core/store.ts

Line 390 in 5d5ef07

shouldSync = true;

They might be overused. We can remove some of them if we doesn't see any visual difference after removing it (and E2Es should be passed). Maybe _scrollMode or other flags are usable to avoid calling flushSync in some specific situation.

[natew]

I've been testing removing it, but unfortunately I can't get the reverse list to scroll to the bottom without it consistently, even if i add various delays and re-call scrollToIndex a few times, it seems to never be fully accurate. I'll have to check into a more precise change. We have content that sometimes is very tall or short which probably doesn't help.

[natew]

Hm actually my problem goes deeper, it seems reverse mode doesn't load the last messages until after you call scrollToBottom, but then they load and change size and that means I need to retry scrolling to the bottom. Seems a better strategy would be to load the last messages up-front for reverse.

[inokawa]

Thanks for the report. I'll look into it myself when I have a time.

it seems reverse mode doesn't load the last messages until after you call scrollToBottom

It seems like a similar issue to #415 . Maybe we need a new prop for initial scroll on mount, or should defer initial render when scrollToIndex is called on mount (inside of useLayoutEffect? not sure it's possible).