From f1f0f72cecf04c7ccf63d1c7f22be517a6b6e385 Mon Sep 17 00:00:00 2001
From: Lee Peuker <lee.peuker@protonmail.com>
Date: Wed, 12 Apr 2023 07:35:13 +0200
Subject: [PATCH] Add loading spinner

---
 public/js/settings-users.js             | 8 ++++++--
 templates/page/settings-users.html.twig | 3 +++
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/public/js/settings-users.js b/public/js/settings-users.js
index 2d194e1f..b40cf90b 100644
--- a/public/js/settings-users.js
+++ b/public/js/settings-users.js
@@ -216,18 +216,22 @@ function setUserManagementAlert(message, type = 'success') {
 }
 
 async function reloadTable() {
-    table.rows = []
-
     table.getElementsByTagName('tbody')[0].innerHTML = ''
+    document.getElementById('userTableLoadingSpinner').classList.remove('d-none')
 
     const response = await fetch('/api/users');
 
     if (response.status !== 200) {
         setUserManagementAlert('Could not load users', 'danger')
+        document.getElementById('userTableLoadingSpinner').classList.add('d-none')
+
+        return
     }
 
     const users = await response.json();
 
+    document.getElementById('userTableLoadingSpinner').classList.add('d-none')
+
     users.forEach((user) => {
         let row = document.createElement('tr');
         row.innerHTML = '<td>' + user.id + '</td>';
diff --git a/templates/page/settings-users.html.twig b/templates/page/settings-users.html.twig
index 47d07ec9..b725201d 100644
--- a/templates/page/settings-users.html.twig
+++ b/templates/page/settings-users.html.twig
@@ -38,6 +38,9 @@
                         <tbody></tbody>
                     </table>
                 </div>
+                <div class="spinner-border d-none" role="status" id="userTableLoadingSpinner">
+                    <span class="visually-hidden">Loading...</span>
+                </div>
             </div>
         </div>