Added modal when sending email

frontend/src/views/Home.vue

@@ -35,6 +35,7 @@
         >
       </b-col>
     </b-row>
+    <!--
     <b-row class="my-3" align-h="center">
       <b-col lg="6" sm="12">
         <b-button class="scale-in-center" size="lg" to="/groupsession" block
@@ -42,6 +43,7 @@
         >
       </b-col>
     </b-row>
+    -->
   </b-container>
 </template>
 

frontend/src/views/ViewObservations.vue

@@ -17,6 +17,21 @@
           <v-icon name="exclamation-circle" />Dismiss
         </button>
       </div>
+    </b-modal>
+        <b-modal
+      ref="emailSendingModal"
+      class="text-center"
+      centered
+      hide-header
+      hide-footer
+    >
+      <div class="modal-header">
+        <h3 class="modal-title">Sending</h3>
+      </div>
+      <div class="d-block">
+        <br />
+        <p><v-icon name="spinner" spin="true" scale="2"></v-icon> Processing data and sending to the configured email address.</p>
+      </div>
     </b-modal>
     <b-modal
       ref="emailCompleteModal"
@@ -294,6 +309,7 @@
 <script>
 import Vue from "vue";
 import "vue-awesome/icons/search";
+import "vue-awesome/icons/spinner"
 import ObservationEntry from "../components/ObservationEntry.vue";
 import ObservationSearchBar from "../components/ObservationSearchBar";
 
@@ -388,6 +404,7 @@ export default {
       this.startDate = moment().subtract(amount, timeType);
     },
     sendEmail: function() {
+      this.$refs.emailSendingModal.show();
       Vue.axios
         .post("/observations/email", {
           site: this.$store.state.search.site,
@@ -398,9 +415,11 @@ export default {
           person: this.$store.state.search.person
         })
         .then(() => {
+          this.$refs.emailSendingModal.hide();
           this.$refs.emailCompleteModal.show();
         })
         .catch(error => {
+          this.$refs.emailSendingModal.hide();
           this.errorStatus = error.response.status;
           this.errorMessage = error.response.data;
           this.$refs.errorModal.show();
@@ -418,6 +437,8 @@ export default {
   position: relative;
   text-align: center;
 }
+
+/*noinspection CssUnusedSymbol*/
 .scorewarning {
   background-color: red;
 }