React / Redux应用程序（例如Pace.js）的加载百分比栏，仅在初始页面加载时显示

Question

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.

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 Pace.js 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

Pace.once('done', () => remove specific pace stylesheet

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 initialPageLoad set to true 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 initialPageLoad to false so the loader doesn't run on subsequent navigations.

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 here , recommending to include it as a separate CDN.

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.

Answer 1

Trying to integrate Pace into your Redux state management is impractical, as trying to get the app to report on whether it has loaded its assets is a concern separate from an instance of the app.

One approach you could take is to store your applications initial page load flag in HTML5 session storage .

Then when your page loads for the first time you could update a session variable to true eg

Pace.once('done', () => { sessionStorage.setItem('isInitialPageLoaded', true); })

On subsequent page loads you could then check this variable to see if this page has had its assets loaded previously:

 const isInitialPageLoaded = 'isInitialPageLoaded'
 Pace.once('restart', () => { if (sessionStorage.getItem(isInitialPageLoaded)) {
  // Trigger Pace to display page load progress
  sessionStorage.setItem(isInitialPageLoaded, true);
 });