diff --git a/src/client/Components/Result/NotFound.js b/src/client/Components/Result/NotFound.js new file mode 100644 index 0000000..661cffc --- /dev/null +++ b/src/client/Components/Result/NotFound.js @@ -0,0 +1 @@ +export { NotFound as default } from '.'; diff --git a/src/client/Components/Result/ServerError.js b/src/client/Components/Result/ServerError.js new file mode 100644 index 0000000..a8fb54f --- /dev/null +++ b/src/client/Components/Result/ServerError.js @@ -0,0 +1 @@ +export { ServerError as default } from '.'; diff --git a/src/client/Components/Result.jsx b/src/client/Components/Result/index.jsx similarity index 100% rename from src/client/Components/Result.jsx rename to src/client/Components/Result/index.jsx diff --git a/src/client/Containers/Calculation/index.jsx b/src/client/Containers/Calculation/index.jsx index 0add888..e5eb53a 100644 --- a/src/client/Containers/Calculation/index.jsx +++ b/src/client/Containers/Calculation/index.jsx @@ -1,19 +1,19 @@ import { Spin } from 'antd'; -import { ServerError } from 'client/Components/Result'; -import Modal from 'client/Elements/Modal'; +import { LoadingStatus } from 'client/common/loadingStatus'; import { withStoreModal } from 'client/hocs/withStore'; import { useStores } from 'client/hooks/useStores'; import CalculationService from 'client/services/CalculationService'; import { Box, Flex } from 'client/UIKit/grid'; import initialOptionsMap from 'core/Data/initialOptionsMap'; import staticEntitiesList from 'core/Data/staticEntitiesList'; -import React, { useEffect, useState } from 'react'; -import Results from './Results'; -import Sections from './Sections'; +import React, { lazy, Suspense, useEffect, useState } from 'react'; +const Results = lazy(() => import('./Results')); +const Sections = lazy(() => import('./Sections')); +const ServerError = lazy(() => import('client/Components/Result/ServerError')); +const Modal = lazy(() => import('client/Elements/Modal')); const Calculation = () => { - const [ready, setReady] = useState(false); - const [error, setError] = useState(undefined); + const [status, setStatus] = useState(LoadingStatus.loading); const { calculationStore } = useStores(); useEffect(() => { Promise.all([ @@ -41,16 +41,17 @@ const Calculation = () => { calculationStore.setTableColumns('tableInsurance')({ options: { insuranceCompany: insuranceCompanies }, }); - setReady(true); + setStatus(LoadingStatus.ready); }, ) .catch(err => { - setError(err); + console.log('Calculation -> err', err); + setStatus(LoadingStatus.error); throw err; }); }, []); - if (!error && !ready) { + if (status === LoadingStatus.loading) { return ( @@ -60,8 +61,12 @@ const Calculation = () => { ); } - if (error) { - return ; + if (status === LoadingStatus.error) { + return ( + + + + ); } const ModalComponent = withStoreModal(Modal); diff --git a/src/client/Layout/index.jsx b/src/client/Layout/index.jsx index c7b0a3e..6e1bb8b 100644 --- a/src/client/Layout/index.jsx +++ b/src/client/Layout/index.jsx @@ -2,7 +2,7 @@ import paths from 'client/common/paths'; import colors from 'client/UIKit/colors'; import { Box, Flex } from 'client/UIKit/grid'; import mq from 'client/UIKit/mq'; -import React from 'react'; +import React, { Suspense } from 'react'; import { Route, Switch } from 'react-router-dom'; import styled from 'styled-components'; import Logo from './Logo'; @@ -58,18 +58,21 @@ const Header = () => ( ); +//TODO: fallback const Content = () => ( - - {paths.map((path, i) => ( - - ))} - + + + {paths.map((path, i) => ( + + ))} + + ); diff --git a/src/client/common/loadingStatus.ts b/src/client/common/loadingStatus.ts new file mode 100644 index 0000000..6fa0a8d --- /dev/null +++ b/src/client/common/loadingStatus.ts @@ -0,0 +1,5 @@ +export enum LoadingStatus { + loading, + ready, + error, +} diff --git a/src/client/common/paths.js b/src/client/common/paths.js index b28f7ae..3d9b0b0 100644 --- a/src/client/common/paths.js +++ b/src/client/common/paths.js @@ -1,11 +1,13 @@ -import { NotFound } from "client/Components/Result"; -import Calculation from "client/Containers/Calculation"; +import React from 'react'; + +const NotFound = React.lazy(() => import('client/Components/Result/NotFound')); +const Calculation = React.lazy(() => import('client/Containers/Calculation')); const paths = [ { - id: "Calculation", - name: "Расчет", - route: "/", + id: 'Calculation', + name: 'Расчет', + route: '/', content: Calculation, exact: true, },