Как получить прогресс загрузки в React.lazy и Suspense

Question

Я использую ленивый, чтобы разделить свои маршруты, и я хочу знать, есть ли какой-нибудь способ, которым я могу получить прогресс загрузки в ленивом и неизвестном.

В настоящее время я использую это так.

const Home = lazy(() => import("./Home"));
const About = lazy(() => import("./About"));

function App() {
  return (
    <Router>
      <Switch>
        <Suspense fallback={<div>loading</div>}>
          <Route path="/" exact={true} component={Home} />
          <Route path="/About" component={About} />
        </Suspense>
      </Switch>
    </Router>
  );
}

---

■ Но я хочу показать ход загрузки (как youtube).
■ Есть ли способ, как я могу получить прогресс, например, как показано ниже.

<Suspense fallback={({progress}) => <LoadingBar progress={progress}/>}>

Answer 1

lazy использует обещания JavaScript, которые разрешаются или отклоняются, но не сообщают о каком-либо прогрессе.

Однако вы можете подделать прогресс с помощью чего-то вроде http://ricostacruz.com/nprogress/, которое случайным образом увеличивает индикатор выполнения.