title: Previous image stays while the next is loading
body: <p>A quick demo: <a href="https://codesandbox.io/s/tender-mcclintock-3hdkv" rel="nofollow noreferrer">Codesandbox link</a></p>
  <p>Notice that when the image is switched, text related to the next image appears right away, but as the next image loads, the previous one stays there until the next one hasn't fully loaded.</p>
  <p>Initially, the user sees:</p>
  <pre><code>Text 1
  [             ]
  [    Image1   ]
  [             ]
  </code></pre>
  <p>On switching, the next image takes some time to load, so the user sees</p>
  <pre><code>Text 2
  [             ]
  [    Image1   ]
  [             ]
  </code></pre>
  <p>and then,</p>
  <pre><code>Text 2
  [             ]
  [    Image2   ]
  [             ]
  </code></pre>
  <p>Ideally, I'd like to clear the previous image while the next one is loading. Is there a way to do this?
  That is, while the next image is loading, the user should seee</p>
  <pre><code>Text 2
  [             ]
  [             ]
  [             ]
  </code></pre>
  <p>Obviously, this only happens the first time an image is loaded. After an image is fetched (and I guess stored in session cache or something), there is no delay when the images are switched.</p>