寻求仅在初始加载时显示的React/Redux百分比加载条方案（类Pace.js）

Hey there, let's work through this initial-load-only progress bar problem for your React/Redux (create-react-app) project. I’ve helped folks with similar setups before, so here are targeted solutions to fix your Pace.js issues and explore better alternatives:

The likely issue with your current Pace.js setup is that it’s defaulting to tracking all Ajax requests and route changes. Let’s tweak its config to only care about the initial page load:

1. First, integrate Pace.js into your project properly (instead of external scripts) for better maintainability:

   npm install pace-js
   

2. In your index.js (the entry point of your app), initialize Pace with strict options to disable unwanted tracking:

   import Pace from 'pace-js';
   // Pick a theme that fits your app (or use custom CSS)
   import 'pace-js/themes/blue/pace-theme-minimal.css';
   
   // Configure Pace to only run on initial load
   Pace.options = {
     // Disable restarts when routing (React Router uses pushState)
     restartOnPushState: false,
     restartOnBackboneRoute: false,
     // Turn off ALL Ajax/WebSocket tracking
     ajax: {
       trackMethods: [],
       trackWebSockets: false
     },
     // Optional: Add a small delay after load to show completion state
     done: function() {
       setTimeout(() => {
         document.querySelector('.pace').style.display = 'none';
       }, 300);
     }
   };
   
   Pace.start();
   

This setup ensures Pace only activates during the initial page load, ignoring any subsequent Ajax calls or route switches.

If you want full control over every aspect of the loader (and avoid third-party library quirks), building a custom loader is the way to go. Here’s how to do it:

1. Add a loader container in your public/index.html, outside the React root:

   <div id="initial-loader">
     <div class="loader-progress-bar"></div>
     <span class="loader-text">Loading app...</span>
   </div>
   <div id="root"></div>
   

2. Add global CSS for the loader (put this in public/index.html’s <style> tag or your app’s global CSS file):

   #initial-loader {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: #ffffff;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     z-index: 9999;
     transition: opacity 0.3s ease;
   }
   
   .loader-progress-bar {
     width: 240px;
     height: 4px;
     background: #f0f0f0;
     border-radius: 2px;
     overflow: hidden;
     margin-bottom: 16px;
   }
   
   .loader-progress-bar::after {
     content: '';
     display: block;
     width: 0%;
     height: 100%;
     background: #2563eb;
     transition: width 0.2s ease;
   }
   
   .loader-text {
     color: #666666;
     font-size: 14px;
   }
   

3. Control the loader in your index.js based on actual load milestones:

   import React from 'react';
   import ReactDOM from 'react-dom/client';
   import { Provider } from 'react-redux';
   import store from './store';
   import App from './App';
   
   const loader = document.getElementById('initial-loader');
   const progressBar = document.querySelector('.loader-progress-bar::after');
   
   // Helper to update progress
   const updateProgress = (percent) => {
     progressBar.style.width = `${percent}%`;
   };
   
   // Update progress as key load steps complete
   updateProgress(25); // Redux store initialized
   updateProgress(50); // React components loaded
   
   // Render your app
   const root = ReactDOM.createRoot(document.getElementById('root'));
   root.render(
     <Provider store={store}>
       <App />
     </Provider>
   );
   
   // Finalize loader once app is rendered
   updateProgress(100);
   setTimeout(() => {
     loader.style.opacity = '0';
     setTimeout(() => loader.style.display = 'none', 300);
   }, 400);
   

This loader lives outside React’s root, so it won’t be affected by any subsequent app actions (like Ajax requests or route changes). You can adjust the progress updates to match your actual load steps (e.g., waiting for API data for initial state).

If you prefer a ready-made React component, react-topbar-progress-indicator is lightweight and easy to control:

1. Install the package:

   npm install react-topbar-progress-indicator
   

2. Use it in index.js to only show during initial load:

   import React from 'react';
   import ReactDOM from 'react-dom/client';
   import { Provider } from 'react-redux';
   import store from './store';
   import App from './App';
   import TopBarProgress from 'react-topbar-progress-indicator';
   
   // Configure the bar's appearance
   TopBarProgress.config({
     barColors: { '0': '#2563eb', '1.0': '#2563eb' },
     shadowBlur: 0,
     barThickness: 3
   });
   
   // Start the progress bar
   TopBarProgress.start();
   
   // Render the app
   const root = ReactDOM.createRoot(document.getElementById('root'));
   root.render(
     <Provider store={store}>
       <App />
     </Provider>
   );
   
   // Stop the bar once initial render is done
   setTimeout(() => TopBarProgress.finish(), 500);
   

Since you only call start() and finish() once during initialization, this bar won’t pop up during any later app interactions.

内容的提问来源于stack exchange，提问作者cheng