From 502c7f87e73e980afdea4c95967cd91985ffd816 Mon Sep 17 00:00:00 2001
From: Louis Lam <louislam@users.noreply.github.com>
Date: Thu, 17 Mar 2022 19:07:05 +0800
Subject: [PATCH] [Status Page] Listing: Better loading effect

---
 src/assets/app.scss            |  4 ++++
 src/icon.js                    |  2 ++
 src/mixins/socket.js           |  2 ++
 src/pages/ManageStatusPage.vue | 28 +++++++++++++++++++---------
 4 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/src/assets/app.scss b/src/assets/app.scss
index c70efa179..7378f52c8 100644
--- a/src/assets/app.scss
+++ b/src/assets/app.scss
@@ -448,6 +448,10 @@ textarea.form-control {
     border-radius: 10px !important;
 }
 
+.spinner {
+    color: $primary;
+}
+
 // Localization
 
 @import "localization.scss";
diff --git a/src/icon.js b/src/icon.js
index 865897608..bbd816ea0 100644
--- a/src/icon.js
+++ b/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 };
diff --git a/src/mixins/socket.js b/src/mixins/socket.js
index 7842fb8ca..e092923ed 100644
--- a/src/mixins/socket.js
+++ b/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;
             });
 
diff --git a/src/pages/ManageStatusPage.vue b/src/pages/ManageStatusPage.vue
index 2e5d11545..0eafb3e35 100644
--- a/src/pages/ManageStatusPage.vue
+++ b/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">
-                    <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>
+            <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>
+                    </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 {