From b9ad037f60432d892fb9f6b1202a0eaf8aa57314 Mon Sep 17 00:00:00 2001
From: Rohan Sircar <rohansircar@tuta.io>
Date: Sun, 26 Jul 2020 13:29:49 +0530
Subject: [PATCH] added spinners to admin home

---
 src/main/frontend/admin/pages/Home.ts        | 13 ++++++---
 src/main/resources/templates/admin/home.html | 28 +++++++++++++++-----
 2 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/src/main/frontend/admin/pages/Home.ts b/src/main/frontend/admin/pages/Home.ts
index 85201ff..1a35aa2 100644
--- a/src/main/frontend/admin/pages/Home.ts
+++ b/src/main/frontend/admin/pages/Home.ts
@@ -5,9 +5,14 @@ import log from "loglevel";
 
 export async function stats(): Promise<void> {
   const stats = await getStats(Credentials.authToken);
-  $("#totalMessages").text(stats.totalMessages);
-  $("#totalUsers").text(stats.totalUsers);
-  $("#totalOnlineUsers").text(stats.totalOnlineUsers);
-  $("#numMessagesToday").text(stats.numMessagesToday);
+  setTimeout(() => {
+    $(".admin-stats-spinner").hide();
+
+    $("#totalMessages").text(stats.totalMessages).removeAttr("hidden");
+    $("#totalUsers").text(stats.totalUsers).removeAttr("hidden");
+    $("#totalOnlineUsers").text(stats.totalOnlineUsers).removeAttr("hidden");
+    $("#numMessagesToday").text(stats.numMessagesToday).removeAttr("hidden");
+  }, 1000);
+
   log.debug(stats);
 }
diff --git a/src/main/resources/templates/admin/home.html b/src/main/resources/templates/admin/home.html
index 4035349..6bc8f77 100644
--- a/src/main/resources/templates/admin/home.html
+++ b/src/main/resources/templates/admin/home.html
@@ -8,7 +8,7 @@
     <script src="https://code.jquery.com/jquery-2.1.4.min.js" th:if="false"></script>
     <script src="http://blackpeppersoftware.github.io/thymeleaf-fragment.js/thymeleaf-fragment.js"
         data-template-prefix="../" defer="defer" th:if="false"></script>
-    
+
     <th:block th:include="fragments/admin :: headFragment"></th:block>
 </head>
 <!-- TODO
@@ -58,7 +58,10 @@
                                             <div
                                                 class="text-xs font-weight-bold  text-primary-dark text-uppercase mb-1">
                                                 Total Users</div>
-                                            <div class="h5 mb-0 font-weight-bold " id="totalUsers">0</div>
+                                            <div class="h5 mb-0 font-weight-bold " id="totalUsers" hidden>0</div>
+                                            <div
+                                                class="spinner-grow spinner-grow-lg text-info admin-stats-spinner admin-spinner">
+                                            </div>
                                         </div>
                                         <div class="col-auto">
                                             <i class="fas fa-users fa-2x text-gray-300"></i>
@@ -77,7 +80,11 @@
                                         <div class="col mr-2">
                                             <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                                 Total Messages</div>
-                                            <div class="h5 mb-0 font-weight-bold text-light" id="totalMessages">0</div>
+                                            <div class="h5 mb-0 font-weight-bold text-light" id="totalMessages" hidden>0
+                                            </div>
+                                            <div
+                                                class="spinner-grow spinner-grow-lg text-info admin-stats-spinner admin-spinner">
+                                            </div>
                                         </div>
                                         <div class="col-auto">
                                             <i class="fas fa-comments fa-2x text-gray-300"></i>
@@ -93,11 +100,16 @@
                                 <div class="card-body">
                                     <div class="row no-gutters align-items-center">
                                         <div class="col mr-2">
-                                            <div class="text-xs font-weight-bold text-info text-uppercase mb-1">Users Online
+                                            <div class="text-xs font-weight-bold text-info text-uppercase mb-1">Users
+                                                Online
                                             </div>
                                             <div class="row no-gutters align-items-center">
                                                 <div class="col-auto">
-                                                    <div class="h5 mb-0 mr-3 font-weight-bold text-white" id="totalOnlineUsers">0</div>
+                                                    <div class="h5 mb-0 mr-3 font-weight-bold text-white"
+                                                        id="totalOnlineUsers" hidden>0</div>
+                                                    <div
+                                                        class="spinner-grow spinner-grow-lg text-info admin-stats-spinner admin-spinner">
+                                                    </div>
                                                 </div>
                                                 <!-- <div class="col">
                                                     <div class="progress progress-sm mr-2">
@@ -125,7 +137,11 @@
                                         <div class="col mr-2">
                                             <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                                 Messages Today</div>
-                                            <div class="h5 mb-0 font-weight-bold text-white">0</div>
+                                            <div class="h5 mb-0 font-weight-bold text-white" id="numMessagesToday"
+                                                hidden>0</div>
+                                            <div
+                                                class="spinner-grow spinner-grow-lg text-info admin-stats-spinner admin-spinner">
+                                            </div>
                                         </div>
                                         <div class="col-auto">
                                             <i class="fas fa-comment fa-2x text-gray-300"></i>