Задержка пропеллера не работает, загрузка пропеллера "мигает" без задержки

Question

Я использую response-loadable@5.5.0 для разделения кода в базовом веб-приложении. Установил ли я delay Пропеллер или нет, загрузочный счетчик мигает сразу при загрузке страницы без задержки. Я удалил приложение, чтобы удалить часть логики маршрутизации, удалил CSS-анимацию, попробовал более ранние версии версии @ 5, удалил AppBar, который остается визуализированным, значок по-прежнему мигает сразу при загрузке страницы без задержки. Вот урезанная версия реализации Loadable:

import React from "react";
import { Route, Switch } from "react-router-dom";
import Loadable from "react-loadable";
import Cached from "@material-ui/icons/Cached";


function SpinningIcon() {
  return <Cached color="inherit" className="spinning" />;
}

const AsyncHome = Loadable({
  loader: () => import("./containers/Home"),
  loading: SpinningIcon,
  delay: 1000
  //delay at 1 second, still flashes on load

});
const AsyncLogin = Loadable({
  loader: () => import("./containers/Login"),
  loading: SpinningIcon
  //no delay prop, still flashes
});

export default ({ childProps }) => (
  <Switch>
    <Route path="/" exact component={AsyncHome} props={childProps} />
    <Route path="/login" exact component={AsyncLogin} props={childProps} />
  </Switch>
);

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

Answer 1

При загрузке вы забыли реквизиты "pastDelay", как указано в документации: "Избегайте Flash при загрузке компонента"

Ваша функция должна выглядеть примерно так:

function SpinningIcon({ pastDelay }) {
  if (pastDelay) {
    return <Cached color='inherit' className='spinning' />
  }

  return null
}

Надеюсь это поможет:)