feat(ux): Display loading animation while waiting for data to be retrieved

Fixes #275

web/app/src/views/Home.vue

@@ -1,11 +1,14 @@
 <template>
-  <Endpoints
-      :endpointStatuses="endpointStatuses"
-      :showStatusOnHover="true"
-      @showTooltip="showTooltip"
-      @toggleShowAverageResponseTime="toggleShowAverageResponseTime" :showAverageResponseTime="showAverageResponseTime"
-  />
-  <Pagination @page="changePage"/>
+  <Loading v-if="!retrievedData" class="h-64 w-64 px-4 my-24" />
+  <slot v-else>
+    <Endpoints
+        :endpointStatuses="endpointStatuses"
+        :showStatusOnHover="true"
+        @showTooltip="showTooltip"
+        @toggleShowAverageResponseTime="toggleShowAverageResponseTime" :showAverageResponseTime="showAverageResponseTime"
+    />
+    <Pagination @page="changePage"/>
+  </slot>
   <Settings @refreshData="fetchData"/>
 </template>
 
@@ -13,11 +16,13 @@
 import Settings from '@/components/Settings.vue'
 import Endpoints from '@/components/Endpoints.vue';
 import Pagination from "@/components/Pagination";
+import Loading from "@/components/Loading";
 import {SERVER_URL} from "@/main.js";
 
 export default {
   name: 'Home',
   components: {
+    Loading,
     Pagination,
     Endpoints,
     Settings,
@@ -27,6 +32,7 @@ export default {
     fetchData() {
       fetch(`${SERVER_URL}/api/v1/endpoints/statuses?page=${this.currentPage}`, {credentials: 'include'})
       .then(response => {
+        this.retrievedData = true;
         if (response.status === 200) {
           response.json().then(data => {
             if (JSON.stringify(this.endpointStatuses) !== JSON.stringify(data)) {
@@ -55,7 +61,8 @@ export default {
     return {
       endpointStatuses: [],
       currentPage: 1,
-      showAverageResponseTime: true
+      showAverageResponseTime: true,
+      retrievedData: false,
     }
   },
   created() {