title: Percentage loading bar for React / Redux app like Pace.js that only shows on initial page load
body: <p>I'm trying to find the best way to have a loading bar for my website done in React (create-react-app) / Redux that shows the percentage of the page load. </p>
  
  <p>However I only want this to appear once during the initial page load and every subsequent ajax call or page transition there shouldn't be a loading bar. I'm using <a href="https://github.com/HubSpot/pace" rel="nofollow noreferrer">Pace.js</a> currently and the way I do it with that is to just include the Pace scripts / stylesheets outside of the build. Then I do a inline script in the index.html </p>
  
  <pre><code>Pace.once('done', () =&gt; remove specific pace stylesheet
  </code></pre>
  
  <p>However, the problem is that since this code exists outside of the React bundle code, I can't utilize Redux and state management. I want to basically have an initial state key <code>initialPageLoad</code> set to <code>true</code> in Redux and so depending on which route the user starts on, I will have different transitions from the loader bar. After this transition, I will set <code>initialPageLoad</code> to false so the loader doesn't run on subsequent navigations.</p>
  
  <p>One solution I can think of is to import Pace into React and then I would have access to Redux. However, I think it would be tricky to include Pace into React's lifecycle hooks; in the Create React App repo, they even have a side note for Pace <a href="https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#when-to-use-the-public-folder" rel="nofollow noreferrer">here</a>, recommending to include it as a separate CDN.</p>
  
  <p>I couldn't find any Pace-like libraries for React out there; the only progress loaders are just components that you need to modify themselves so any advice would be appreciated.</p>