Example of infinite scroll with useSWRInfinite

[4ndv]

I'm trying to build scroll-based lazyloading, but always get stuck with the same problem: next page is fetched before previous rendered and in result - next page never appears. I'm already wasted almost 6 hours and cannot make it work. Does someone have any examples of doing so?

[4ndv]

In case anyone stuck on the same stuff as I am, I was able to make it work with this component: https://www.npmjs.com/package/react-infinite-scroll-component

[ezeikel]

Do you have a code sample of how you got the two to play nice? Trying to do the same thing

[abdulazizalmalki-gh]

But this does not use SWR

[ramyareye]

related example added here

[kocaagasefa]

related example added here

Hi. This example does not work properly in one case.
When fetched page is small and loading element keeps visible on screen after fetch, it does not trigger fetching next page.
You can check by zooming out browser

is visible - true
is reacthing end - false
is refreshing - false

[huksley]

@ramyareye Do you have example where it is actually loads when you scroll long content? This would very useful!

[kocaagasefa]

https://stackblitz.com/edit/github-wyn3fz?file=pages%2Findex.js

Issue occurs when setting perPage to a small value (like 5)

[ramyareye]

@ramyareye Do you have example where it is actually loads when you scroll long content? This would very useful!

I don't get it, I can check if u provide a codesandbox

[ramyareye]

https://stackblitz.com/edit/github-wyn3fz?file=pages%2Findex.js

Issue occurs when setting perPage to a small value (like 5)

It works probably for me with 5

If doesn't for u, probably should play with isVisible and isLoading inside useEffect