mirror of
https://github.com/TwiN/gatus.git
synced 2024-11-07 08:34:15 +01:00
feat(ux): Display loading animation while waiting for data to be retrieved
Fixes #275
This commit is contained in:
parent
9f343bacf7
commit
793172c783
@ -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() {
|
||||
|
Loading…
Reference in New Issue
Block a user