💄 Add Wallpaper, Spinner and LoadingPage widgets

src/_base.scss

@@ -3,6 +3,53 @@ $icon-size: $font-size * 2;
 
 $border-style: thin solid #BED6E0;
 
+$greyscale-90: #1B1B1B;
+$greyscale-80: #303030;
+$greyscale-70: #474747;
+$greyscale-60: #5E5E5E;
+$greyscale-50: #777777;
+$greyscale-40: #919191;
+$greyscale-30: #ABABAB;
+$greyscale-20: #C6C6C6;
+$greyscale-10: #E2E2E2;
+$greyscale-0: #FFFFFF;
+
+$color-primary-150: #E2F2F7;
+$color-primary-140: #C4E5EE;
+$color-primary-130: #A5D7E6;
+$color-primary-120: #83CADE;
+$color-primary-110: #5CBDD5;
+$color-primary-100: #1DB2CF;
+$color-primary-90: #0092AF;
+$color-primary-80: #007691;
+$color-primary-70: #005A75;
+$color-primary-60: #004059;
+$color-primary-50: #002740;
+
+$color-secondary_150: #EAE5F3;
+$color-secondary_140: #D5CCE7;
+$color-secondary_130: #BFB3DB;
+$color-secondary_120: #AA9BCF;
+$color-secondary_110: #9583C3;
+$color-secondary_100: #7E6BB6;
+$color-secondary_90: #6957A0;
+$color-secondary_80: #53448A;
+$color-secondary_70: #3E3174;
+$color-secondary_60: #281F5F;
+$color-secondary_50: #110E4B;
+
+$color-ternary_150: #FCE0E9;
+$color-ternary_140: #F7C1D4;
+$color-ternary_130: #F1A1BF;
+$color-ternary_120: #E981AA;
+$color-ternary_110: #E05F96;
+$color-ternary_100: #D53583;
+$color-ternary_90: #BC106D;
+$color-ternary_80: #A30059;
+$color-ternary_70: #8B0046;
+$color-ternary_60: #720033;
+$color-ternary_50: #5A0022;
+
 body {
     height: 100vh;
     width: 100vw;

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%;
+}