title: Use NProgress with "React.lazy"
body: <p>I have the following component tree:</p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;BrowserRouter&gt;
    &lt;Suspense fallback={&lt;h1&gt;MyFallback&lt;/h1&gt;}&gt;
      &lt;Switch&gt;
        &lt;Route component={HomePage} path="/" exact /&gt;
        &lt;Route
          component={lazy(() =&gt; import('./pages/Auth/Login'))}
          path="/auth/login"
          exact
        /&gt;
      &lt;/Switch&gt;
    &lt;/Suspense&gt;
  &lt;/BrowserRouter&gt;
  </code></pre>
  
  <p>I was using <a href="https://reactjs.org/docs/code-splitting.html#suspense" rel="noreferrer"><code>React.Suspense</code></a> to show a loading fallback. However, now I want to show a progress bar at the top of the current page instead of using a normal Suspense loading fallback, which removes the entire current route to display the fallback.</p>
  
  <p>How do I add NProgress, for example, to indicate the loading progress of the page that is being loaded?</p>
  
  <p>Maybe the new React's Concurrent Mode can help with that? :)</p>