ia.novokshanov/asb_cloud_front
1
0
Fork 0
forked from ddrilling/asb_cloud_front
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Добавлена страница-заглушка для Suspense

Browse Source
This commit is contained in:
Александр Сироткин 2021-12-21 17:41:02 +05:00
parent 3c4b98366d
commit c12ce68a96
2 changed files with 11 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/pages/AdminPanel/index.jsx
View File

@ -2,6 +2,7 @@ import { Layout, Menu } from 'antd'
import { lazy, Suspense } from 'react' import { lazy, Suspense } from 'react'
import { Switch, Link, useParams, Redirect, Route } from 'react-router-dom' import { Switch, Link, useParams, Redirect, Route } from 'react-router-dom'
import { PrivateMenuItem, PrivateRoute } from '../../components/Private' import { PrivateMenuItem, PrivateRoute } from '../../components/Private'
import { SuspenseFallback } from '../SuspenseFallback'
const ClusterController = lazy(() => import('./ClusterController')) const ClusterController = lazy(() => import('./ClusterController'))
const CompanyController = lazy(() => import('./CompanyController')) const CompanyController = lazy(() => import('./CompanyController'))
@ -47,7 +48,7 @@ export const AdminPanel = () => {
<Layout> <Layout>
<Layout.Content className={'site-layout-background'}> <Layout.Content className={'site-layout-background'}>
<Suspense fallback={<div>Loading...</div>}> <Suspense fallback={<SuspenseFallback />}>
<Switch> <Switch>
<PrivateRoute permission={ 'deposit_editor'} path={`${rootPath}/deposit` } component={ DepositController} /> <PrivateRoute permission={ 'deposit_editor'} path={`${rootPath}/deposit` } component={ DepositController} />
<PrivateRoute permission={ 'cluster_editor'} path={`${rootPath}/cluster` } component={ ClusterController} /> <PrivateRoute permission={ 'cluster_editor'} path={`${rootPath}/cluster` } component={ ClusterController} />

9
src/pages/SuspenseFallback.jsx Normal file
View File

@ -0,0 +1,9 @@
import { LoadingOutlined } from '@ant-design/icons'
import { Flex } from '../components/Grid'
export const SuspenseFallback = ({ style }) => (
<Flex style={{ justifyContent: 'center', alignItems: 'center', minHeight: '400px', ...style }}>
<LoadingOutlined />
<div style={{ marginLeft: '10px' }}>Страница загружается, пожалуйста, подождите...</div>
</Flex>
)