feat(ux): Display loading animation while waiting for data to be retrieved
Fixes
<template>
+ <Loading v-if="!retrievedData" class="h-64 w-64 px-4 my-24" />
+ <slot v-else>
<Endpoints
:endpointStatuses="endpointStatuses"
:showStatusOnHover="true"
@toggleShowAverageResponseTime="toggleShowAverageResponseTime" :showAverageResponseTime="showAverageResponseTime"
/>
<Pagination @page="changePage"/>
+ </slot>
<Settings @refreshData="fetchData"/>
</template>
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() {
