From dc0086ff7d4311e466d4ad9c844e2dc2fe5cde9b Mon Sep 17 00:00:00 2001
From: jason5ng32 <jason5ng32@gmail.com>
Date: Thu, 7 Dec 2023 09:20:56 +0800
Subject: [PATCH] Add loading animation

---
 index.html    | 11 +++++++++--
 res/app.js    | 10 ++++++++--
 res/style.css | 11 +++++++++++
 3 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 563978d8..b15170f6 100644
--- a/index.html
+++ b/index.html
@@ -22,7 +22,15 @@
 </head>
 
 <body>
-  <div id="app">
+
+  <!-- Loading -->
+  <div id="loading" class="d-flex justify-content-center jn-loading">
+    <div class="spinner-border text-success" role="status">
+      <span class="visually-hidden">Loading...</span>
+    </div>
+  </div>
+
+  <div id="app" v-cloak>
     <!-- Nav -->
     <nav id="navbar-top" class="navbar navbar-expand-lg bg-body-tertiary px-3 mb-3 jn-navbar-top"
       :class="{ 'dark-mode-nav navbar-dark bg-dark': isDarkMode }">
@@ -173,7 +181,6 @@
           </div>
         </div>
 
-
         <!-- Connectivity -->
         <div class="availability-test-section mb-4">
           <div class="jn-title2">
diff --git a/res/app.js b/res/app.js
index 6bdf52be..c46e7903 100644
--- a/res/app.js
+++ b/res/app.js
@@ -723,8 +723,13 @@ new Vue({
       setTimeout(() => {
         this.checkAllDNSLeakTest();
       }, 3000);
-    }
-
+    },
+    hideLoading() {
+      var loadingElement = document.getElementById('loading');
+      if (loadingElement) {
+        loadingElement.classList.add('hidden');
+      }
+    },
   },
 
   created() {
@@ -764,6 +769,7 @@ new Vue({
     this.checkSystemDarkMode();
     this.PWAColor();
     this.checkAllIPs();
+    this.hideLoading();
     setTimeout(() => {
       this.checkAllConnectivity(true);
     }, 2500);
diff --git a/res/style.css b/res/style.css
index 7d5ad581..ce861908 100644
--- a/res/style.css
+++ b/res/style.css
@@ -154,6 +154,17 @@ footer {
 .mobile-list {
     border: 0;
 }
+
 .mobile-h2 {
     font-size: 1.25rem;
+}
+
+[v-cloak] {
+    display: none;
+}
+.hidden {
+    display: none !important;
+}
+.jn-loading {
+    margin-top: 50vh;
 }
\ No newline at end of file