update(createAccount): Login loading indicator

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>>();
 
@@ -108,8 +110,14 @@ 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 {""}),
             aria_label: "unlock-layout",
             Label {
                 text: get_local_text("auth.enter-username")
@@ -126,7 +134,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),
@@ -155,8 +163,8 @@ pub fn Layout(
                 text:  get_local_text("unlock.create-account"),
                 aria_label: "create-account-button".into(),
                 appearance: kit::elements::Appearance::Primary,
-                icon: Icon::Check,
-                disabled: *button_disabled.get(),
+                loading: *loading.get(),
+                disabled: *button_disabled.get() || *loading.get(),
                 onpress: move |_| {
                     ch.send(CreateAccountCmd {
                         username: username.get().to_string(),

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;
+  }