refactor(chart): lazy load Chart.js with suspense

- chore: add ico favicon
- chore: lint
- chore: add react-hooks lint rules

1 files changed, 21 insertions, 40 deletions

diff --git a/src/components/Loading.module.scss b/src/components/Loading.module.scss
index 7166140..05f8f3f 100644
--- a/src/components/Loading.module.scss
+++ b/src/components/Loading.module.scss
@@ -1,50 +1,31 @@
-$color1: #2a477a;
-$color2: #dddddd;
+// $color1: #2a477a;
+$color1: #dddddd;
 
-@keyframes moveRight {
-  0% {
-    transform: translate(-50px);
-  }
-
-  100% {
-    transform: translate(10px);
-  }
-}
-
-@keyframes moveLeft {
-  0% {
-    transform: translate(50px);
-  }
-
-  100% {
-    transform: translate(-10px);
-  }
-}
+$size: 40px;
 
 .loading {
-  position: relative;
   width: 100%;
-  height: 300px;
-  margin: 0 auto;
-  height: 30vh;
-}
-
-.circle {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  position: absolute;
-  top: 50%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
-.left {
+.pulse {
+  width: $size;
+  height: $size;
+  margin: 10px;
   background-color: $color1;
-  left: 50%;
-  animation: moveRight 1s ease-in-out 0s infinite alternate;
+  border-radius: 100%;
+  animation: pulseScaleOut 1s infinite ease-in-out;
 }
 
-.right {
-  background-color: $color2;
-  right: 50%;
-  animation: moveLeft 1s ease-in-out 0s infinite alternate;
+@keyframes pulseScaleOut {
+  0% {
+    transform: scale(0);
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
 }