DEV Community

Discussion on: Futuristic Infinite Scrolling in React and JavaScript

View post
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 • • Edited

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 •

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.