Merge pull request #120 from blocknative/feature/loading-spinner

Add loading spinner for when wallet check modal is loading

Author: lnbc1QWFyb24

src/components/Modal.svelte

@@ -2,6 +2,7 @@
   import { fade } from 'svelte/transition'
   import { app } from '../stores'
   export let closeModal: () => void
+  export let closeable: boolean = true
 
   let closeHovered: boolean
 </script>
@@ -84,47 +85,49 @@
     class:bn-onboard-dark-mode={$app.darkMode}
     class="bn-onboard-custom bn-onboard-modal-content">
     <slot />
-    <div
-      class="bn-onboard-custom bn-onboard-modal-content-close"
-      class:bn-onboard-dark-mode-close-background={$app.darkMode}
-      on:click={closeModal}
-      on:mouseenter={() => (closeHovered = true)}
-      on:mouseleave={() => (closeHovered = false)}>
-      <svg
-        version="1.1"
-        id="Capa_1"
-        xmlns="http://www.w3.org/2000/svg"
-        xmlns:xlink="http://www.w3.org/1999/xlink"
-        x="0px"
-        y="0px"
-        viewBox="0 0 47.971 47.971"
-        style="enable-background:new 0 0 47.971 47.971; transition: fill 150ms
-        ease-in-out;"
-        fill={closeHovered ? ($app.darkMode ? '#ffffff' : '#4a4a4a') : '#9B9B9B'}
-        xml:space="preserve">
-        <g>
-          <path
-            d="M28.228,23.986L47.092,5.122c1.172-1.171,1.172-3.071,0-4.242c-1.172-1.172-3.07-1.172-4.242,0L23.986,19.744L5.121,0.88
-            c-1.172-1.172-3.07-1.172-4.242,0c-1.172,1.171-1.172,3.071,0,4.242l18.865,18.864L0.879,42.85c-1.172,1.171-1.172,3.071,0,4.242
-            C1.465,47.677,2.233,47.97,3,47.97s1.535-0.293,2.121-0.879l18.865-18.864L42.85,47.091c0.586,0.586,1.354,0.879,2.121,0.879
-            s1.535-0.293,2.121-0.879c1.172-1.171,1.172-3.071,0-4.242L28.228,23.986z" />
-        </g>
-        <g />
-        <g />
-        <g />
-        <g />
-        <g />
-        <g />
-        <g />
-        <g />
-        <g />
-        <g />
-        <g />
-        <g />
-        <g />
-        <g />
-        <g />
-      </svg>
-    </div>
+    {#if closeable}
+      <div
+        class="bn-onboard-custom bn-onboard-modal-content-close"
+        class:bn-onboard-dark-mode-close-background={$app.darkMode}
+        on:click={closeModal}
+        on:mouseenter={() => (closeHovered = true)}
+        on:mouseleave={() => (closeHovered = false)}>
+        <svg
+          version="1.1"
+          id="Capa_1"
+          xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink"
+          x="0px"
+          y="0px"
+          viewBox="0 0 47.971 47.971"
+          style="enable-background:new 0 0 47.971 47.971; transition: fill 150ms
+          ease-in-out;"
+          fill={closeHovered ? ($app.darkMode ? '#ffffff' : '#4a4a4a') : '#9B9B9B'}
+          xml:space="preserve">
+          <g>
+            <path
+              d="M28.228,23.986L47.092,5.122c1.172-1.171,1.172-3.071,0-4.242c-1.172-1.172-3.07-1.172-4.242,0L23.986,19.744L5.121,0.88
+              c-1.172-1.172-3.07-1.172-4.242,0c-1.172,1.171-1.172,3.071,0,4.242l18.865,18.864L0.879,42.85c-1.172,1.171-1.172,3.071,0,4.242
+              C1.465,47.677,2.233,47.97,3,47.97s1.535-0.293,2.121-0.879l18.865-18.864L42.85,47.091c0.586,0.586,1.354,0.879,2.121,0.879
+              s1.535-0.293,2.121-0.879c1.172-1.171,1.172-3.071,0-4.242L28.228,23.986z" />
+          </g>
+          <g />
+          <g />
+          <g />
+          <g />
+          <g />
+          <g />
+          <g />
+          <g />
+          <g />
+          <g />
+          <g />
+          <g />
+          <g />
+          <g />
+          <g />
+        </svg>
+      </div>
+    {/if}
   </section>
 </aside>

src/views/WalletCheck.svelte

@@ -33,7 +33,7 @@
   let pollingInterval: any
   let checkingModule: boolean = false
   let actionResolved: boolean | undefined = undefined
-  let loading: boolean
+  let loading: boolean = false
 
   // recheck modules if below conditions
   $: if (!activeModal && !checkingModule) {
@@ -231,8 +231,8 @@
   }
 </style>
 
-{#if activeModal}
-  <Modal closeModal={handleExit}>
+<Modal closeModal={handleExit} closeable={!!activeModal}>
+  {#if activeModal}
     <ModalHeader icon={activeModal.icon} heading={activeModal.heading} />
     <p class="bn-onboard-custom bn-onboard-prepare-description">
       {@html activeModal.description}
@@ -261,5 +261,7 @@
       {/if}
       <Button onclick={handleExit}>Dismiss</Button>
     </div>
-  </Modal>
-{/if}
+  {:else}
+    <Spinner />
+  {/if}
+</Modal>