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

Fixes #275
This commit is contained in:
TwiN 2022-06-12 18:06:12 -04:00
parent 9f343bacf7
commit 793172c783

View File

@ -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() {