Make BlizzardLoader default page loader (#43)

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>
   );
 };
 

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%;

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 = () => {