DEV Community

Discussion on: Futuristic Infinite Scrolling in React and JavaScript

Collapse
vetras profile image
vetras

The div id="loading" never leaves the page. It is just pushed further down.

This is weird ... but OK I guess the main point is using the
IntersectionObserver and looking at the value of the intersectionRatio to make decisions.

That same principle can be applied to other things as you mention at the top. Cool.

Collapse
dhairyanadapara profile image
Dhairya Nadapara Author • Edited on

Yes @vetras , usually web-app's shows the loading at bottom of the div in case of infinite scrolling. Other way I thought of was set target to last element of the list, but in that case we have to change the observer target when list updates. If you know any other way please share, it will be helpful. Thanks :)

Collapse
vetras profile image
vetras

What I usually see when we have DOM elements we want to show or hide dynamically is to have a display property on them (not just shove them outside the view 🙏 ).

For example:

  • on vue.js:
<p v-if=isLoading > loading... please wait </p>
Enter fullscreen mode Exit fullscreen mode
  • on react:
render() {
  return this.isLoading && (<p>loading ... please wait</p>);
Enter fullscreen mode Exit fullscreen mode

(full stack dev here, FYI, so my FE well...)

Thread Thread
dhairyanadapara profile image
Dhairya Nadapara Author

Oh yes, I completely missed this. Let me think of this how it will be achieved as target element is required to pass the in observe method.