Add loading spinner

leepeuker · Apr 12, 2023 · f1f0f72 · f1f0f72
1 parent 8df8576
commit f1f0f72
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git 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
@@ -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>