Skip to content

Commit

Permalink
feat: add button loader when network requests are in progress
Browse files Browse the repository at this point in the history
  • Loading branch information
@Datron
Datron committed Sep 6, 2024
1 parent f6519ef commit 4d5ade8
Show file tree
Hide file tree
Showing 8 changed files with 124 additions and 35 deletions.
23 changes: 17 additions & 6 deletions crates/frontend/src/components/button.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,18 +7,29 @@ pub fn button<F: Fn(MouseEvent) + 'static>(
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! {
<button
class=format!(
"btn-purple font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2 {class}",
)

class=button_class
id=id
on:click=on_click
disabled=loading
>
{text}
<i class="ri-edit-2-line ml-2"></i>
{if loading {
view! { <><span class="loading loading-dots loading-sm"></span></> }
} else {
view! {
<>
{text}
<i class="ri-edit-2-line ml-2"></i>
</>
}
}}
</button>
}
}
20 changes: 14 additions & 6 deletions crates/frontend/src/components/default_config_form.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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()
Expand Down Expand Up @@ -124,6 +125,7 @@ where
// Consider logging or displaying the error
}
}
req_inprogress_ws.set(false);
}
});
};
Expand Down Expand Up @@ -329,11 +331,17 @@ where
</Suspense>

<div class="form-control grid w-full justify-start">
<Button
class="pl-[70px] pr-[70px]".to_string()
text="Submit".to_string()
on_click=on_submit
/>
{ move || {
let loading = req_inprogess_rs.get();
view! {
<Button
class="pl-[70px] pr-[70px] w-48 h-12".to_string()
text="Submit".to_string()
on_click=on_submit.clone()
loading
/>
}
}}
</div>

{
Expand Down
20 changes: 14 additions & 6 deletions crates/frontend/src/components/dimension_form.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -109,6 +110,7 @@ where
// Consider logging or displaying the error
}
}
req_inprogress_ws.set(false);
}
});
};
Expand Down Expand Up @@ -271,11 +273,17 @@ where
</Suspense>

<div class="form-control grid w-full justify-start">
<Button
class="pl-[70px] pr-[70px]".to_string()
text="Submit".to_string()
on_click=on_submit
/>
{ move || {
let loading = req_inprogess_rs.get();
view! {
<Button
class="pl-[70px] pr-[70px] w-48 h-12".to_string()
text="Submit".to_string()
on_click=on_submit.clone()
loading
/>
}
}}
</div>

{
Expand Down
15 changes: 14 additions & 1 deletion crates/frontend/src/components/experiment_form.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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());
Expand Down Expand Up @@ -118,6 +120,7 @@ where
// We can consider logging or displaying the error
}
}
req_inprogress_ws.set(false);
}
});
};
Expand Down Expand Up @@ -176,7 +179,17 @@ where
}}

<div class="flex justify-start mt-8">
<Button text="Submit".to_string() on_click=on_submit/>
{ move || {
let loading = req_inprogess_rs.get();
view! {
<Button
class="pl-[70px] pr-[70px] w-48 h-12".to_string()
text="Submit".to_string()
on_click=on_submit.clone()
loading
/>
}
}}
</div>
</div>
}
Expand Down
12 changes: 9 additions & 3 deletions crates/frontend/src/components/experiment_ramp_form.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,16 +18,18 @@ where
{
let (traffic, set_traffic) = create_signal(experiment.traffic_percentage);
let tenant_rs = use_context::<ReadSignal<String>>().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();
spawn_local(async move {
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()
});
};
Expand All @@ -48,8 +50,12 @@ where
set_traffic.set(traffic_value);
}
/>

<Button text="Set".to_string() on_click=handle_ramp_experiment/>
{ move || {
let loading = req_inprogess_rs.get();
view! {
<Button text="Set".to_string() on_click=handle_ramp_experiment.clone() loading/>
}
}}
</form>
}
}
31 changes: 28 additions & 3 deletions crates/frontend/src/components/function_form.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,10 +33,12 @@ where
let (runtime_version, set_runtime_version) = create_signal(runtime_version);
let (error_message, set_error_message) = create_signal("".to_string());
let (description, set_description) = create_signal(description);
let (req_inprogess_rs, req_inprogress_ws) = create_signal(false);
if !edit {
set_runtime_version.set("1.0.0".to_string())
};
let on_submit = move |event: MouseEvent| {
req_inprogress_ws.set(true);
event.prevent_default();
logging::log!("Submitting function form");

Expand Down Expand Up @@ -79,6 +81,7 @@ where
set_error_message.set(e);
}
}
req_inprogress_ws.set(false);
}
});
};
Expand Down Expand Up @@ -159,7 +162,17 @@ where
</div>

<div class="flex justify-end mt-8">
<Button text="Submit".to_string() on_click=on_submit/>
{ move || {
let loading = req_inprogess_rs.get();
view! {
<Button
class="pl-[70px] pr-[70px] w-48 h-12".to_string()
text="Submit".to_string()
on_click=on_submit.clone()
loading
/>
}
}}
</div>

<div class="flex">
Expand All @@ -181,8 +194,9 @@ pub fn test_form(function_name: String, stage: String) -> impl IntoView {
create_signal::<Option<FunctionTestResponse>>(None);
let (val, set_val) = create_signal(json!({}));
let (key, set_key) = create_signal(String::new());

let (req_inprogess_rs, req_inprogress_ws) = create_signal(false);
let on_submit = move |event: MouseEvent| {
req_inprogress_ws.set(true);
event.prevent_default();
logging::log!("Submitting function form");

Expand Down Expand Up @@ -211,6 +225,7 @@ pub fn test_form(function_name: String, stage: String) -> impl IntoView {
set_error_message.set(e);
}
}
req_inprogress_ws.set(false);
}
});
};
Expand Down Expand Up @@ -270,7 +285,17 @@ pub fn test_form(function_name: String, stage: String) -> impl IntoView {
</div>

<div class="flex justify-end mt-8">
<Button text="Submit".to_string() on_click=on_submit/>
{ move || {
let loading = req_inprogess_rs.get();
view! {
<Button
class="pl-[70px] pr-[70px] w-48 h-12".to_string()
text="Submit".to_string()
on_click=on_submit.clone()
loading
/>
}
}}
</div>

<div class="mt-7">
Expand Down
19 changes: 14 additions & 5 deletions crates/frontend/src/components/type_template_form.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,10 @@ where
let (error_message, set_error_message) = create_signal("".to_string());
let (type_name_rs, type_name_ws) = create_signal(type_name);
let (type_schema_rs, type_schema_ws) = create_signal(type_schema);
let (req_inprogess_rs, req_inprogress_ws) = create_signal(false);

let on_submit = move |ev: MouseEvent| {
req_inprogress_ws.set(true);
ev.prevent_default();
let type_name = type_name_rs.get();
let type_schema = type_schema_rs.get();
Expand All @@ -48,6 +50,7 @@ where
set_error_message.set(e);
}
}
req_inprogress_ws.set(false);
}
});
};
Expand Down Expand Up @@ -110,11 +113,17 @@ where
</div>

<div class="form-control grid w-full mt-5 justify-start">
<Button
class="pl-[70px] pr-[70px]".to_string()
text="Submit".to_string()
on_click=on_submit
/>
{ move || {
let loading = req_inprogess_rs.get();
view! {
<Button
class="pl-[70px] pr-[70px] w-48 h-12".to_string()
text="Submit".to_string()
on_click=on_submit.clone()
loading
/>
}
}}
</div>
<div>
<p class="text-red-500">{move || error_message.get()}</p>
Expand Down
19 changes: 14 additions & 5 deletions crates/frontend/src/pages/context_override.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,8 +50,10 @@ fn form(
let (context, set_context) = create_signal(context);
let (overrides, set_overrides) = create_signal(overrides);
let dimensions = StoredValue::new(dimensions);
let (req_inprogess_rs, req_inprogress_ws) = create_signal(false);

let on_submit = move |_| {
req_inprogress_ws.set(true);
spawn_local(async move {
let f_context = context.get();
let f_overrides = overrides.get();
Expand Down Expand Up @@ -83,6 +85,7 @@ fn form(
logging::log!("Error submitting context and overrides: {:?}", e);
}
}
req_inprogress_ws.set(false);
});
};
view! {
Expand Down Expand Up @@ -112,11 +115,17 @@ fn form(
/>

<div class="form-control grid w-full mt-10 justify-start">
<Button
class="pl-[70px] pr-[70px]".to_string()
text="Submit".to_string()
on_click=on_submit
/>
{ move || {
let loading = req_inprogess_rs.get();
view! {
<Button
class="pl-[70px] pr-[70px] w-48 h-12".to_string()
text="Submit".to_string()
on_click=on_submit.clone()
loading
/>
}
}}
</div>
}
}
Expand Down

0 comments on commit 4d5ade8

Please sign in to comment.