title: Reload Live Image without Flickering in React
body: <p>I would like to reload an image at a static URL indefinitely in React. Through some searching I arrived at the below less than ideal solution. It works, but I would like to remove the flickering of the image loading. I realize the issues is that the component is re-rendered, and then the image loads. I've seen a couple examples that use the two images one as a placeholder and the loading one hidden until it loads using <code>onLoad</code> and <code>setState</code>, but they all assume a finite number of images. How can I make this display the last image in the <code>CardMedia</code> until the new one is loaded and then replaced without flicker every five seconds?</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  
  import { Card, CardMedia, CardTitle } from 'react-toolbox/lib/card';
  
  const LIVE_IMAGE = 'https://cdn-images-1.medium.com/max/1600/1*oi8WLwC2u0EEI1j9uKmwWg.png';
  
  class LiveImageCard extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        liveImage: null
      };
    }
  
    componentDidMount() {
      this.interval = setInterval(
        () =&gt; this.setState({
          liveImage: `${LIVE_IMAGE}?${new Date().getTime()}`,
        }),
        5000
      );
    }
    componentWillUnmount() {
      clearInterval(this.interval);
    }
  
    render() {
  
      return (
        &lt;Card style={{width: '350px'}}&gt;
          &lt;CardTitle title="Live Image" /&gt;
          &lt;CardMedia
            aspectRatio="wide"
            image={this.state.liveImage}
          /&gt;
        &lt;/Card&gt;
      );
    }
  }
  
  ReactDOM.render(
    &lt;LiveImageCard /&gt;,
    document.getElementById('root'),
  );
  </code></pre>