Placeholder images

[SrSandeepKumar]

Is their a way we can keep a placeholder(text / image / gif) before the element appears on DOM Ex: We have few set of images in list and we have to display a loader before the image appears.

[rubencodes]

Not sure if there's an official solution, but in my project we literally have text "under" the image element, such that when it's not loaded you can see the text :)

[loktar00]

Why not just wrap a loader in it as well?

<LazyLoad>
        <myloader isloaded={something}>
              <thing to be loaded/>
        </myLoader>
</LazyLoad>

The loader component would display something else when not loaded something like the following,

render() {
        let loadingElement = null;
        if (!this.props.loaded) {
            loadingElement = <whatever image or text loading indicator maybe a spinner/>;
        }
        return (
            <div>
                {loadingElement}
                {this.props.children}
            </div>
        );
    }

Regardless this doesn't seem something that the LazyLoad component should handle. Unless people disagree. There is a PR to have a placeholder prop as well. Interested in thoughts.

[ParadeTo]

Look! Not just me who want to have this feature. ^_^

[danielbush]

81 - just for reference as there is some discussion there too.

[isabellachen]

@loktar00 In your example, how can the LazyLoad component tell the wrapper when the image is loaded and thus change the this.props.loaded from false to true?

[gleb-lobastov]

My solution, if somebody still interested

import React, { useState, useCallback } from 'react';
import LazyLoad from 'react-lazy-load';

export default function LazyWithPlaceholder({
  placeholder,
  children,
  ...forwardingProps
}) {
  const [loaded, setLoaded] = useState(false);
  const handleVisible = useCallback(() => setLoaded(true), []);

  return (
    <>
      {!loaded && placeholder}
      <LazyLoad {...forwardingProps} onContentVisible={handleVisible}>
        {children}
      </LazyLoad>
    </>
  );
}

[loktar00]

I'll add this as an example for the examples area in the branch I'm working it, https://github.com/loktar00/react-lazy-load/tree/feature/update-to-18