Отображать анимацию на страницах и во время маршрутизации

Question

У меня есть приложение React, которое отображает экран загрузки, когда пользователь нажимает кнопку отправки, чтобы дождаться завершения вызова службы PUT.Затем они направляются на следующую страницу.На следующей странице он отображает еще один экран загрузки, ожидая завершения вызова службы GET.

В настоящее время у меня есть редуктор, который запускает и останавливает эту анимацию.Единственная проблема в том, что он не переходит на следующую страницу, потому что я показываю компонент анимации при маршрутизации.Мне нужно, чтобы анимация отображалась во время маршрутизации.

У меня есть специальный компонент Interstitial (мой компонент анимации).Как я могу отобразить эту анимацию на домашней странице, через маршрутизацию страницы, на следующую страницу, чтобы она выглядела как один экран непрерывной загрузки, а не три отдельных экрана.

render() {
    if (isWaiting) {
        return <Interstitial />; //this is my animation
    } else {
        return (
            <Template>
                    <Switch>
                        <Route path="/" exact component={Home} />
                        <Route path="/verify-changes" component={VerifyChanges} />
                        <Route path="/confirm" component={Confirm} />
                    </Switch>
            </Template>
        );
    }
}

Answer 1

Устранено это путем добавления внутренней части возврата с оператором switch, а не как второе возвращение.

{this.props.isWaiting ? <Interstitial /> : null}