[Status Page] Listing: Better loading effect

src/assets/app.scss

@@ -448,6 +448,10 @@ textarea.form-control {
     border-radius: 10px !important;
 }
 
+.spinner {
+    color: $primary;
+}
+
 // Localization
 
 @import "localization.scss";

src/icon.js

@@ -36,6 +36,7 @@ import {
     faChevronDown,
     faPen,
     faExternalLinkSquareAlt,
+    faSpinner,
 } from "@fortawesome/free-solid-svg-icons";
 
 library.add(
@@ -71,6 +72,7 @@ library.add(
     faChevronDown,
     faPen,
     faExternalLinkSquareAlt,
+    faSpinner,
 );
 
 export { FontAwesomeIcon };

src/mixins/socket.js

@@ -38,6 +38,7 @@ export default {
             uptimeList: { },
             tlsInfoList: {},
             notificationList: [],
+            statusPageListLoaded: false,
             statusPageList: [],
             connectionErrorMsg: "Cannot connect to the socket server. Reconnecting...",
         };
@@ -114,6 +115,7 @@ export default {
             });
 
             socket.on("statusPageList", (data) => {
+                this.statusPageListLoaded = true;
                 this.statusPageList = data;
             });
 

src/pages/ManageStatusPage.vue

@@ -6,17 +6,24 @@
             </h1>
 
             <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 class="shadow-box" style="min-height: 110px;">
-                <a v-for="statusPage in $root.statusPageList" :key="statusPage.slug" :href="'/status/' + statusPage.slug" class="item">
+            <div class="shadow-box">
+                <template v-if="$root.statusPageListLoaded">
+                    <span v-if="$root.statusPageList.length === 0">No status pages</span>
+
+                    <router-link v-for="statusPage in $root.statusPageList" :key="statusPage.slug" :to="'/status/' + statusPage.slug" class="item">
                         <img :src="icon(statusPage.icon)" alt class="logo me-2" />
                         <div class="info">
                             <div class="title">{{ statusPage.title }}</div>
                             <div class="slug">/status/{{ statusPage.slug }}</div>
                         </div>
-                </a>
+                    </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>
     </transition>
@@ -76,6 +83,9 @@ export default {
 
         .logo {
             width: $logo-width;
+
+            // Better when the image is loading
+            min-height: 1px;
         }
 
         .info {