startReached called multiple times

When the response to prepend new items to an inverse list takes less than about ~200ms, there is a chance that startReached will get called multiple times. Visually this causes the scrollbar to flicker. Behind the scenes, another startReached callback is fired, and more data is loaded.

Check out this repo to investigate. It’s much easier to reproduce locally than on codesandbox.

Edit: My current workaround is to check if startReached was called within the last 200ms; and, if so, then wait before fetching. This isn’t an optimal solution as it doesn’t work 100% of the time and the user shouldn’t have to wait unnecessarily because of fast responses. This approach doesn’t work as more data is still loaded, just later.

[petyosi]

This is tricky, I think the changes applied in the commit above affect it, but even with them, I managed to reproduce the issue every once in a while in Edge / Win10. Chrome seems to be better.

Windows browser scroll kinetics gives me a horrible headache. The root cause of the problem is that the Windows engines discard scrollBy calls if the user is currently scrolling - this prevents the readjustment of the scroll location.

I recommend that you debounce the loading logic further up to your case to play it safe.

Hope this helps. I hope that I can figure out more reliable scroll compensation for windows at some point, but that’s the best I can come up with for now.

[dannycarrera]

Are you sure that startReached is called multiple times?

Yes. I checked the api endpoint as well and saw 2 requests. Also, the 2nd request is not just the first request being sent twice. The 2nd request is asking for the next batch, so it’s being called after the first request’s data is loaded.

Also, do you reproduce it in this sandbox?

Yes.

Edit: could be windows related, let me know what OS you use. If possible, please check on a Mac.

Here are my findings for reproducibility:

Browser	Windows 10	Mac
Chrome	yes. high frequency	no
Firefox	yes. high frequency	yes. low frequency

It appears to occur more frequently if you slow the scrolling down as you approach the top.