title: Webpack code splitting causing jumpy animations on route change?
body: <p>So I am using code splitting to split my (rather large) application into manageable chunks, like so:</p>
  
  <pre><code>const getSettings = (nextState, cb) =&gt; {
    require.ensure([], require =&gt; {
      cb(null, require('../containers/Settings/Settings'))
    }, 'settings')
  }
  </code></pre>
  
  <p>This is probably a pretty rudimentary way of getting Webpack to split at certain points, but it's worked for me so far.</p>
  
  <p><em>However, I've reached a serious setback</em>. Because these chunks are necessarily asynchronous, when entering a route which depends upon a non-fetched chunk, the actual route changes (via <code>react-router</code>), but it takes a few seconds for the actual children components to update, thus leaving a choppy animation.</p>
  
  <p>How can I force <code>react-router</code> to not fire <code>LOCATION_CHANGE</code> until all necessary chunks have been loaded?</p>
  
  <p>I am using <code>react-router 3.0.0</code> and <code>webpack 1.13.2</code></p>