💄 Add Wallpaper, Spinner and LoadingPage widgets

src/components/loading.rs

@@ -0,0 +1,24 @@
+use dioxus::prelude::*;
+use tracing::debug;
+
+use crate::components::spinner::Spinner;
+use crate::components::wallpaper::Wallpaper;
+
+turf::style_sheet!("src/components/loading.scss");
+
+#[component]
+pub fn LoadingPage(cx: Scope) -> Element {
+    debug!("LoadingPage rendering");
+
+    cx.render(rsx! {
+        style { STYLE_SHEET },
+
+        div {
+            class: ClassName::ROOT,
+
+            Wallpaper {},
+
+            Spinner {},
+        }
+    })
+}

src/components/loading.scss

@@ -0,0 +1,13 @@
+@import "../_base.scss"
+
+.root {
+    height: 100%;
+    width: 100%;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    overflow: hidden;
+
+}

src/components/mod.rs

@@ -3,5 +3,8 @@ pub mod chats_window;
 pub mod contacts_window;
 pub mod header;
 pub mod icons;
+pub mod loading;
 pub mod login;
 pub mod main_window;
+pub mod spinner;
+pub mod wallpaper;

src/components/spinner.rs

@@ -0,0 +1,38 @@
+use dioxus::prelude::*;
+use dioxus_free_icons::{Icon, IconShape};
+
+turf::style_sheet!("src/components/spinner.scss");
+
+#[derive(Copy, Clone, Debug)]
+struct _Spinner;
+impl IconShape for _Spinner {
+    fn view_box(&self) -> String {
+        String::from("0 0 184 94")
+    }
+    fn xmlns(&self) -> String {
+        String::from("http://www.w3.org/2000/svg")
+    }
+    fn child_elements(&self) -> LazyNodes {
+        rsx! {
+            path {
+                "stroke-linejoin": "round",
+                "stroke-width": "6",
+                d: "M121.208 2 2 57.011l70.927-.265L61.363 92 182 36.724h-69.498L121.208 2Z"
+            }
+        }
+    }
+}
+
+#[component]
+pub fn Spinner(cx: Scope) -> Element {
+    cx.render(rsx! {
+        style { STYLE_SHEET },
+
+        div {
+            class: ClassName::ROOT,
+            Icon {
+                icon: _Spinner,
+            }
+        }
+    })
+}

src/components/spinner.scss

@@ -0,0 +1,103 @@
+@import "../_base.scss"
+
+.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;
+
+    svg {
+        $fps: 4;
+        $duration_sec: 3;
+        $steps: calc($duration_sec * $fps);
+
+        height: 100%;
+        width: 100%;
+
+        fill: $color-primary-100;
+        stroke: $greyscale-90;
+
+        animation: 3s multicolor linear infinite;
+        animation-timing-function: steps($steps, end);
+
+        @keyframes multicolor {
+            0% {
+                fill: $color-primary-100;
+            }
+            33% {
+                fill: $color-secondary-100;
+            }
+            66% {
+                fill: $color-ternary-100;
+            }
+        }
+    }
+}

src/components/wallpaper.rs

@@ -0,0 +1,13 @@
+use dioxus::prelude::*;
+
+turf::style_sheet!("src/components/wallpaper.scss");
+
+#[component]
+pub fn Wallpaper(cx: Scope) -> Element {
+    cx.render(rsx! {
+        style { STYLE_SHEET },
+        div {
+            class: ClassName::ROOT,
+        }
+    })
+}

src/components/wallpaper.scss

@@ -0,0 +1,9 @@
+@import "../_base.scss"
+
+.root {
+    background-image: url("./images/background.svg");
+    background-position: center;
+
+    width: 150%;
+    height: 150%;
+}