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.