search

twobin / react-lazyload

Lazy load your component, image or anything matters the performance.
MIT License
5.87k stars 488 forks source link

Using a placeholder does not work #262

Open ebruesewitz opened 5 years ago

ebruesewitz commented 5 years ago

If you pass in a placeholder prop, a ref will never be set so this.visible will always be false and LazyLoad will never render children.

See the following render method, where setRef is only called if placeholder is not defined: https://github.com/twobin/react-lazyload/blob/7411c5267d7019a418305b382f40220d20bdfba2/src/index.jsx#L294-L300

After some further investigation, it also looks like ReactDom.findDOMNode (which was used previously) was never really working for custom placeholder components either--it seems to return a react element which fails the check here as it is not HTML: https://github.com/twobin/react-lazyload/blob/7411c5267d7019a418305b382f40220d20bdfba2/src/index.jsx#L126-L128

mwskwong commented 5 years ago

A simple workaround for the library breaking bug.

In short, we need to find a way to pass the ref to the placeholder, while this might not be possible since the placeholder might be a functional component.

shubhambatra commented 2 years ago

I have found the workaround. It is may not be the best solution but it is working for me.

Problem statement is:

<Lazyload once> <MyComponent /></Lazyload>

MyComponent.js setRef = (ref) => { //some code. } <div ref={this.setRef}><xyz /></div>

While using LazyLoad my setRef function was not calling. So I put setTimeout and change the following line of code.

<div ref={(ref) => setTimeout(() => { this.setTimeout(ref)}, 0)}> <xyz /> </div>

It started working. :)