feat: loading bar transition end

demo/gh-pages

@@ -1 +0,0 @@
-Subproject commit faaa4dfa5547b4c3e117999f4ed4cf2332006f2b

demo/src/app.rs

@@ -31,8 +31,16 @@ pub fn App() -> impl IntoView {
 
 #[component]
 fn TheRouter() -> impl IntoView {
+    let loading_bar = use_loading_bar();
+    let set_is_routing = SignalSetter::map(move |is_routing| {
+        if is_routing {
+            loading_bar.start();
+        } else {
+            loading_bar.finish();
+        }
+    });
     view! {
-        <Router base="/thaw">
+        <Router base="/thaw" set_is_routing>
             <Routes base="/thaw".to_string()>
                 <Route path="/" view=Home/>
                 <Route path="/components" view=ComponentsPage>
@@ -66,6 +74,7 @@ fn TheRouter() -> impl IntoView {
                     <Route path="/switch" view=SwitchPage/>
                     <Route path="/tag" view=TagPage/>
                     <Route path="/upload" view=UploadPage/>
+                    <Route path="/loading-bar" view=LoadingBarPage/>
                 </Route>
                 <Route path="/mobile/tabbar" view=TabbarDemoPage/>
                 <Route path="/mobile/nav-bar" view=NavBarDemoPage/>
@@ -81,7 +90,9 @@ fn Provider(theme: RwSignal<Theme>, children: Children) -> impl IntoView {
         <ThemeProvider theme>
             <GlobalStyle />
             <MessageProvider>
+                <LoadingBarProvider>
                     {children()}
+                </LoadingBarProvider>
             </MessageProvider>
         </ThemeProvider>
     }

demo/src/pages/components.rs

@@ -167,6 +167,10 @@ fn gen_menu_data() -> Vec<MenuGroupOption> {
         MenuGroupOption {
             label: "Navigation Components".into(),
             children: vec![
+                MenuItemOption {
+                    value: "loading-bar".into(),
+                    label: "Loading Bar".into(),
+                },
                 MenuItemOption {
                     value: "menu".into(),
                     label: "Menu".into(),

demo/src/pages/loading_bar/mod.rs

@@ -0,0 +1,62 @@
+use crate::components::{Demo, DemoCode};
+use leptos::*;
+use prisms::highlight_str;
+use thaw::*;
+
+#[component]
+pub fn LoadingBarPage() -> impl IntoView {
+    let loading_bar = use_loading_bar();
+    let start = move |_| {
+        loading_bar.start();
+    };
+    let finish = move |_| {
+        loading_bar.finish();
+    };
+    let error = move |_| {
+        loading_bar.error();
+    };
+    view! {
+        <div style="width: 896px; margin: 0 auto;">
+            <h1>"Loading Bar"</h1>
+            <Alert variant=AlertVariant::Warning title="Prerequisite">
+                "If you want to use loading bar, you need to wrap the component where you call related methods inside LoadingBarProvider and use use_loading_bar to get the API."
+            </Alert>
+            <Demo>
+                <Space>
+                    <Button on_click=start>"start"</Button>
+                    <Button on_click=finish>"finish"</Button>
+                    <Button on_click=error>"error"</Button>
+                </Space>
+                <DemoCode
+                    slot
+                    html=highlight_str!(
+                        r#"
+                    let loading_bar = use_loading_bar();
+                    let start = move |_| {
+                        loading_bar.start();
+                    };
+                    let finish = move |_| {
+                        loading_bar.finish();
+                    };
+                    let error = move |_| {
+                        loading_bar.error();
+                    };
+                    view! {
+                        <Space>
+                            <Button on_click=start>"start"</Button>
+                            <Button on_click=finish>"finish"</Button>
+                            <Button on_click=error>"error"</Button>
+                        </Space>
+                    }
+                    "#,
+                        "rust"
+                    )
+                >
+
+                    ""
+                    ""
+                </DemoCode>
+            </Demo>
+        </div>
+    }
+}

demo/src/pages/mod.rs

@@ -14,6 +14,7 @@ mod icon;
 mod image;
 mod input;
 mod input_number;
+mod loading_bar;
 mod menu;
 mod message;
 mod mobile;
@@ -48,6 +49,7 @@ pub use icon::*;
 pub use image::*;
 pub use input::*;
 pub use input_number::*;
+pub use loading_bar::*;
 pub use menu::*;
 pub use message::*;
 pub use mobile::*;

src/loading_bar/mod.rs

@@ -5,7 +5,7 @@ use leptos::*;
 pub use loading_bar_provider::{use_loading_bar, LoadingBarProvider};
 
 #[derive(Clone)]
-pub struct LoadingBarRef {
+pub(crate) struct LoadingBarRef {
     start: Callback<()>,
     finish: Callback<()>,
     error: Callback<()>,
@@ -24,7 +24,7 @@ impl LoadingBarRef {
 }
 
 #[component]
-pub fn LoadingBar(#[prop(optional)] comp_ref: ComponentRef<LoadingBarRef>) -> impl IntoView {
+pub(crate) fn LoadingBar(#[prop(optional)] comp_ref: ComponentRef<LoadingBarRef>) -> impl IntoView {
     mount_style("loading-bar", include_str!("./loading-bar.css"));
     let theme = use_theme(Theme::light);
     let css_vars = create_memo(move |_| {
@@ -57,15 +57,20 @@ pub fn LoadingBar(#[prop(optional)] comp_ref: ComponentRef<LoadingBarRef>) -> im
                 .style("max-width", "80%");
         }
     });
+    let is_on_transitionend = store_value(false);
+    let on_transitionend = move |_| {
+        if is_on_transitionend.get_value() {
+            is_on_transitionend.set_value(false);
+            loading.set(false);
+        }
+    };
     let finish = Callback::new(move |_| {
         if let Some(loading_bar_ref) = loading_bar_ref.get_untracked() {
-            let loading_bar_ref = loading_bar_ref
+            loading_bar_ref
                 .style("background-color", "var(--thaw-background-color)")
                 .style("transition", "max-width 0.5s linear")
-                .style("max-width", "1000%");
+                .style("max-width", "100%");
-            loading_bar_ref.on(ev::transitionend, move |_| {
+            is_on_transitionend.set_value(true);
-                loading.set(false);
-            });
         }
     });
     let error = Callback::new(move |_| {
@@ -78,13 +83,11 @@ pub fn LoadingBar(#[prop(optional)] comp_ref: ComponentRef<LoadingBarRef>) -> im
                     .style("max-width", "0");
                 _ = loading_bar_ref.offset_width();
             }
-            let loading_bar_ref = loading_bar_ref
+            loading_bar_ref
                 .style("background-color", "var(--thaw-background-color-error)")
                 .style("transition", "max-width 0.5s linear")
                 .style("max-width", "100%");
-            loading_bar_ref.on(ev::transitionend, move |_| {
+            is_on_transitionend.set_value(true);
-                loading.set(false);
-            });
         }
     });
 
@@ -94,9 +97,16 @@ pub fn LoadingBar(#[prop(optional)] comp_ref: ComponentRef<LoadingBarRef>) -> im
         error,
     });
     view! {
-        <div class="thaw-loading-bar-container">
+        <div
-            <div class="thaw-loading-bar" ref=loading_bar_ref style=move || css_vars.get()>
+            class="thaw-loading-bar-container"
-            </div>
+            style=move || (!loading.get()).then(|| "display: none;")
+        >
+            <div
+                class="thaw-loading-bar"
+                ref=loading_bar_ref
+                style=move || css_vars.get()
+                on:transitionend=on_transitionend
+            ></div>
         </div>
     }
 }