From c12ce68a9604a82a5493e8f8f5e1ab7bb7af7fbf Mon Sep 17 00:00:00 2001
From: goodm2ice <hamel2517@gmail.com>
Date: Tue, 21 Dec 2021 17:41:02 +0500
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B0=20=D1=81=D1=82=D1=80=D0=B0=D0=BD=D0=B8=D1=86=D0=B0?=
 =?UTF-8?q?-=D0=B7=D0=B0=D0=B3=D0=BB=D1=83=D1=88=D0=BA=D0=B0=20=D0=B4?=
 =?UTF-8?q?=D0=BB=D1=8F=20Suspense?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/AdminPanel/index.jsx | 3 ++-
 src/pages/SuspenseFallback.jsx | 9 +++++++++
 2 files changed, 11 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/SuspenseFallback.jsx

diff --git a/src/pages/AdminPanel/index.jsx b/src/pages/AdminPanel/index.jsx
index 3f316ea..3d25218 100644
--- a/src/pages/AdminPanel/index.jsx
+++ b/src/pages/AdminPanel/index.jsx
@@ -2,6 +2,7 @@ import { Layout, Menu } from 'antd'
 import { lazy, Suspense } from 'react'
 import { Switch, Link, useParams, Redirect, Route } from 'react-router-dom'
 import { PrivateMenuItem, PrivateRoute } from '../../components/Private'
+import { SuspenseFallback } from '../SuspenseFallback'
 
 const ClusterController = lazy(() => import('./ClusterController'))
 const CompanyController = lazy(() => import('./CompanyController'))
@@ -47,7 +48,7 @@ export const AdminPanel = () => {
 
             <Layout>
                 <Layout.Content className={'site-layout-background'}>
-                    <Suspense fallback={<div>Loading...</div>}>
+                    <Suspense fallback={<SuspenseFallback />}>
                         <Switch>
                             <PrivateRoute permission={   'deposit_editor'} path={`${rootPath}/deposit`   } component={   DepositController} />
                             <PrivateRoute permission={   'cluster_editor'} path={`${rootPath}/cluster`   } component={   ClusterController} />
diff --git a/src/pages/SuspenseFallback.jsx b/src/pages/SuspenseFallback.jsx
new file mode 100644
index 0000000..438ae41
--- /dev/null
+++ b/src/pages/SuspenseFallback.jsx
@@ -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>
+)