title: React video loading in memory before rendering to screen
body: <p>I am having a hard time figuring out how to load a spinner while a video is loading. I don't want to do a DOM loader, I want everything on the page to load up while the video is loading. So far, when I use <code>onLoadStart</code> and <code>onLoadedData</code>, they both seem to fire at the same time as the entire page is done loading. Not helpful.</p>
  
  <p><strong><em>Is there a way to async load this and show a spinner while loading? Perhaps load into virtual memory or something?</em></strong></p>
  
  <p>Here is my current code:</p>
  
  <p><em>"render" function</em></p>
  
  <pre><code>    const { isLoading } = this.state;
  
      return (
          &lt;React.Fragment&gt;
              {isLoading &amp;&amp; (
                  &lt;CircularProgress /&gt;
              )}
  
              &lt;video
                  loop
                  muted
                  autoPlay
                  src={WaveVideo}
                  preload={'auto'}
                  type={'video/mp4'}
                  className={classes.video}
                  ref={ref =&gt; this.headerVideo}
                  onLoadStart={() =&gt; {
                      console.log('...I am loading...')
                      this.setState({ isLoading: true });
                  }}
                  onLoadedData={() =&gt; {
                      console.log('Data is loaded!')
                      this.setState({ isLoading: false });
                  }}&gt;
              &lt;/video&gt;
          &lt;/React.Fragment&gt;
      );
  </code></pre>