React Router v4 показывает текущий компонент маршрута до разрешения асинхронного маршрута

Question

Я использую react-router v4 вдоль стороны react-loadable асинхронная загрузка согласованных маршрутов.

<LayoutWrapper>
  <Route
    exact
    path="/"
    render={props =>
      currentUser ? (
        <AsycnExamplePage {...props} currentUser={currentUser} />
      ) : (
        <AsycnExamplePage />
      )}
  />
  <Route
    exact
    path="/saved"
    render={props => <AsycnExamplePage {...props} currentUser={currentUser} />}
  />
  <Route
    exact
    path="/settings"
    render={props => (
      <AsycnExamplePage {...props} currentUser={currentUser} />
    )}
  />
</LayoutWrapper>

• AsycnExamplePage это компонент, завернутый в Loadable от react-loadableНапример:

Loadable({
  loader: () => import("./index"),
  loading: props => {
    if (props.isLoading) {
      NProgress.start();
    }
    return null;
  },
});

В настоящее время, когда я направляюсь на другую страницу, react-router будет мгновенно соответствовать маршруту до разрешения асинхронного маршрута. Тем самым показывая LoadingComponent от react-loadable,

Как я могу сделать так, чтобы react-router будет отображать только асинхронный компонент после разрешения асинхронного компонента?

PS: я пытаюсь создать эффект загрузки страницы, похожий на Youtube.