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

[ZxMYS]

It would be great if this can be fixed!

[rohmanhm]

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

[ankeetmaini]

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 ***@***.***> 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 <metafizzy/infinite-scroll#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 <#47 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AGWDl09YCrl7hwls7E6XqzjqGgRxEotyks5tRlt6gaJpZM4Rpf3J> .

[helderjbe]

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

[ankeetmaini]

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?

[ankeetmaini]

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.

[nareshbhatia]

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.

[juank11memphis]

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

[alextouzel]

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!

[ankeetmaini]

class YourClass extends React.Component {
  componentDidMount() {
    this.fetchData();
  }
  render() {
    return (
      <InfiniteScroll
        pullDownToRefresh
        pullDownToRefreshContent={
          <h3 style={{ textAlign: 'center' }}>&#8595; Pull down to refresh</h3>
        }
        releaseToRefreshContent={
          <h3 style={{ textAlign: 'center' }}>&#8593; Release to refresh</h3>
        }
        refreshFunction={this.refresh}
        next={this.fetchData}
        hasMore={true}
        loader={<h4>Loading...</h4>}
        endMessage={
          <p style={{ textAlign: 'center' }}>
            <b>Yay! You have seen it all</b>
          </p>
        }
      >
        {items}
      </InfiniteScroll>
    );
  }
}

[epifab]

It is a potential workaround, but that might cause the next function to be called twice in some cases where the scroll actually happened. I can find an hack to fix this, but I'd rather have this fixed in the library.

[epifab]

the userland code will make the call for the first fetch of data, and render it

• What if I want my component to lazily load the first page only when the user reaches it?
• What does make the first page so special that has to be treated in a different way from all the other pages? e.g., why should I call the same thing twice on component initialization and the next event? After all, they have many things in common, like the loader element to be displayed in the meantime, same way to handle failures, same data source and same functionality.

the height of the content is more than the innerHeight

• This assumption is probably fair in most cases, but I honestly don't think it's valid. It depends on how you render the content, on the device you're using. It'd be best for the component not to make this assumption at all.

Also, please note that the loader element is rendered at the bottom even if the scroll didn't happen, so either that doesn't get displayed or the next callback is called (which is what I really think it should happen).

[stevearoonie]

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. 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.

[fatih108]

When this problem will be resolved?

componentDidMount() {
this.fetchData();
}

calling multiple times..

[jamesraj007]

"the next callback seems to be called only after a scroll down event. if the page isn't full and I cannot scroll down to the bottom (cause I already reached it), then the loader is displayed, but the next callback doesn't get called. this is obvious when you start the component with no children."

Hi, I am also facing the same issue. When this problem will be resolved?

[emlynmac]

Seems like you'd need to look at the size of the components inside the scrollable area and work out if the height is > than the height of the scrollable area. If it isn't, do another next() call on the next update.

[engmsilva]

I'm having similar problem, but in my case I could resove it just by taking a backend flag from the backend server and changing the state of the hasMore to false when there were no more pages to load. But incredibly it is not possible to do this if you have only one element in the list, since if you change to false the state of hasMore with only one page loaded, simply the component clears the list and adds the parameterized element to endMessage. Is there any forecast to correct this problem?

[jaexplorer]

Any update on this?

[ankeetmaini]

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 tempting it is to do this, but this may cause the API to be called twice, as until now, InfiniteScroll component doesn't take the responsibility for loading the first batch of data. Should the component do that, it'll be a breaking change (sort of)?

[ertemishakk]

@fatih108 You are not supposed to call it like that, it needs to be in a seperate function and that function will need to be called when the page is scrolled. however, if the page has not reached the full height, it wont work and that why we all are here.

[ertemishakk]

for those who are having the same issue, setting the minHeight of parent component may solve.

This library does it for you, however you still have to call the initial request yourself.

https://github.com/danbovey/react-infinite-scroller

[davidfig]

In case anyone needed a more complete fix, here's what I used. The only difference is that you need to provide props.isLoading to ensure loading only happens once:

import { nanoid } from "@reduxjs/toolkit";
import { useEffect, useMemo, useState, useRef } from "react";
import InfiniteScroll, { Props } from "react-infinite-scroll-component";

const classSlugSize = 3;

interface ICanoaInfiniteScrollProps extends Props {
  isLoading?: boolean;
}

// this ensures that the client is filled up on larger screens
export const CanoaInfiniteScroll = (
  props: ICanoaInfiniteScrollProps
): JSX.Element => {
  const [classSlug] = useState(nanoid(classSlugSize));
  const ref = useRef<InfiniteScroll | null>(null);
  const clientArea = useMemo(
    () =>
      ref.current
        ? document.querySelector(`.infinite-scroll-${classSlug}`)
        : undefined,
    [ref.current]
  );

  useEffect(() => {
    if (clientArea) {
      const containerArea = clientArea?.parentNode?.parentNode as
        | undefined
        | HTMLDivElement;
      if (!containerArea) return;
      if (
        !props.isLoading &&
        clientArea.clientHeight < containerArea.clientHeight + 100
      ) {
        props.next();
      }
    }
  }, [props.isLoading, props.children, clientArea]);

  return (
    <InfiniteScroll
      {...props}
      className={`infinite-scroll-${classSlug} ${props.className}`}
      ref={ref}
    />
  );
};