From 46c251ef90354b11c303130dbcdd889c9a6eaf5b Mon Sep 17 00:00:00 2001
From: Adrien <me@adrien.run>
Date: Sun, 3 Mar 2024 23:32:55 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Make=20Spinner=20reusable?=
 =?UTF-8?q?=20(not=20only=20by=20loading=20view)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/loading.rs     |  9 ++--
 src/components/loading.scss   | 70 +++++++++++++++++++++++++++++-
 src/components/spinner.scss   | 80 ++++-------------------------------
 src/components/wallpaper.rs   |  4 ++
 src/components/wallpaper.scss | 20 +++++++--
 5 files changed, 103 insertions(+), 80 deletions(-)

diff --git a/src/components/loading.rs b/src/components/loading.rs
index 1cd6c2d..6271980 100644
--- a/src/components/loading.rs
+++ b/src/components/loading.rs
@@ -1,8 +1,8 @@
 use dioxus::prelude::*;
 use tracing::debug;
 
-use crate::components::spinner::Spinner;
-use crate::components::wallpaper::Wallpaper;
+use super::spinner::Spinner;
+use super::wallpaper::Wallpaper;
 
 turf::style_sheet!("src/components/loading.scss");
 
@@ -18,7 +18,10 @@ pub fn LoadingPage(cx: Scope) -> Element {
 
             Wallpaper {},
 
-            Spinner {},
+            div {
+                class: ClassName::SPINNER,
+                Spinner {},
+            }
         }
     })
 }
diff --git a/src/components/loading.scss b/src/components/loading.scss
index f542f5b..424c7cf 100644
--- a/src/components/loading.scss
+++ b/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;
+    }
 
 }
diff --git a/src/components/spinner.scss b/src/components/spinner.scss
index 655c01f..e5e979b 100644
--- a/src/components/spinner.scss
+++ b/src/components/spinner.scss
@@ -1,78 +1,14 @@
 @import "../_base.scss"
 
+$background-height: 128px;
+$background-width: 384px;
+$logo-height: calc(32px * 2);
+$logo-width: calc(64px * 2);
+$logo-aspect-ratio: calc($logo-width / $logo-height);
+
 .root {
-    $background-height: 128px;
-    $background-width: 384px;
-    $logo-height: calc(32px * 2);
-    $logo-width: calc(64px * 2);
-
-    height: $logo-height;
-    width: $logo-width;
-
-    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;
+    height: 100%;
+    width: 100%;
 
     svg {
         $fps: 4;
diff --git a/src/components/wallpaper.rs b/src/components/wallpaper.rs
index 1630b8a..b38545c 100644
--- a/src/components/wallpaper.rs
+++ b/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,
+            }
         }
     })
 }
diff --git a/src/components/wallpaper.scss b/src/components/wallpaper.scss
index cb3f70e..a8b7c8e 100644
--- a/src/components/wallpaper.scss
+++ b/src/components/wallpaper.scss
@@ -1,9 +1,21 @@
 @import "../_base.scss"
 
 .root {
-    background-image: url("./images/background.svg");
-    background-position: center;
+    height: 100%;
+    width: 100%;
+    z-index: -1;
 
-    width: 150%;
-    height: 150%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    overflow: hidden;
+
+    .content {
+        background-image: url("./images/background.svg");
+        background-position: center;
+
+        width: 150%;
+        height: 150%;
+    }
 }