Add placeholder props

[ParadeTo]

I added the placeholder props to the component !

[ParadeTo]

What's up?

[loktar00]

Why not wrap the component with something else?

<my placeholder thing conditionWhenToShowChildrenOrPlaceholder={whatever}>
    <LazyLoad>
         stuff
    </LazyLoad>
</my placeholder thing>

Lazy load is just supposed to load things once they hit the viewport I sort of feel like a placeholder should be handled by something else. Thoughts?

[danielbush]

We have a situation where we have a component that renders itself as a placeholder if no data or before data is fetched via an api. So initially before it fetches it will show itself with placeholders (for both text and image content in this component).
We also want to be able to server render this component which will render it in "placeholder mode". So when the page initially loads in the browser we see the placeholder. React then kicks in and ideally lazy loads and re-renders with the non-placeholder version. The lazy-loaded component has to be scrolled to so we don't want to load it unless the user scrolls.

So I'm just trying to think through how to do that either via the above suggestion or via some sort of placeholder mechanism in react-lazy-load.

Just thinking out loud...

Suppose we have some sort of PlaceHolder component like the above that has a condition that will make it render LazyLoad but renders a placeholder otherwise (including at server-render time).

Then I guess it will need to render both a placeholder and LazyLoad at the same time when browser-react takes over the server rendererd output.

The user then scrolls down the page, sees the placeholder, and triggers the lazy load mechanism which triggers the api call. PlaceHolder must then be subsequently told when the api fetch completes and our lazy-loaded component presumably has re-rendered with actual output.

At that point it would not render the placeholder. This assumes that our component renders nothing whilst fetching. ... I'd have to try this I guess. But it feels like we are trying to work around the fact LazyLoad doesn't provide a placeholder.

I'm not sure about the mechanism for specifying a placeholder component to LazyLoad either. I think another library I've seen passes it in as a prop. Another possibility is to extract the fetch logic into a fetch-HOC; But we only want it to trigger when lazy load is triggered so it would be a child of LazyLoad.

[bf]

So why is this not merged for half a year?

[loktar00]

@bf see above discussion.

[tstirrat15]

@loktar00 the obvious use case for me is to prevent page reflows when lazy-loading images. I'd like to maintain responsiveness of the container, which means that I can't just statically size the container element. Ideally, I'd be able to render a placeholder that uses an aspect prop to render an empty div with padding-bottom maintaining the aspect ratio, which is then replaced by an image of the same size, preventing any page resizing from happening.