From 2623b81af2f5b46c8722eb044a8fe6fab02c0d14 Mon Sep 17 00:00:00 2001
From: masterhc <cris_ferreira_pires@hotmail.com>
Date: Mon, 26 Feb 2024 23:21:29 +0000
Subject: [PATCH] Spinner on load on dashboard

---
 public/css/dashboard.css   | 49 ++++++++++++++++++++++++++++++++++++++
 views/dashboard.ejs        |  5 +++-
 views/strikesDashboard.ejs |  4 ++++
 3 files changed, 57 insertions(+), 1 deletion(-)

diff --git a/public/css/dashboard.css b/public/css/dashboard.css
index f1b2940..6155f71 100644
--- a/public/css/dashboard.css
+++ b/public/css/dashboard.css
@@ -717,4 +717,53 @@ option
 {
   cursor: pointer;
 }
+.spinnerContainer
+{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.bt-spinner {
+  width: 75px;
+  height: 75px;
+  border-radius: 50%;
+  background-color: transparent;
+  border: 4px solid #222;
+  border-top-color: #009688;
+  -webkit-animation: 1s spin linear infinite;
+  animation: 1s spin linear infinite;
+}
+-webkit-@keyframes spin {
+  -webkit-from {
+    -webkit-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  -webkit-to {
+    -webkit-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
 
+@-webkit-keyframes spin {
+  from {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes spin {
+  from {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
\ No newline at end of file
diff --git a/views/dashboard.ejs b/views/dashboard.ejs
index d1f52ec..c59aad3 100644
--- a/views/dashboard.ejs
+++ b/views/dashboard.ejs
@@ -25,7 +25,10 @@
         <%- include('guilds.ejs') %>         
     </div>
     <div id="PopUpContainer" class="PopUpContainer hidden">
-
+        <div class="spinnerContainer">
+            <div class="bt-spinner">
+            </div>
+        </div>
     </div>
 </body>
 
diff --git a/views/strikesDashboard.ejs b/views/strikesDashboard.ejs
index cee3db0..7d8aef4 100644
--- a/views/strikesDashboard.ejs
+++ b/views/strikesDashboard.ejs
@@ -17,5 +17,9 @@
 </div>
 <div id="maindisplay">
     <%- include('strikelist.ejs') %>
+    <div class="spinnerContainer htmx-indicator">
+        <div class="bt-spinner">
+        </div>
+    </div>
 </div>