diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 1b1561b..940d0af 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,8 +4,11 @@
-
-
+
+
+
+
+
@@ -193,14 +196,6 @@
-
-
- 1719006274218
-
-
-
- 1719006274218
-
1719006515710
@@ -585,7 +580,15 @@
1719359243294
-
+
+
+ 1719359368236
+
+
+
+ 1719359368236
+
+
@@ -606,7 +609,6 @@
-
@@ -631,7 +633,8 @@
-
+
+
diff --git a/src/components/Loading.css b/src/components/Loading.css
new file mode 100644
index 0000000..7ca9ef8
--- /dev/null
+++ b/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);
+ }
+}
diff --git a/src/components/Loading.tsx b/src/components/Loading.tsx
index dfa8473..431f6d1 100644
--- a/src/components/Loading.tsx
+++ b/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 (
-
-
- Loading
-
+
+ Loading
-
+
);
}
-export default FuseLoading;
+export default Loading;