Async loading of components in react-virtualized? - reactjs

Question

I have a react-virtualized masonry grid implemented in a component as follows:
const MasonrySubmissionRender = (media: InputProps) => {
function cellRenderer({ index, key, parent, style }: MasonryCellProps) {
//const size = (media.submissionsWithSizes && media.submissionsWithSizes.length > index) ? media.submissionsWithSizes[index].size : undefined
//const height = size ? (columnWidth * (size.height / size.width)) : defaultHeight;
function getCard(index: number, extraProps: any) {
var Comp = media.cardElement ? media.cardElement : SubmissionCard
return <Comp submission={media.media[index]} {...media.customCardProps} />
}
return (
<div>
<CellMeasurer
cache={cache}
index={index}
key={key}
parent={parent}>
<div style={style}>
{getCard(index, media.customCardProps)}
</div>
</CellMeasurer>
</div>
);
}
return (
<Masonry
overscanByPixels={1000}
autoHeight={false}
cellCount={media.media.length}
cellMeasurerCache={cache}
cellPositioner={cellPositioner}
cellRenderer={cellRenderer}
style={{ backgroundColor: 'red' }}
height={900}
width={900}
/>
);
};
It renders a list of fairly complicated components which contain an array of chips, css animations, etc.
Due to this rendering is very slow even with react-virtualized.
I'd like to implement a system like in imgur.com where the component itself won't necessary load immediately displaying only a silhouette while I can have the component preparing to render in the background.
I know there's a way to swap out the component during scrolling butt his hides all components including ones which have already rendered.

Answer 1

Like all react-virtualized cell/row renderers, masonry's cell render is passed an isScrolling property. When the masonry is scrolling you can render a place holder instead of the cell content:
if (isScrolling) return (
<div>placeholder</div>
);
In addition, you are recreating all functions whenever the stateless component is rerendred. This causes an extra overhead for the garbage collector, and might also cause components to rerender unnecessarily.
Convert the component to a class component. The cellRenderer should be an instance method (use class properties or bind in constructor). The getCard can be a class method, or you can extract it from the component, and pass the media when you call the function.
Your code should be something like this (not tested):
function getCard(media: InputProps, index: number) {
var Comp = media.cardElement ? media.cardElement : SubmissionCard
return <Comp submission = {
media.media[index]
} { ...media.customCardProps }
/>
}
class MasonrySubmissionRender extends React.Component {
cellRenderer = ({
index,
key,
parent,
style,
isScrolling
}: MasonryCellProps) => {
if (isScrolling) return (
<div>placeholder</div>
);
return (
<div>
<CellMeasurer
cache={cache}
index={index}
key={key}
parent={parent}>
<div style={style}>
{getCard(media, index)}
</div>
</CellMeasurer>
</div>
);
}
render() {
return (
<Masonry
overscanByPixels={1000}
autoHeight={false}
cellCount={media.media.length}
cellMeasurerCache={cache}
cellPositioner={cellPositioner}
cellRenderer={this.cellRenderer}
style={{ backgroundColor: 'red' }}
height={900}
width={900}
/>
);
}
}