Implement infinite scrolling without Load More button

[humphd]

We used to have an implementation of infinite scrolling that almost worked, but we replaced it with a manual "Load More..." button. In #1217 I moved us to using paged data and the useSWRInfinite() hook, and we could use that to implement infinite scrolling with an IntersectionObserver, see discussion in https://sergiodxa.com/articles/swr/pagination. I think all we'd need to do is listen for the scroll event and then call setSize(size + 1) there vs. in the onClick for the LoadMore button.

[tonyvugithub]

It is an interesting idea. Could I suggest another direction? Instead of watching for a scroll event, i wonder if we can do something like lazy loading that the first time only load 20 posts. and if we pass 20 posts, it loads more. I remember learning Flutter and they have something like that. Don't know if there is similar thing in React.

[humphd]

This is what an IntersectionObserver does: watches for a DOM element to interact with another element, or the top-level document.

[PedroFonsecaDEV]

I was waiting for this.
I'm available.

[humphd]

As long as you aren't working on another PR at the same time (i.e., squatting on multiple Issues so other students can't get involved) go for it.

[PedroFonsecaDEV]

I'm assigned on #1223 that is waiting for our decision about it since we may solve the issue with #1193. (We are waiting for sketches).
Meanwhile, I can work on an infinite scroll if you'd like.
Let me know.

[PedroFonsecaDEV]

I'm not available anymore. If someone wants to work on this issue, please go ahead.

[klee214]

I am gonna try this one!

[manekenpix]

@klee214 all yours!

[klee214]

I am looking for some advice!, I am doing this right now, I could implement the infinite scrolling feature with the "more button" (Once the more button is on the viewport, the new posts are updated setSize(size + 1)). However, it seems hard to do this without the "more button" component for 2 reasons,
1. On the Timeline.jsx, useRef is always undefined even if it is on the useEffect, so it is hard to grab a node
2. On the Timeline.jsx, if the "more button" component is not used, what component or node should be the indicator for auto
I know, and pretty much sure that there must be a better way to implement this, yet I do not have any idea.... So please give me some advice.

[humphd]

We're using useSWR to do our loading, and it supports this. Here's an example https://sergiodxa.com/articles/swr/pagination#infinite-scroll. There are others if you search for 'infinite scroll useswr'.