Merge pull request #81 from Chat-Your-Way/CHAT-214-Loader

it works

Author: PDigitator

package-lock.json

@@ -24,6 +24,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.45.4",
+    "react-loader-spinner": "^6.1.6",
     "react-redux": "^8.1.1",
     "react-responsive": "^9.0.2",
     "react-router-dom": "^6.16.0",

package.json

@@ -0,0 +1,19 @@
+import { Oval } from 'react-loader-spinner';
+import { LoaderWrap } from './Loader.styled';
+
+const Loader = () => {
+  return (
+    <LoaderWrap>
+      <Oval
+        color="#ACADFF"
+        secondaryColor="#ACADFF"
+        strokeWidth="2"
+        animationDuration="1"
+        width="96"
+        visible={true}
+      />
+    </LoaderWrap>
+  );
+};
+
+export default Loader;

src/components/Loader/Loader.jsx

@@ -0,0 +1,9 @@
+import styled from '@emotion/styled';
+import { Box } from '@mui/material';
+
+export const LoaderWrap = styled(Box)`
+  position: fixed;
+  top: calc(50% - 48px);
+  left: calc(50% - 48px);
+  z-index: 1100;
+`;

src/components/Loader/Loader.styled.js

@@ -0,0 +1 @@
+export { default } from './Loader.jsx';

src/components/Loader/index.js

@@ -4,6 +4,7 @@ import { PrivateRoute } from './PrivateRoute';
 import { PublicRoute } from './PublicRoute';
 import { PATH } from '../../constans/routes';
 import SharedLayout from '../../ui-kit/components/SharedLayout/SharedLayout';
+import Loader from '../Loader';
 import AuthorizationPage from '../../pages/AuthorizationPage';
 import LoginPage from '../../pages/LoginPage/LoginPage';
 import RegistrationPage from '../../pages/RegistrationPage';
@@ -20,7 +21,7 @@ import Chat from '../Chat';
 
 const Router = () => {
   return (
-    <Suspense fallback="Loading...">
+    <Suspense fallback={<Loader />}>
       <Routes>
         {/*Public Route*/}
         <Route path={PATH.MAIN} element={<PublicRoute />}>