title: How to display spinner or progress bar while image loading?
body: <p>I am making the react, next.js app on which I am displaying various images:
  <a href="https://i.stack.imgur.com/B0d6s.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/B0d6s.png" alt="enter image description here" /></a></p>
  <p>The user is clicking on the item from the list on the left, and it's getting three images on the right. The images are displaied based on next.js Image component:</p>
  <pre><code>            &lt;Image
            src={visualizationData[0]}
            quality={50}
            alt=&quot;Zdjęcie oryginalne&quot;
            width={600}
            height={600}
          /&gt;
  </code></pre>
  <p>Where <code>visualizationData</code> is a variable using the State Hook and returing 3 urls to photos that user wants to display:</p>
  <pre><code>const [visualizationData, setVisualizationData] = useState(getVisualizationData(props.history.model.name, props.history.dataLists[0].replace('img/', '')));
  </code></pre>
  <p>So it returns something like this:
  <a href="https://i.stack.imgur.com/VtNtk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VtNtk.png" alt="enter image description here" /></a></p>
  <p>Everything is working fine, but slow, because backend needs to convert .tif photos to .jpg and it takes like 3 seconds. I want to display for this 3 seconds a <a href="https://react-bootstrap.github.io/components/spinners/" rel="nofollow noreferrer">spinner</a> or something similar to spinner instead of leaving the user with the old visualizations.</p>
  <p>How to make it? I don't know how to check that photo is loaded or not, because I am only passing urls to the <code>src</code> prop of the Image component.</p>
  <p>Here is a code of <code>getVisualizationData(modelName, pathAndPhotoName)</code>:</p>
  <pre><code>    export function getVisualizationData(modelName, pathAndPhotoName) {
    const photoName = pathAndPhotoName.split('/').slice(-1)[0];
    const datasetPath = pathAndPhotoName.replace(`/${photoName}`, '');
    const visualizationData = [
      `${backendUrl}download/datasets/${datasetPath}/image/${photoName}`,
      `${backendUrl}download/datasets/${datasetPath}/mask/${photoName}`,
      `${backendUrl}download/models/${modelName}/Predictions/1/${photoName}`];
    return visualizationData;
  }
  </code></pre>
  <p>It is converting the path to the photos and returning it in an array.</p>