chore: loading screen

src/components/Loading.css

@@ -0,0 +1,51 @@
+#spinner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 40px;
+  width: 56px;
+}
+
+#spinner > div {
+  width: 12px;
+  height: 12px;
+  background-color: #1e96f7;
+  border-radius: 100%;
+  display: inline-block;
+  -webkit-animation: fuse-bouncedelay 1s infinite ease-in-out both;
+  animation: fuse-bouncedelay 1s infinite ease-in-out both;
+}
+
+#spinner .bounce1 {
+  -webkit-animation-delay: -0.32s;
+  animation-delay: -0.32s;
+}
+
+#spinner .bounce2 {
+  -webkit-animation-delay: -0.16s;
+  animation-delay: -0.16s;
+}
+
+@-webkit-keyframes fuse-bouncedelay {
+  0%,
+  80%,
+  100% {
+    -webkit-transform: scale(0);
+  }
+  40% {
+    -webkit-transform: scale(1);
+  }
+}
+
+@keyframes fuse-bouncedelay {
+  0%,
+  80%,
+  100% {
+    -webkit-transform: scale(0);
+    transform: scale(0);
+  }
+  40% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}

src/components/Loading.tsx

@@ -1,32 +1,20 @@
 import Typography from '@mui/material/Typography';
-import { useState } from 'react';
 import Box from '@mui/material/Box';
-import { useTimeout } from '../hooks';
-
-export type FuseLoadingProps = {
-  delay?: number;
-  className?: string;
-};
-
-/**
- * FuseLoading displays a loading state with an optional delay
- */
-function FuseLoading(props: FuseLoadingProps) {
-  const { delay = 0, className } = props;
-  const [showLoading, setShowLoading] = useState(!delay);
-
-  useTimeout(() => {
-    setShowLoading(true);
-  }, delay);
+import './Loading.css';
 
+function Loading() {
   return (
-    <div>
-      <Typography
-        className="text-13 sm:text-20 -mb-16 font-medium"
-        color="text.secondary"
-      >
-        Loading
-      </Typography>
+    <Box
+      sx={{
+        width: '100%',
+        height: 0.8 * window.innerHeight,
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center'
+      }}
+    >
+      <Typography color="primary">Loading</Typography>
       <Box
         id="spinner"
         sx={{
@@ -39,8 +27,8 @@ function FuseLoading(props: FuseLoadingProps) {
         <div className="bounce2" />
         <div className="bounce3" />
       </Box>
-    </div>
+    </Box>
   );
 }
 
-export default FuseLoading;
+export default Loading;