Add loading animation

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">

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);

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;
 }