From fa49c175dd48779ccfb280f006522c2b2313842b Mon Sep 17 00:00:00 2001
From: InfamousVague <infamousvaguerat@gmail.com>
Date: Tue, 16 Jan 2024 14:39:26 -0500
Subject: [PATCH] chore(Loader): Add larger version of the loaders

---
 kit/src/elements/loader/mod.rs     | 11 ++++++++++-
 kit/src/elements/loader/style.scss | 18 ++++++++++++++++++
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/kit/src/elements/loader/mod.rs b/kit/src/elements/loader/mod.rs
index ad3323f806e..58b4950aa96 100644
--- a/kit/src/elements/loader/mod.rs
+++ b/kit/src/elements/loader/mod.rs
@@ -6,13 +6,22 @@ use dioxus::prelude::*;
 pub struct Props {
     #[props(optional)]
     spinning: Option<bool>,
+    #[props(optional)]
+    large: Option<bool>,
+}
+
+pub fn is_large(cx: &Scope<Props>) -> bool {
+    if let Some(f) = cx.props.large.as_ref() {
+        return *f;
+    }
+    false
 }
 
 #[allow(non_snake_case)]
 pub fn Loader(cx: Scope<Props>) -> Element {
     cx.render(rsx!(
     div {
-        class: "loader",
+        class: if is_large(&cx) { "loader large" } else { "loader" },
         div {
             class: "spin",
             IconElement { icon: Icon::Loader }
diff --git a/kit/src/elements/loader/style.scss b/kit/src/elements/loader/style.scss
index 2de80a389ee..68e132d6b50 100644
--- a/kit/src/elements/loader/style.scss
+++ b/kit/src/elements/loader/style.scss
@@ -18,6 +18,24 @@
         fill: transparent;
         stroke: var(--text-color);
     }
+
+    &.large {
+      width: 60px;
+      height: 60px;
+
+      .spin {
+        width: 60px;
+        height: 60px;
+        top: 30px;
+        left: 30px;
+      }
+
+      svg {
+        height: 60px;
+        width: 60px;
+        stroke-width: 0.02rem;
+      }
+    }
 }
 
 @keyframes spin {