React: Show loading spinner while images load

Question

I have a React app which makes a call in useEffect to my API which returns a list of URLs to use as imy image srcs.

I am using react-loader-spinner to show a loading spinner component while my images load.

I have a loading variable in useState to determine whether the images are loading.

I can not figure out how to stop showing the loading spinner and show my images once they have all loaded.

Here is my code:

Photos.jsx

import React, { useState, useEffect, Fragment } from 'react'
import Loader from 'react-loader-spinner';
import { getAllImages } from '../../services/media.service';
import Photo from '../common/Photo';

const Photos = () => {
  const [photos, setPhotos] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
      setLoading(true);
      getAllImages()
        .then(results => {
          setPhotos(results.data)
          console.log(results.data)
        })
        .catch(err =>{
          console.log(err)
        })
  }, [])

  const handleLoading = () => {
    setLoading(false)
  }

  return ( 
    <Fragment>
      <div className="photos">
          { loading ? 
            <Fragment>
              <Loader
                height="100"    
                width="100"
              />
              <div>Loading Joe's life...</div>
            </Fragment>
            :
            photos.map((photo, index) => (
                index !== photos.length - 1 ? 
                <Photo src={photo.src} key={photo.id} /> :
                <Photo src={photo.src} key={photo.id} handleLoad={handleLoading}/>
            ))
          }
      </div>
    </Fragment>
   );
}

export default Photos;

Photo.jsx

import React from 'react'

import './Photo.css';

const Photo = (props) => {
  return ( 
    <div className="photo">
      <img src={props.src} alt={props.alt} onLoad={props.handleLoad}/>
      <div className="caption">
        Photo caption
      </div>
    </div>
   );
}

export default Photo;

I tried using onLoad for my last item but it will never get called because loading is never set back to false due to the spinner still being shown.

Some help on this would be greatly appreciated. Thanks

Answer 1

The reason why onLoad was never called, is because you never had the images in the DOM, so instead of conditionally rendering, conditionally set the display property to none & block.

Below is a simple example of how you could wait for all images to load.

Safe to assume the image with the largest file size would most likely be the last to load

Most certainly not!!, the time it takes for an image to load is not always down to size, caching, or server load can effect these.

 const {useState, useEffect, useRef} = React; const urls = [ "https://placeimg.com/100/100/any&rnd=" + Math.random(), "https://placeimg.com/100/100/any&rnd=" + Math.random(), "https://placeimg.com/100/100/any&rnd=" + Math.random() ]; function Test() { const [loading, setLoading] = useState(true); const counter = useRef(0); const imageLoaded = () => { counter.current += 1; if (counter.current >= urls.length) { setLoading(false); } } return <React.Fragment> <div style={{display: loading ? "block" : "none"}}> Loading images, </div> <div style={{display: loading ? "none" : "block"}}> {urls.map(url => <img key={url} src={url} onLoad={imageLoaded}/>)} </div> </React.Fragment>; } ReactDOM.render(<React.Fragment> <Test/> </React.Fragment>, document.querySelector('#mount'));

 <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div id="mount"></div>

Answer 2

How are they? Thank you for helping. I have it as the Keith solutions, but it still doesn't call the onLoad function. The only way for it to work and trigger onLoad is that instead of display, use visibility over the img parent tag. I would like it to work with display prop

<div style={{visibility: loading ? "hidden" : "visible"}}>
  {urls.map(url => 
    <img 
      key={url}
      src={url}
      onLoad={imageLoaded}/>)}
</div>

Answer 3

just create and component like this and load anywhere that you want to using image:

import React from 'react'
import { useState } from 'react';

export default function MyImage({src, width, size}) {
    const [loading, setLoading] = useState(true);
    return (
    <div style={
        {
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            width: width?width:"100%",
        }
    } >
    <img src={src} style={
        {
            display: loading?"none":"block",
            width:"100%",
            animation: "fadeIn 0.5s",
        }
    } onLoad={(e)=>{setLoading(false)}}></img>
    <div className="spinner" style={{
        display: loading?"block":"none",
        fontSize: size?size:"24px"
    }} ></div>
</div>)}

you just need define a css class as "spinner" for spinner and an animation as "fadeIn" for image if you want more ui effect. usage:

<MyImage src="link/to/image" />