Есть ли способ применить переход постепенного появления / исчезновения с приостановкой React для резервного компонента? - PullRequest
Новая
       87

Есть ли способ применить переход постепенного появления / исчезновения с приостановкой React для резервного компонента?

3 голосов
/ 02 мая 2020

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

Моя настройка (для соответствующих частей этого конкретного вопроса) следующая:

Зависимости 

    "@glidejs/glide": "^3.4.1",
    "@material-ui/core": "4.8.3",
    "@material-ui/icons": "4.5.1",
    "@material-ui/lab": "4.0.0-alpha.39",
    "@material-ui/pickers": "3.2.10",
    "@types/autosuggest-highlight": "^3.1.0",
    "@types/jest": "^24.0.0",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.0",
    "@types/react-dom": "^16.9.0",
    "@types/react-redux": "^7.1.7",
    "autosuggest-highlight": "^3.1.1",
    "connected-react-router": "^6.8.0",
    "history": "^4.10.1",
    "node-sass": "^4.13.0",
    "react": "^16.12.0",
    "react-date-picker": "^8.0.0",
    "react-dom": "^16.12.0",
    "react-feather": "^2.0.3",
    "react-redux": "^7.2.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.3.0",
    "redux-devtools-extension": "^2.13.8",
    "redux-ducks-ts": "^1.0.9",
    "redux-logger": "^3.0.6",
    "redux-saga": "^1.1.3",
    "reselect": "^4.0.0",
    "styled-components": "^4.4.1",
    "typescript": "~3.7.2"

Блок маршрутизатора

Это основной маршрутизатор приложения, он имеет компонент RouteWithSubRoutes, который получает маршрут в качестве параметра и отображает react-render-dom Компонент маршрута, но в основном действует как маршрутизатор, переключающий контейнеры 

import React, { FC, Suspense } from "react";
import { Switch } from "react-router-dom";
import routes from "./routes";
import { Route, Redirect } from "react-router-dom";
import { SessionContainerProps } from "./types";

// Coponents
import RouteWithSubRoutes from "components/_shared/RouteWithSubRoutes";
import Footer from "components/_shared/Footer";
import SuspenseLoader from "components/_shared/SuspenseLoader";

const SessionContainer: FC<SessionContainerProps> = () => (
    <>
        <Suspense fallback={<SuspenseLoader />}>
            <Switch>
                {routes.map((route, i) => (
                    <RouteWithSubRoutes key={`${i}_${route.path}`} {...route} />
                ))}
                <Route path="/login/*">
                    <Redirect to="/login" />
                </Route>
            </Switch>
        </Suspense>
        <Footer />
    </>
);

export default SessionContainer;

Подробная информация о компоненте SuspenseLoader

Как сейчас, это центрированный круговой прогресс MUI (Spinner) с белым фоном, который перекрывает все приложение 

import React from "react";
import { CircularProgress } from "@material-ui/core";

const SuspenseLoader = () => {
    return (
        <div
            style={{
                position: "fixed",
                top: 0,
                left: 0,
                width: "100vw",
                height: "100vh",
                zIndex: 10000,
                backgroundColor: "#FFF",
                display: "flex",
                alignItems: "center",
                flexDirection: "column",
                justifyContent: "center",
                marginTop: "auto",
                marginBottom: "auto",
            }}
        >
            <CircularProgress
                size="6rem"
                style={{
                    color: "#e8eaef",
                    margin: 0,
                    padding: 0,
                }}
            />
        </div>
    );
};
export default SuspenseLoader;
...