extern/gatus
1
0
Fork 0
mirror of https://github.com/TwiN/gatus.git synced 2024-11-21 23:43:27 +01:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Fixes #275
This commit is contained in:
TwiN 2022-06-12 18:06:12 -04:00
parent 9f343bacf7
commit 793172c783
1 changed files with 15 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
web/app/src/views/Home.vue
View File

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