Merge pull request #296 from blocknative/enhancement/wallet-check-loading

Enhancement: Wallet Check Loading.

Closes #294

Author: lnbc1QWFyb24

src/elements/Spinner.svelte

@@ -1,4 +1,24 @@
+<script>
+  export let description
+</script>
+
 <style>
+  .bn-onboard-loading-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-family: inherit;
+    font-size: inherit;
+    color: inherit;
+  }
+
+  span {
+    font-family: inherit;
+    font-size: 0.889em;
+    margin-top: 1rem;
+  }
+
   :global(.bn-onboard-loading) {
     display: inline-block;
     position: relative;
@@ -36,8 +56,13 @@
   }
 </style>
 
-<div class="bn-onboard-custom bn-onboard-loading">
-  <div class="bn-onboard-loading-first" />
-  <div class="bn-onboard-loading-second" />
-  <div class="bn-onboard-loading-third" />
+<div class="bn-onboard-loading-container">
+  <div class="bn-onboard-custom bn-onboard-loading">
+    <div class="bn-onboard-loading-first" />
+    <div class="bn-onboard-loading-second" />
+    <div class="bn-onboard-loading-third" />
+  </div>
+  {#if description}
+    <span>{description}</span>
+  {/if}
 </div>

src/views/WalletCheck.svelte

@@ -186,7 +186,6 @@
   }
 
   function runModules(modules: WalletCheckModule[]) {
-    loadingModal = true
     return new Promise(
       async (
         resolve: (result: {
@@ -198,12 +197,10 @@
           const result = await invalidState(module, currentState)
 
           if (result) {
-            loadingModal = false
             return resolve(result)
           }
         }
 
-        loadingModal = false
         return resolve({ modal: undefined, module: undefined })
       }
     )
@@ -238,7 +235,25 @@
         }
       } else {
         // module returned a promise, so await it for val
-        const modal = await result
+        // show loading spinner if promise doesn't resolve within 150ms
+        let modal
+        await new Promise(resolve => {
+          let completed: boolean = false
+
+          result.then(res => {
+            loadingModal = false
+            completed = true
+            modal = res
+            resolve()
+          })
+
+          setTimeout(() => {
+            if (!completed) {
+              loadingModal = true
+            }
+          }, 150)
+        })
+
         if (modal) {
           validateModal(modal)
           return {
@@ -294,7 +309,7 @@
 
 {#if loadingModal}
   <Modal closeable={false}>
-    <Spinner />
+    <Spinner description="Checking wallet" />
   </Modal>
 {/if}