mirror of
https://github.com/louislam/uptime-kuma.git
synced 2024-10-30 03:00:40 +00:00
[Status Page] Listing: Better loading effect
This commit is contained in:
parent
78a732409b
commit
502c7f87e7
4 changed files with 27 additions and 9 deletions
|
@ -448,6 +448,10 @@ textarea.form-control {
|
||||||
border-radius: 10px !important;
|
border-radius: 10px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.spinner {
|
||||||
|
color: $primary;
|
||||||
|
}
|
||||||
|
|
||||||
// Localization
|
// Localization
|
||||||
|
|
||||||
@import "localization.scss";
|
@import "localization.scss";
|
||||||
|
|
|
@ -36,6 +36,7 @@ import {
|
||||||
faChevronDown,
|
faChevronDown,
|
||||||
faPen,
|
faPen,
|
||||||
faExternalLinkSquareAlt,
|
faExternalLinkSquareAlt,
|
||||||
|
faSpinner,
|
||||||
} from "@fortawesome/free-solid-svg-icons";
|
} from "@fortawesome/free-solid-svg-icons";
|
||||||
|
|
||||||
library.add(
|
library.add(
|
||||||
|
@ -71,6 +72,7 @@ library.add(
|
||||||
faChevronDown,
|
faChevronDown,
|
||||||
faPen,
|
faPen,
|
||||||
faExternalLinkSquareAlt,
|
faExternalLinkSquareAlt,
|
||||||
|
faSpinner,
|
||||||
);
|
);
|
||||||
|
|
||||||
export { FontAwesomeIcon };
|
export { FontAwesomeIcon };
|
||||||
|
|
|
@ -38,6 +38,7 @@ export default {
|
||||||
uptimeList: { },
|
uptimeList: { },
|
||||||
tlsInfoList: {},
|
tlsInfoList: {},
|
||||||
notificationList: [],
|
notificationList: [],
|
||||||
|
statusPageListLoaded: false,
|
||||||
statusPageList: [],
|
statusPageList: [],
|
||||||
connectionErrorMsg: "Cannot connect to the socket server. Reconnecting...",
|
connectionErrorMsg: "Cannot connect to the socket server. Reconnecting...",
|
||||||
};
|
};
|
||||||
|
@ -114,6 +115,7 @@ export default {
|
||||||
});
|
});
|
||||||
|
|
||||||
socket.on("statusPageList", (data) => {
|
socket.on("statusPageList", (data) => {
|
||||||
|
this.statusPageListLoaded = true;
|
||||||
this.statusPageList = data;
|
this.statusPageList = data;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -6,17 +6,24 @@
|
||||||
</h1>
|
</h1>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<router-link to="/add-status-page" class="btn btn-primary mb-3"><font-awesome-icon icon="plus" /> {{ $t("Add New Status Page") }}</router-link>
|
<router-link to="/add-status-page" class="btn btn-primary mb-3"><font-awesome-icon icon="plus" /> {{ $t("New Status Page") }}</router-link>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="shadow-box" style="min-height: 110px;">
|
<div class="shadow-box">
|
||||||
<a v-for="statusPage in $root.statusPageList" :key="statusPage.slug" :href="'/status/' + statusPage.slug" class="item">
|
<template v-if="$root.statusPageListLoaded">
|
||||||
<img :src="icon(statusPage.icon)" alt class="logo me-2" />
|
<span v-if="$root.statusPageList.length === 0">No status pages</span>
|
||||||
<div class="info">
|
|
||||||
<div class="title">{{ statusPage.title }}</div>
|
<router-link v-for="statusPage in $root.statusPageList" :key="statusPage.slug" :to="'/status/' + statusPage.slug" class="item">
|
||||||
<div class="slug">/status/{{ statusPage.slug }}</div>
|
<img :src="icon(statusPage.icon)" alt class="logo me-2" />
|
||||||
</div>
|
<div class="info">
|
||||||
</a>
|
<div class="title">{{ statusPage.title }}</div>
|
||||||
|
<div class="slug">/status/{{ statusPage.slug }}</div>
|
||||||
|
</div>
|
||||||
|
</router-link>
|
||||||
|
</template>
|
||||||
|
<div v-else class="d-flex align-items-center justify-content-center my-3 spinner">
|
||||||
|
<font-awesome-icon icon="spinner" size="2x" spin />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</transition>
|
</transition>
|
||||||
|
@ -76,6 +83,9 @@ export default {
|
||||||
|
|
||||||
.logo {
|
.logo {
|
||||||
width: $logo-width;
|
width: $logo-width;
|
||||||
|
|
||||||
|
// Better when the image is loading
|
||||||
|
min-height: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.info {
|
.info {
|
||||||
|
|
Loading…
Reference in a new issue