From 50e756b06e9781c751f1c9ffcab84ff7bfd98a3c Mon Sep 17 00:00:00 2001
From: Flemmli97 <Flemmli97@users.noreply.github.com>
Date: Mon, 4 Mar 2024 16:32:47 +0100
Subject: [PATCH 1/3] add loading indicator to create account page

---
 ui/src/layouts/log_in/enter_username.rs | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/ui/src/layouts/log_in/enter_username.rs b/ui/src/layouts/log_in/enter_username.rs
index 7c8d93b6619..c270cb68871 100644
--- a/ui/src/layouts/log_in/enter_username.rs
+++ b/ui/src/layouts/log_in/enter_username.rs
@@ -38,6 +38,7 @@ pub fn Layout(
 ) -> Element {
     log::trace!("rendering enter username layout");
     let window = use_window(cx);
+    let loading = use_state(cx, || false);
 
     if !matches!(&*page.current(), AuthPages::Success(_)) {
         window.set_inner_size(LogicalSize {
@@ -67,7 +68,7 @@ pub fn Layout(
     };
 
     let ch = use_coroutine(cx, |mut rx: UnboundedReceiver<CreateAccountCmd>| {
-        to_owned![page];
+        to_owned![page, loading];
         async move {
             let config = Configuration::load_or_default();
             let warp_cmd_tx = WARP_CMD_CH.tx.clone();
@@ -77,6 +78,7 @@ pub fn Layout(
                 seed_words,
             }) = rx.next().await
             {
+                loading.set(true);
                 let (tx, rx) =
                     oneshot::channel::<Result<multipass::identity::Identity, warp::error::Error>>();
 
@@ -110,6 +112,7 @@ pub fn Layout(
     cx.render(rsx!(
         div {
             id: "unlock-layout",
+            class: format_args!("{}", if *loading.get() {"progress"} else {""}),
             aria_label: "unlock-layout",
             Label {
                 text: get_local_text("auth.enter-username")
@@ -155,8 +158,9 @@ pub fn Layout(
                 text:  get_local_text("unlock.create-account"),
                 aria_label: "create-account-button".into(),
                 appearance: kit::elements::Appearance::Primary,
+                loading: *loading.get(),
                 icon: Icon::Check,
-                disabled: *button_disabled.get(),
+                disabled: *button_disabled.get() || *loading.get(),
                 onpress: move |_| {
                     ch.send(CreateAccountCmd {
                         username: username.get().to_string(),

From c21025d0b8fe896f5ea1d18e5ec1b95d8d1135ac Mon Sep 17 00:00:00 2001
From: lgmarchi <lucasgmarchi@gmail.com>
Date: Mon, 4 Mar 2024 14:56:57 -0300
Subject: [PATCH 2/3] Improve loading indicator in the button

---
 ui/src/layouts/log_in/enter_username.rs | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/ui/src/layouts/log_in/enter_username.rs b/ui/src/layouts/log_in/enter_username.rs
index c270cb68871..06cbcd74035 100644
--- a/ui/src/layouts/log_in/enter_username.rs
+++ b/ui/src/layouts/log_in/enter_username.rs
@@ -129,7 +129,7 @@ pub fn Layout(
                 icon: Icon::Identification,
                 aria_label: "username-input".into(),
                 disable_onblur: true,
-                disabled: false,
+                disabled: *loading.get(),
                 placeholder: get_local_text("auth.enter-username"),
                 options: Options {
                     with_validation: Some(username_validation),
@@ -159,7 +159,6 @@ pub fn Layout(
                 aria_label: "create-account-button".into(),
                 appearance: kit::elements::Appearance::Primary,
                 loading: *loading.get(),
-                icon: Icon::Check,
                 disabled: *button_disabled.get() || *loading.get(),
                 onpress: move |_| {
                     ch.send(CreateAccountCmd {

From c9dc8587a0eb4c83431b84a1af0e04a5bfa7680c Mon Sep 17 00:00:00 2001
From: lgmarchi <lucasgmarchi@gmail.com>
Date: Wed, 6 Mar 2024 11:56:18 -0300
Subject: [PATCH 3/3] Avoid crash on create account

---
 ui/src/layouts/log_in/enter_username.rs |  5 +++++
 ui/src/layouts/log_in/style.scss        | 13 +++++++++++++
 2 files changed, 18 insertions(+)
 create mode 100644 ui/src/layouts/log_in/style.scss

diff --git a/ui/src/layouts/log_in/enter_username.rs b/ui/src/layouts/log_in/enter_username.rs
index 06cbcd74035..b8be5cd61ff 100644
--- a/ui/src/layouts/log_in/enter_username.rs
+++ b/ui/src/layouts/log_in/enter_username.rs
@@ -110,6 +110,11 @@ pub fn Layout(
     });
 
     cx.render(rsx!(
+        loading.get().then(|| rsx!(
+            div {
+                class: "overlay-load-shadow",
+            },
+        )),
         div {
             id: "unlock-layout",
             class: format_args!("{}", if *loading.get() {"progress"} else {""}),
diff --git a/ui/src/layouts/log_in/style.scss b/ui/src/layouts/log_in/style.scss
new file mode 100644
index 00000000000..0babceb9f01
--- /dev/null
+++ b/ui/src/layouts/log_in/style.scss
@@ -0,0 +1,13 @@
+
+.overlay-load-shadow {
+    display: block;
+    position: fixed; 
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.2); 
+    z-index: 999; 
+    text-align: center;
+    pointer-events: all;
+  }
\ No newline at end of file