react-infinite-scroll-component: does not load the first page if not scrolling down

It would be great if this can be fixed!

Set the body to min-height: 101vh; did the job for me.

Thanks so much. This helps definitely. I’ll see how can I do this in this component. 😃

On Mon, 5 Feb 2018 at 07:08 stevearoonie notifications@github.com wrote:

I am also experiencing this problem. As I was searching for it I came across the same issue in another component: metafizzy/infinite-scroll#227 https://github.com/metafizzy/infinite-scroll/issues/227. I don’t know if this is useful to you at all but they solved it by adding a prefill property. When this option is set to true and the document is smaller than the encompassing window, pages will continually be loaded until there are either no more pages to load or the document has become larger than the encompassing window.

— You are receiving this because you commented.

Reply to this email directly, view it on GitHub https://github.com/ankeetmaini/react-infinite-scroll-component/issues/47#issuecomment-362959565, or mute the thread https://github.com/notifications/unsubscribe-auth/AGWDl09YCrl7hwls7E6XqzjqGgRxEotyks5tRlt6gaJpZM4Rpf3J .

This is also affecting if the user has bigger screen than the initial data fetch (users can’t scroll down)

This is a serious problem if a user has a large screen that displays more items than you would expect. I don’t want to load two times the amount of items that 95% of my users need just for that, so I did the following in my component with a useEffect hook:

  useEffect(() => {
    if (document.body.clientHeight <= window.innerHeight) {
      setItemCount(i => i + 10);
    }
  }, [itemCount]);

where itemCount is the number of item you want to display. Hope it helps anyone!

Any news on this, I am having the same issue. As @nareshbhatia commented, the best solution I can think of and the more natural is that the next functions should be called on component instantiation.

Thanks

As opposed to the prefill solution mentioned above, can we implement a cheap workaround whereby one call to next() will be made when the component is instantiated? If the page size is large enough, this gives us the prefill that’s needed. Basically, this workaround avoids setting up a separate mechanism for loading the initial data.

Can you help me in giving a reduced example to showcase the problem? AFAIK the library has no way of calling next until the scroll happens and it reaches the bottom. Unless that happens I don’t seem to have trigger which I could listen to.

The assumption is the userland code will make the call for the first fetch of data, and render it, and the height of the content is more than the innerHeight so that a scroll comes and then InfiniteScroll can take over.

Okay, I see. The next callback gets triggered only on scroll events. Is it not possible to call the next function yourself on componentDidMount of your component?