From cdda558b3aa25b746d19ea12e3cfb7bc3f8ed506 Mon Sep 17 00:00:00 2001
From: Roman Borovik <31778230+Starmordar@users.noreply.github.com>
Date: Fri, 24 Nov 2023 19:49:05 +0300
Subject: [PATCH] Make BlizzardLoader default page loader (#43)

---
 .../src/components/common/BlizzardLoader.tsx  | 20 +++++++++----------
 frontend/src/components/common/Loading.tsx    | 11 ----------
 frontend/src/index.css                        |  7 -------
 frontend/src/routes/index.tsx                 |  8 ++++----
 4 files changed, 14 insertions(+), 32 deletions(-)
 delete mode 100644 frontend/src/components/common/Loading.tsx

diff --git a/frontend/src/components/common/BlizzardLoader.tsx b/frontend/src/components/common/BlizzardLoader.tsx
index 0b391956..118fdf9f 100644
--- a/frontend/src/components/common/BlizzardLoader.tsx
+++ b/frontend/src/components/common/BlizzardLoader.tsx
@@ -1,19 +1,19 @@
-import { Grid, Typography } from '@mui/material';
+import { cn } from '@/utils/classnames';
 
-const BlizzardLoader = () => {
+interface IProps {
+  className?: string;
+}
+const BlizzardLoader = ({ className }: IProps) => {
   return (
-    <Grid
-      className="loader-container"
-      direction="column"
-      sx={{ position: 'absolute', display: 'flex' }}
-    >
-      <div className="loader">
+    <div className={cn(className, 'absolute top-1/2 right-1/2 translate-x-2/4 -translate-y-2/4')}>
+      <div className="loader-container">
         <div className="blizzard-loader one"></div>
         <div className="blizzard-loader two"></div>
         <div className="blizzard-loader three"></div>
       </div>
-      <Typography component="span">LOADING...</Typography>
-    </Grid>
+
+      <span className="uppercase">Loading...</span>
+    </div>
   );
 };
 
diff --git a/frontend/src/components/common/Loading.tsx b/frontend/src/components/common/Loading.tsx
deleted file mode 100644
index 4161e406..00000000
--- a/frontend/src/components/common/Loading.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Grid, CircularProgress } from '@mui/material';
-
-const Loading = ({ size = 40 }) => {
-  return (
-    <Grid container justifyContent="center" alignItems="center">
-      <CircularProgress size={size} />
-    </Grid>
-  );
-};
-
-export default Loading;
diff --git a/frontend/src/index.css b/frontend/src/index.css
index ed3ab2ec..72f6f4ed 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -106,13 +106,6 @@ body {
 }
 
 .loader-container {
-  position: absolute;
-
-  top: calc(50% - 32px);
-  left: calc(50% - 32px);
-}
-
-.loader {
   width: 64px;
   height: 64px;
   border-radius: 50%;
diff --git a/frontend/src/routes/index.tsx b/frontend/src/routes/index.tsx
index 8975e71f..3ddc0240 100644
--- a/frontend/src/routes/index.tsx
+++ b/frontend/src/routes/index.tsx
@@ -1,18 +1,18 @@
 import loadable from '@loadable/component';
 import { BrowserRouter, Routes as ReactRouterDomRoutes, Route } from 'react-router-dom';
 
-import Loading from '@/components/common/Loading';
+import BlizzardLoader from '@/components/common/BlizzardLoader';
 import { publicUrls } from '@/config';
 
 const { page } = publicUrls;
 const ActivityScreen = loadable(() => import('@/containers/Activity'), {
-  fallback: <Loading />,
+  fallback: <BlizzardLoader />,
 });
 const MetaScreen = loadable(() => import('@/containers/Meta'), {
-  fallback: <Loading />,
+  fallback: <BlizzardLoader />,
 });
 const ProfileScreen = loadable(() => import('@/containers/Profile'), {
-  fallback: <Loading />,
+  fallback: <BlizzardLoader />,
 });
 
 const AppRoutes = () => {