From 4d5ade8daf29c9c44d359caff18e6967f44a59c3 Mon Sep 17 00:00:00 2001 From: Kartik Date: Fri, 6 Sep 2024 16:15:01 +0530 Subject: [PATCH] feat: add button loader when network requests are in progress --- crates/frontend/src/components/button.rs | 23 ++++++++++---- .../src/components/default_config_form.rs | 20 ++++++++---- .../frontend/src/components/dimension_form.rs | 20 ++++++++---- .../src/components/experiment_form.rs | 15 ++++++++- .../src/components/experiment_ramp_form.rs | 12 +++++-- .../frontend/src/components/function_form.rs | 31 +++++++++++++++++-- .../src/components/type_template_form.rs | 19 +++++++++--- crates/frontend/src/pages/context_override.rs | 19 +++++++++--- 8 files changed, 124 insertions(+), 35 deletions(-) diff --git a/crates/frontend/src/components/button.rs b/crates/frontend/src/components/button.rs index ad4d5bf3..0d07e8e6 100644 --- a/crates/frontend/src/components/button.rs +++ b/crates/frontend/src/components/button.rs @@ -7,18 +7,29 @@ pub fn button( on_click: F, #[prop(default = String::new())] class: String, #[prop(default = String::new())] id: String, + #[prop(default = false)] loading: bool, ) -> impl IntoView { + let mut button_class = format!("btn-purple font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2 {class}"); + if loading { + button_class = button_class + "hover:cursor-not-allowed"; + } view! { } } diff --git a/crates/frontend/src/components/default_config_form.rs b/crates/frontend/src/components/default_config_form.rs index a3a0f9bf..a3bdb954 100644 --- a/crates/frontend/src/components/default_config_form.rs +++ b/crates/frontend/src/components/default_config_form.rs @@ -40,7 +40,7 @@ where let (config_schema_rs, config_schema_ws) = create_signal(type_schema); let (config_value, set_config_value) = create_signal(config_value); let (function_name, set_function_name) = create_signal(function_name); - + let (req_inprogess_rs, req_inprogress_ws) = create_signal(false); let string_to_value_closure = |val: String| { Value::from_str(&val).unwrap_or_else(|_| { // do this for Value::String, since for some reason from_str @@ -87,6 +87,7 @@ where let (error_message, set_error_message) = create_signal("".to_string()); let on_submit = move |ev: MouseEvent| { + req_inprogress_ws.set(true); ev.prevent_default(); let f_name = prefix .clone() @@ -124,6 +125,7 @@ where // Consider logging or displaying the error } } + req_inprogress_ws.set(false); } }); }; @@ -329,11 +331,17 @@ where
-
{ diff --git a/crates/frontend/src/components/dimension_form.rs b/crates/frontend/src/components/dimension_form.rs index 330f965e..bee6c59b 100644 --- a/crates/frontend/src/components/dimension_form.rs +++ b/crates/frontend/src/components/dimension_form.rs @@ -32,7 +32,7 @@ where let (dimension_type_rs, dimension_type_ws) = create_signal(dimension_type); let (dimension_schema_rs, dimension_schema_ws) = create_signal(dimension_schema); let (function_name, set_function_name) = create_signal(function_name); - + let (req_inprogess_rs, req_inprogress_ws) = create_signal(false); let string_to_value_closure = |val: String| { Value::from_str(&val).unwrap_or_else(|_| { // do this for Value::String, since for some reason from_str @@ -79,6 +79,7 @@ where let (error_message, set_error_message) = create_signal("".to_string()); let on_submit = move |ev: MouseEvent| { + req_inprogress_ws.set(true); ev.prevent_default(); let f_priority = priority.get(); let f_name = dimension_name_rs.get(); @@ -109,6 +110,7 @@ where // Consider logging or displaying the error } } + req_inprogress_ws.set(false); } }); }; @@ -271,11 +273,17 @@ where
-
{ diff --git a/crates/frontend/src/components/experiment_form.rs b/crates/frontend/src/components/experiment_form.rs index 34e38235..c8f8074b 100644 --- a/crates/frontend/src/components/experiment_form.rs +++ b/crates/frontend/src/components/experiment_form.rs @@ -64,6 +64,7 @@ where let (experiment_name, set_experiment_name) = create_signal(name); let (f_context, set_context) = create_signal(context.clone()); let (f_variants, set_variants) = create_signal(init_variants); + let (req_inprogess_rs, req_inprogress_ws) = create_signal(false); let handle_context_form_change = move |updated_ctx: Vec<(String, String, String)>| { set_context.set_untracked(updated_ctx); @@ -76,6 +77,7 @@ where let dimensions = StoredValue::new(dimensions); let on_submit = move |event: MouseEvent| { + req_inprogress_ws.set(true); event.prevent_default(); logging::log!("Submitting experiment form"); logging::log!("{:?}", f_variants.get()); @@ -118,6 +120,7 @@ where // We can consider logging or displaying the error } } + req_inprogress_ws.set(false); } }); }; @@ -176,7 +179,17 @@ where }}
-
} diff --git a/crates/frontend/src/components/experiment_ramp_form.rs b/crates/frontend/src/components/experiment_ramp_form.rs index 8fa3c308..ae095129 100644 --- a/crates/frontend/src/components/experiment_ramp_form.rs +++ b/crates/frontend/src/components/experiment_ramp_form.rs @@ -18,9 +18,10 @@ where { let (traffic, set_traffic) = create_signal(experiment.traffic_percentage); let tenant_rs = use_context::>().unwrap(); - + let (req_inprogess_rs, req_inprogress_ws) = create_signal(false); let experiment_rc = Rc::new(experiment); let handle_ramp_experiment = move |event: MouseEvent| { + req_inprogress_ws.set(true); event.prevent_default(); let experiment_clone = experiment_rc.clone(); let handle_submit_clone = handle_submit.clone(); @@ -28,6 +29,7 @@ where let tenant = tenant_rs.get(); let traffic_value = traffic.get(); let _ = ramp_experiment(&experiment_clone.id, traffic_value, &tenant).await; + req_inprogress_ws.set(false); handle_submit_clone() }); }; @@ -48,8 +50,12 @@ where set_traffic.set(traffic_value); } /> - -