add full page loading

assets/styles/app.scss

@@ -217,28 +217,10 @@
 }
 
 .status {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-
   &:not(:last-child) {
     margin-bottom: $block-spacing;
   }
 
-  .status-spinner {
-    margin-top: 1.5rem;
-    &:after {
-      content: '';
-      display: block;
-      height: 40px;
-      width: 40px;
-      background-image: url('../img/logo.svg');
-      animation: spinAroundReverse 2000ms infinite linear;
-    }
-  }
-
   .status-message {
     color: $primary;
     text-align: center;
@@ -249,6 +231,42 @@
   }
 }
 
+.loading-overlay {
+  &.is-full-page {
+    .loading-background {
+      background:rgba(0,0,0,0.85);
+    }
+  }
+  .loading-container {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    .loading-tornado {
+      &:after {
+        content: '';
+        display: block;
+        height: 60px;
+        width: 60px;
+        background-image: url('../img/logo.svg');
+        animation: spinAroundReverse 2000ms infinite linear;
+      }
+    }
+
+    .loading-message {
+      padding-top: .5rem;
+      color: $primary;
+      text-align: center;
+
+      &.is-danger {
+        color: $danger;
+      }
+    }
+  }
+}
+
 @keyframes spinAroundReverse {
   from {
     transform: rotate(359deg); }

pages/make-contribution.vue

@@ -40,9 +40,8 @@
       </div>
     </div>
 
-    <div v-show="status.msg !== ''" class="status">
+    <div v-show="status.type === 'is-danger' || status.type === 'is-success'" class="status">
       <div :class="status.type" class="status-message">{{ status.msg }}</div>
-      <div v-show="status.type === ''" class="status-spinner"></div>
     </div>
 
     <div class="buttons is-centered">
@@ -70,6 +69,13 @@
       If you don’t trust binaries, we encorage you to follow this <a href="">instruction</a> to
       contribute by compiling from source code. It is very easy!
     </p>
+
+    <b-loading :active.sync="loading">
+      <div class="loading-container">
+        <div class="loading-tornado"></div>
+        <div :class="status.type" class="loading-message">{{ status.msg }}...</div>
+      </div>
+    </b-loading>
   </div>
 </template>
 
@@ -91,7 +97,8 @@ export default {
         type: '',
         msg: ''
       },
-      user: { name: '', handle: 'Anonymous', company: '' }
+      user: { name: '', handle: 'Anonymous', company: '' },
+      loading: false
     }
   },
   computed: {
@@ -148,7 +155,7 @@ export default {
     async makeContribution({ retry = 0 } = {}) {
       try {
         this.isContributeBtnSnown = true
-
+        this.loading = true
         this.status.msg = 'Downloading last contribution'
         this.status.type = ''
         let data = await fetch('api/challenge')
@@ -197,6 +204,8 @@ export default {
         this.status.msg = e.message
         this.status.type = 'is-danger'
         this.isContributeBtnSnown = false
+      } finally {
+        this.loading = false
       }
     },
     logIn() {