title: React: Wait until all assets are loaded
body: <p>In a React.js project, I'm fetching svgs inside of the <code>componentWillMount()</code> lifecycle method via a function called <code>loadAllAssets()</code>. These are then saved inside of the user's localStorage. </p>
  
  <p>(1) Is there a more elegant way of checking whether all requested svg files have been indeed saved inside localStorage other than iterating over the number of requests made and comparing them to the content of localStorage?</p>
  
  <p>(2) Is there a nicer way to prevent the initialization of componentDidMount as long as resources are still loading other than wrapping the entire code in a conditional? I am using Redux so that would come to mind as well but seems to me like using a sledgehammer to crack a nut.</p>
  
  <p><strong>index.js</strong></p>
  
  <pre><code>import { loadAllAssets } from './utils/loadAllAssets';
  
  class AppContainer extends React.Component {
    componentWillMount() {
      loadAllAssets();
    }
  //...
  }
  ReactDOM.render(&lt;Provider store={store} &gt;&lt;AppContainer /&gt;&lt;/Provider&gt;, 
  document.getElementById('root'));
  </code></pre>
  
  <p><strong>loadAllAssets.js</strong></p>
  
  <pre><code>import { ajaxSVG } from './gfAssetsLoader';
  
  export const loadAllAssets = () =&gt; {
    /* write to localStorage */
    ajaxSVG('closeScene', '/assets/svg/close-scene-ani.svg');
  //...
  }
  </code></pre>
  
  <p><strong>gfAssetsLoader.js</strong></p>
  
  <pre><code>export const ajaxSVG = (assetName, path) =&gt; {
    try {
      let request = new XMLHttpRequest();
      request.open("GET", path, true);
      request.onload = function (e) {
        if( request.status &gt;= 200 &amp;&amp; request.status &lt; 400 ) {
          let data = request.responseText;
          localStorage.setItem(assetName, data);
        } else console.log('Bad request. request status: ' + request.status);
      }
      request.send();
    }
    catch (e) {
      console.log(e);
    }
  };
  </code></pre>