3

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.

cheng
  • 1,264
  • 2
  • 18
  • 41

1 Answers1

0

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 e.g.

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);
 });
Ben Smith
  • 19,589
  • 6
  • 65
  • 93
  • Correct me if I'm wrong but with this, a refresh on my page would cause Pace to not show up right? My intention is just for users who visit my website to see the loading bar only once but if they come back, I still want the loading bar to show up. And also, I like the idea of sessionStorage but I wanted to use Redux state so my different page components can subscribe to the store change. Basically when the page loads, the current route component we're on should transition in. – cheng Feb 13 '18 at 01:20
  • Ah, I thought you only wanted Pace to update you when ajax calls are being made. – Ben Smith Feb 13 '18 at 10:35