Infinite-scrolling example not working using the scrollbar

[rkulinski]

What version of Remix are you using?

1.6.4

Steps to Reproduce

Open examples/infinte-scrolling and select page/simple.

Expected Behavior

When I scroll by grabbing scroll bar to bottom I should see all the elements loaded.

Actual Behavior

Elements displays as Nothing to see here...

I think you might want to change:

  const rowVirtualizer = useVirtual({
    size: data.totalItems,
    parentRef,
    estimateSize: useCallback(() => 35, []),
    initialRect: { width: 0, height: 800 },
  });

to

  const rowVirtualizer = useVirtual({
    size: items.length,
    parentRef,
    estimateSize: useCallback(() => 35, []),
    initialRect: { width: 0, height: 800 },
  });

Otherwise this is generating many problems like calling issues when scrolling fast or throwing warnings:

Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

[machour]

I just tried the example using Remix 1.6.7, and everything is working as expected:

In the network tab, I can see the XHRs being fired, and the response does contain totalItems entry, which is being correctly used here.

Can you share more details about your setup ? (node version, browser, etc)

Thanks !

[rkulinski]

Thanks for such a short reply. I cannot run this example on code sandbox - not sure what is wrong, but I'm getting blank screen. I downloaded repo and run it.

Node v16.14.0
Firefox

Note that you can't use you're mouse wheel or touchpad. To repro this you need to drag scroll bar with mouse.

[machour]

I also encountered a problem with codesandbox, and ran the project locally using yarn create remix --template https://github.com/remix-run/remix/tree/main/examples/infinite-scrolling

I was using the touchpad, but I do see the problem now while using the scrollbar !

[machour]

I tested your change, and it seems to do the trick, although the scrollbar gets a little jumpy.
Would you mind opening a PR with your proposed fix so we can get to the root of the problem with the rest of the team?

[rkulinski]

Yeah it does. Although in my scenario I had to some more tweaks to make it work.

I agree that scrollbar is jumpy, but if there would be a wish to have scrollbar mimic fully loaded data set it would require refactoring of how items are loaded into array (currently the problem is that due to so many state changes some of them seems to be skipped, hence indexes mismatch).

Maybe, before making code changes it would be a good idea to discuss and have a clear goal for this example.

I can help out with this naturally :)

In case we are okay with "classic" infinite scroll (where list extends height as more items are loaded) I can provide some PR to fix this example.

[machour]

Summoning @kentcdodds 🪄

[kentcdodds]

Can we compare what you're experiencing with other infinite scroll examples like Twitter? Do you experience the jumpiness there? It's it just an issue with infinite scroll in general?

[rkulinski]

I don't have a Twitter, but e.g. 9gag is using the same pattern:
https://9gag.com/

Although it seems like a cool thing to display scrollbar as if all items are already loaded it is causing many technical obstacles. And when I think about it more UX is not ideal as well. Let's say list is 30k elements. With such number of items scroll is not precise anyway, so I think it's not that useful.

[kentcdodds]

I'd like to see what code changes actually look like in a PR. I think I'd probably merge it 👍

[rkulinski]

@kentcdodds
Really simple change:
#4003

[kentcdodds]

Merged. Thanks!