Loader until images loaded react

Question

I have a task - make preloader until all images get loaded. So we using react, and I'm new in this framework, I need help because of I can't make right logical steps. We have App.js and this file doesn't have any img in return only components, so how to get info from images that they have loaded? I know about onLoad, but don't understand how to get this bool from onLoad which is in components.

Answer 1

There are several ways to do this, but the simplest is to display the final image hidden, and then flip it to visible once it loads.

   class Foo extends React.Component {
  constructor(){
    super();
    this.state = {loaded: false};
  }

  render(){
    return (
      <div>
        {this.state.loaded ? null :
          <div
            style={{
              background: 'red',
              height: '400px',
              width: '400px',
            }}
          />
        }
        <img
          style={this.state.loaded ? {} : {display: 'none'}}
          src={this.props.src}
          onLoad={() => this.setState({loaded: true})}
        />
      </div>
    );
  }
}

Answer 2

I've never had to deal with this but there is a way (which might be a bit hacky).

You can essentially use a useEffect hook that is built into React. This is used in the functional components. It essentially runs commands after the page has mounted. What you can try, is initially set a boolean state (e.g.: isLoading) to be true and then run a command to set this state to false in the useEffect hook.

Example ?

function MyComponent(){
  // Create an instance of react's useState hook
  const [isLoading, setIsLoading] = useState(true);

  // This will run after the page has mounted
  React.useEffect(() => {
    setIsLoading(false);
  }, [setIsLoading]);

  return{
    //... 
  }
}