feat: add button component loading prop

Cargo.toml

@@ -13,7 +13,7 @@ license = "MIT"
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [dependencies]
-leptos = { version = "0.5.0",  features = ["csr"] }
+leptos = { version = "0.5.0", features = ["csr"] }
 stylers = "0.3.2"
 web-sys = { version = "0.3.62", features = ["DomRect"] }
 leptos_dom = { version = "0.5.0" }
@@ -22,6 +22,7 @@ icondata = { version = "0.0.7", features = [
     "AiCloseOutlined",
     "AiCheckOutlined",
     "AiLeftOutlined",
+    "AiLoadingOutlined",
 ] }
 
 [workspace]

gh-pages/src/pages/button/mod.rs

@@ -92,6 +92,7 @@ pub fn ButtonPage() -> impl IntoView {
                     ""
                 </DemoCode>
             </Demo>
+            <LoadingButton />
             <h3>"style"</h3>
             <Demo>
                 <Space>
@@ -108,3 +109,32 @@ pub fn ButtonPage() -> impl IntoView {
         </div>
     }
 }
+
+#[component]
+pub fn LoadingButton() -> impl IntoView {
+    let loading = create_rw_signal(false);
+    view! {
+        <h3>"loading"</h3>
+        <Demo>
+            <Space>
+                <Button loading color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined on:click=move |_| loading.set(true)>
+                    "ERROR Color Icon"
+                </Button>
+                <Button loading color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined round=true>
+                </Button>
+            </Space>
+            <DemoCode slot html=highlight_str!(r#"
+                let loading = create_rw_signal(false);
+                view! {
+                    <Button loading color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined>
+                        "ERROR Color Icon"
+                    </Button>
+                    <Button loading color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined round=true>
+                    </Button>
+                }
+            "#, "rust")>
+                ""
+            </DemoCode>
+        </Demo>
+    }
+}

src/button/button.css

@@ -43,3 +43,9 @@
     padding: 0 10px;
     border-radius: 50%;
 }
+
+@keyframes meltLoadingCircle {
+    100% {
+        transform: rotate(360deg);
+    }
+}

src/button/mod.rs

@@ -57,6 +57,7 @@ pub fn Button(
     #[prop(optional, into)] color: MaybeSignal<ButtonColor>,
     #[prop(optional, into)] round: MaybeSignal<bool>,
     #[prop(optional, into)] icon: Option<Icon>,
+    #[prop(optional, into)] loading: MaybeSignal<bool>,
     #[prop(optional)] children: Option<ChildrenFn>,
 ) -> impl IntoView {
     let theme = use_theme(Theme::light);
@@ -89,7 +90,7 @@ pub fn Button(
         ""
     };
 
-    view! { class=class_name,
+    view! {class=class_name,
         <button
             class:melt-button=true
             class=("melt-button--text", move || type_.get() == ButtonType::TEXT)
@@ -97,9 +98,21 @@ pub fn Button(
             class=("melt-button--round", move || round.get())
             style=move || format!("{}{}", css_vars.get(), style.get())
             >
-                <OptionComp value=icon let:icon>
+                {
-                    <Icon icon=icon style=icon_style/>
+                    move || {
-                </OptionComp>
+                        if loading.get() {
+                            view! {
+                                <Icon icon=Icon::from(AiIcon::AiLoadingOutlined) style=format!("animation: meltLoadingCircle 1s infinite linear;{icon_style}")/>
+                            }.into()
+                        } else if let Some(icon) = icon {
+                            view! {
+                                <Icon icon=icon style=icon_style/>
+                            }.into()
+                        } else {
+                            None
+                        }
+                    }
+                }
                 <OptionComp value=children let:children>
                     { children() }
                 </OptionComp>