Loading animation for filter and searching tickets

apps/static/assets/css/index.css

@@ -69118,3 +69118,20 @@ table.dataTable.no-footer {
   min-height: 200px;
   max-height: 200px;
 }
+
+#ticketsContainer .loading .spinner-grow {
+    width: .8rem;
+    height: .8rem;
+}
+
+#ticketsContainer .loading .spinner-grow:nth-child(1) {
+    animation-delay: 0s;
+}
+
+#ticketsContainer .loading .spinner-grow:nth-child(2) {
+  animation-delay: .9s;
+}
+
+#ticketsContainer .loading .spinner-grow:nth-child(3) {
+  animation-delay: 1.8s;
+}

apps/static/assets/js/tickets.js

@@ -178,7 +178,8 @@ function loadAllTickets() {
     }
 
     $("#ticketsContainer .content").empty();
-    $("#ticketsContainer .none-found, #ticketsContainer .loading").hide();
+    $("#ticketsContainer .none-found").hide();
+    $("#ticketsContainer .loading").show();
 
     loadingTickets = true;
     // alert(JSON.stringify(filters, null, 4));
@@ -193,6 +194,7 @@ function loadAllTickets() {
             console.log(JSON.stringify(data, null, 4))
 
             $("#ticketCounts .current").text(data.length);
+            $("#ticketsContainer .loading").hide();
 
             if (data.length === 0) $("#ticketsContainer .none-found").show();
             else $("#ticketsContainer .none-found").hide();

apps/templates/home/tickets.html

@@ -171,8 +171,16 @@
                             <li>Try using the refresh button</li>
                         </ul>
                     </div>
-                    <div class="loading">
-                        Loading
+                    <div class="loading pos-a top-50 start-50 translate-middle">
+                        <div class="spinner-grow" role="status">
+                            <span class="visually-hidden">Loading...</span>
+                        </div>
+                        <div class="spinner-grow mX-5" role="status">
+                            <span class="visually-hidden">Loading...</span>
+                        </div>
+                        <div class="spinner-grow" role="status">
+                            <span class="visually-hidden">Loading...</span>
+                        </div>
                     </div>
                 </div>