♻️ Make Spinner reusable (not only by loading view)

src/components/loading.rs

@@ -1,8 +1,8 @@
 use dioxus::prelude::*;
 use tracing::debug;
 
-use crate::components::spinner::Spinner;
+use super::spinner::Spinner;
-use crate::components::wallpaper::Wallpaper;
+use super::wallpaper::Wallpaper;
 
 turf::style_sheet!("src/components/loading.scss");
 
@@ -18,7 +18,10 @@ pub fn LoadingPage(cx: Scope) -> Element {
 
             Wallpaper {},
 
+            div {
+                class: ClassName::SPINNER,
                 Spinner {},
             }
+        }
     })
 }

src/components/loading.scss

@@ -1,4 +1,5 @@
 @import "../_base.scss"
+@import "./spinner.scss"
 
 .root {
     height: 100%;
@@ -8,6 +9,73 @@
     align-items: center;
     justify-content: center;
 
-    overflow: hidden;
+    .spinner {
+        height: 5%;
+        aspect-ratio: $logo-aspect-ratio;
+
+        position: absolute;
+
+        $logo-center-pos: calc(50% + ($background-height / 2) - ($logo-height / 2));
+
+        @media (0px < height <= calc($background-height * 5)) {
+            top: $logo-center-pos;
+        }
+        @media (calc($background-height * 5) < height <= calc($background-height * 6)) {
+            top: calc($logo-center-pos + ($background-height * 1));
+        }
+        @media (calc($background-height * 6) < height <= calc($background-height * 8)) {
+            top: calc($logo-center-pos + ($background-height * 2));
+        }
+        @media (calc($background-height * 8) < height <= calc($background-height * 10)) {
+            top: calc($logo-center-pos + ($background-height * 3));
+        }
+        @media (calc($background-height * 10) < height <= calc($background-height * 12)) {
+            top: calc($logo-center-pos + ($background-height * 4));
+        }
+        @media (calc($background-height * 12) < height <= calc($background-height * 14)) {
+            top: calc($logo-center-pos + ($background-height * 5));
+        }
+        @media (calc($background-height * 14) < height <= calc($background-height * 16)) {
+            top: calc($logo-center-pos + ($background-height * 6));
+        }
+        @media (calc($background-height * 16) < height <= calc($background-height * 18)) {
+            top: calc($logo-center-pos + ($background-height * 7));
+        }
+        @media (calc($background-height * 18) < height <= calc($background-height * 20)) {
+            top: calc($logo-center-pos + ($background-height * 8));
+        }
+        @media (calc($background-height * 20) < height <= calc($background-height * 22)) {
+            top: calc($logo-center-pos + ($background-height * 9));
+        }
+        @media (calc($background-height * 22) < height <= calc($background-height * 24)) {
+            top: calc($logo-center-pos + ($background-height * 10));
+        }
+        @media (calc($background-height * 24) < height <= calc($background-height * 26)) {
+            top: calc($logo-center-pos + ($background-height * 11));
+        }
+        @media (calc($background-height * 26) < height <= calc($background-height * 28)) {
+            top: calc($logo-center-pos + ($background-height * 12));
+        }
+        @media (calc($background-height * 28) < height <= calc($background-height * 30)) {
+            top: calc($logo-center-pos + ($background-height * 13));
+        }
+        @media (calc($background-height * 30) < height <= calc($background-height * 32)) {
+            top: calc($logo-center-pos + ($background-height * 14));
+        }
+        @media (calc($background-height * 32) < height <= calc($background-height * 34)) {
+            top: calc($logo-center-pos + ($background-height * 15));
+        }
+        @media (calc($background-height * 34) < height <= calc($background-height * 36)) {
+            top: calc($logo-center-pos + ($background-height * 16));
+        }
+        @media (calc($background-height * 36) < height <= calc($background-height * 38)) {
+            top: calc($logo-center-pos + ($background-height * 17));
+        }
+        @media (calc($background-height * 38) < height <= calc($background-height * 40)) {
+            top: calc($logo-center-pos + ($background-height * 18));
+        }
+
+        background-color: $greyscale-0;
+    }
 
 }

src/components/spinner.scss

@@ -1,78 +1,14 @@
 @import "../_base.scss"
 
-.root {
 $background-height: 128px;
 $background-width: 384px;
 $logo-height: calc(32px * 2);
 $logo-width: calc(64px * 2);
+$logo-aspect-ratio: calc($logo-width / $logo-height);
 
-    height: $logo-height;
+.root {
-    width: $logo-width;
+    height: 100%;
-
+    width: 100%;
-    position: absolute;
-    z-index: 1;
-
-    $logo-center-pos: calc(50% + ($background-height / 2) - ($logo-height / 2));
-
-    @media (0px < height <= calc($background-height * 5)) {
-        top: $logo-center-pos;
-    }
-    @media (calc($background-height * 5) < height <= calc($background-height * 6)) {
-        top: calc($logo-center-pos + ($background-height * 1));
-    }
-    @media (calc($background-height * 6) < height <= calc($background-height * 8)) {
-        top: calc($logo-center-pos + ($background-height * 2));
-    }
-    @media (calc($background-height * 8) < height <= calc($background-height * 10)) {
-        top: calc($logo-center-pos + ($background-height * 3));
-    }
-    @media (calc($background-height * 10) < height <= calc($background-height * 12)) {
-        top: calc($logo-center-pos + ($background-height * 4));
-    }
-    @media (calc($background-height * 12) < height <= calc($background-height * 14)) {
-        top: calc($logo-center-pos + ($background-height * 5));
-    }
-    @media (calc($background-height * 14) < height <= calc($background-height * 16)) {
-        top: calc($logo-center-pos + ($background-height * 6));
-    }
-    @media (calc($background-height * 16) < height <= calc($background-height * 18)) {
-        top: calc($logo-center-pos + ($background-height * 7));
-    }
-    @media (calc($background-height * 18) < height <= calc($background-height * 20)) {
-        top: calc($logo-center-pos + ($background-height * 8));
-    }
-    @media (calc($background-height * 20) < height <= calc($background-height * 22)) {
-        top: calc($logo-center-pos + ($background-height * 9));
-    }
-    @media (calc($background-height * 22) < height <= calc($background-height * 24)) {
-        top: calc($logo-center-pos + ($background-height * 10));
-    }
-    @media (calc($background-height * 24) < height <= calc($background-height * 26)) {
-        top: calc($logo-center-pos + ($background-height * 11));
-    }
-    @media (calc($background-height * 26) < height <= calc($background-height * 28)) {
-        top: calc($logo-center-pos + ($background-height * 12));
-    }
-    @media (calc($background-height * 28) < height <= calc($background-height * 30)) {
-        top: calc($logo-center-pos + ($background-height * 13));
-    }
-    @media (calc($background-height * 30) < height <= calc($background-height * 32)) {
-        top: calc($logo-center-pos + ($background-height * 14));
-    }
-    @media (calc($background-height * 32) < height <= calc($background-height * 34)) {
-        top: calc($logo-center-pos + ($background-height * 15));
-    }
-    @media (calc($background-height * 34) < height <= calc($background-height * 36)) {
-        top: calc($logo-center-pos + ($background-height * 16));
-    }
-    @media (calc($background-height * 36) < height <= calc($background-height * 38)) {
-        top: calc($logo-center-pos + ($background-height * 17));
-    }
-    @media (calc($background-height * 38) < height <= calc($background-height * 40)) {
-        top: calc($logo-center-pos + ($background-height * 18));
-    }
-
-    background-color: $greyscale-0;
 
     svg {
         $fps: 4;

src/components/wallpaper.rs

@@ -8,6 +8,10 @@ pub fn Wallpaper(cx: Scope) -> Element {
         style { STYLE_SHEET },
         div {
             class: ClassName::ROOT,
+
+            div {
+                class: ClassName::CONTENT,
+            }
         }
     })
 }

src/components/wallpaper.scss

@@ -1,9 +1,21 @@
 @import "../_base.scss"
 
 .root {
+    height: 100%;
+    width: 100%;
+    z-index: -1;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    overflow: hidden;
+
+    .content {
         background-image: url("./images/background.svg");
         background-position: center;
 
         width: 150%;
         height: 150%;
     }
+}