Lazyloading stops working beyond 5K images

[vamzz1]

Bug description I have a use case where I have to show the user more than 100K images. My API returns images in batches of 3K images. The lazyloading works on the first batch, i.e, when I render 3K images using the lazyloadcomponent. But when I append the next batch and the batch size increases to 6K. The browser hangs and in the network tab I see that all the images are fetched instead of only the images in the viewport. I see more than 4K requests made in the network tab.

To Reproduce

class ImageGrid extends React.Component {

  render() {
      const { results, imageGridSuffix, scrollPosition } = this.props;

      const imagePlaceholder = <div style={{ width: 224, height: 224, background: "#c9c9c9" }}/>

      let divs = [];

      for (var index=0;index < results.length/3;index++) {
        const result = results[index];
        divs.push(
        <div
          key={`result-${index}`}
          className={styles.canvasRoot}
        >
          <LazyLoadComponent placeholder={imagePlaceholder} delayTime={0} scrollPosition={scrollPosition} >
            <Canvas />
          </LazyLoadComponent>
        </div>);
      }
      return divs;
    }
}

export default trackWindowScroll(ImageGrid);

Also one thing I noticed is this issue kicks in only once the total batch size of images exceed 5K. before that everything renders as expected.

Expected behavior I expected the component to lazy load irrespective of the array size it's using.

Technical details:

• Package version 1.3.2
• Server Side Rendering No
• Device Desktop
• Operating System Mac OS
• Browser Chrome