[BUG] scrollSeekConfiguration with reversed list: flickering

[eliasws]

Describe the bug
When using scrollSeekConfiguration with a reversed list the scrollSeekConfiguration.onEnter callback is called directly on the first render with a high velocity (probably height of the list) which causes the ScrollSeekPlaceholder to be shown. It seems that this was introduced in version 0.21.0-alpha.1.

Reproduction
https://codesandbox.io/s/react-virtuoso-scrolling-issue-forked-xis50?file=/src/App.js

To Reproduce

1. Reload the page
2. Check console, scrollSeekConfiguration.onEnter gets called with a velocity of 1446
3. Items render -> then the ScrollSeekPlaceholder gets rendered for split second -> Items render

Expected behaviour
scrollSeekConfiguration.onEnter should not be called on first render without actual scrolling

Screenshots

Desktop (please complete the following information):

• MacOS, Android
• chrome, chrome mobile

Additional context
isScrolling gets also called on first render.

[petyosi]

Confirming that this is a bug, The scrollSeek system should wait for the didMount observable.

[eliasws]

I tried to implement it and create a PR. At least in this case didMount seems to be always true (so would not have any effect):

pipe(
    scrollVelocity,
    withLatestFrom(scrollSeekConfiguration, isSeeking, rangeChanged, didMount),
    filter(([_, config]) => !!config),
    map(([speed, config, isSeeking, range, didMount]) => {
      const { exit, enter } = config as ScrollSeekConfiguration
      console.log("DID MOUNT", didMount);
      if (isSeeking) {
        if (exit(speed, range)) {
          return false
        }
 // ........

[petyosi]

True. It might have to wait for this flag: https://github.com/petyosi/react-virtuoso/blob/master/src/initialTopMostItemIndexSystem.ts#L10

[eliasws]

scrolledToInitialItem has the same problem :) (always true).

Seems like

react-virtuoso/src/initialTopMostItemIndexSystem.ts

Line 34 in 392b9c8

u.publish(scrolledToInitialItem, true)

is firing to fast.

For now i just disabled the scrollSeek.

[petyosi]

This flag will turn true after the initial destination has been reached. My understanding is that you are trying to avoid that call.

At any case, I will look at that at some point.

[eliasws]

@petyosi FYI, just checked: Same happens with endless scroll ("prepending-items"); the velocity "jumps" for a moment when startReached is called and the new items are prepended.

[petyosi]

That's understandable, based on how velocity and prepending work. Scrolling is readjusted to accommodate the prepended items.

[phenry20]

Any updates?

[tomholford]

Tried to use scrollSeek + reverse endless and got the same results. Ended up disabling it.

In the meantime, is there a callback that can be hooked into to get the current scroll velocity? The goal is to adjust the fetch page size - if the user is scrolling quickly, we will fetch more data to pre-pend to the list

[petyosi]

@tomholford you can hook up to the scrollerRef, listen to scrollTop changes and calculate the velocity.

[tomholford]

@tomholford you can hook up to the scrollerRef, listen to scrollTop changes and calculate the velocity.

Great suggestion, will give this a shot. Thanks!