From 275f6a0162fb7fcf725b587d131fd6dcd1c3a92e Mon Sep 17 00:00:00 2001
From: Giorgio Ravera <giorgio.ravera@gmail.com>
Date: Fri, 22 May 2026 14:40:46 +0200
Subject: [PATCH] Add loading indicator while retrieving JSON

---
 frontend/aliases.html  | 11 ++++++++++-
 frontend/hosts.html    | 11 ++++++++++-
 frontend/js/aliases.js | 17 +++++++++++++++++
 frontend/js/hosts.js   | 19 ++++++++++++++++++-
 4 files changed, 55 insertions(+), 3 deletions(-)

diff --git a/frontend/aliases.html b/frontend/aliases.html
index 4141c6e..5142595 100644
--- a/frontend/aliases.html
+++ b/frontend/aliases.html
@@ -107,7 +107,7 @@
     </section>
 
     <!-- Tabella -->
-    <table id="dataTable" class="table table-bordered table-hover align-middle">
+    <table id="dataTable" class="table table-bordered table-hover align-middle d-none">
         <thead class="table-light">
             <tr>
                 <th data-type="string" data-sortable="true">Alias      <span class="sort-arrow" aria-hidden="true"></span></th>
@@ -120,6 +120,15 @@
         <tbody></tbody>
     </table>
 
+    <!-- Loader -->
+    <div id="loader" class="text-center my-3" style="display: none;">
+        <div class="spinner-border text-primary" role="status">
+            <span class="visually-hidden">Loading...</span>
+        </div>
+    </div>
+    <div id="devices-container"></div>
+
+	<!-- AddAlias -->
     <div class="modal fade" id="addAliasModal" tabindex="-1" aria-labelledby="addAliasTitle" aria-hidden="true">
         <div class="modal-dialog modal-dialog-centered"><!-- modal-sm|md|lg se vuoi cambiare -->
             <div class="modal-content addhost-modal">
diff --git a/frontend/hosts.html b/frontend/hosts.html
index 5ec8c9c..e827d4e 100644
--- a/frontend/hosts.html
+++ b/frontend/hosts.html
@@ -107,7 +107,7 @@
     </section>
 
     <!-- Tabella -->
-    <table id="dataTable" class="table table-bordered table-hover align-middle">
+    <table id="dataTable" class="table table-bordered table-hover align-middle d-none">
         <thead class="table-light">
             <tr>
                 <th data-type="string" data-sortable="true">Hostname   <span class="sort-arrow" aria-hidden="true"></span></th>
@@ -121,6 +121,15 @@
         <tbody></tbody>
     </table>
 
+    <!-- Loader -->
+    <div id="loader" class="text-center my-3" style="display: none;">
+        <div class="spinner-border text-primary" role="status">
+            <span class="visually-hidden">Loading...</span>
+        </div>
+    </div>
+    <div id="devices-container"></div>
+
+	<!-- AddHost -->
     <div class="modal fade" id="addHostModal" tabindex="-1" aria-labelledby="addHostTitle" aria-hidden="true">
         <div class="modal-dialog modal-dialog-centered"><!-- modal-sm|md|lg se vuoi cambiare -->
             <div class="modal-content addhost-modal">
diff --git a/frontend/js/aliases.js b/frontend/js/aliases.js
index b48ef6f..5e7e360 100644
--- a/frontend/js/aliases.js
+++ b/frontend/js/aliases.js
@@ -13,7 +13,17 @@ const sortState = { sortDirection: {}, lastSort: null };
 // -----------------------------
 async function loadAliases() {
     let aliases = [];
+    const loader = document.getElementById("loader");
+    const container = document.getElementById("devices-container");
+    const dataTable = document.getElementById("dataTable");
+
+    // hide table during loading to avoid flickering and show loader
+    dataTable.classList.add("d-none");
+
     try {
+        // Show loader
+        loader.style.display = "block";
+
         // Fetch data
         const res = await fetch(`/api/aliases`, {
             headers: { Accept: 'application/json' },
@@ -50,6 +60,9 @@ async function loadAliases() {
         console.error(err?.message || "Error loading aliases");
         showToast(err?.message || "Error loading aliase", false);
         aliases = [];
+        // hide loader and show table
+        loader.style.display = "none";
+        dataTable.classList.remove("d-none");
     }
 
     // DOM Reference
@@ -226,6 +239,10 @@ async function loadAliases() {
             sortTable(lastSort.colIndex, sortState);
         }
     }
+
+    // hide loader and show table
+    loader.style.display = "none";
+    dataTable.classList.remove("d-none");
 }
 
 // -----------------------------
diff --git a/frontend/js/hosts.js b/frontend/js/hosts.js
index 3916346..3f8e2d7 100644
--- a/frontend/js/hosts.js
+++ b/frontend/js/hosts.js
@@ -13,7 +13,17 @@ const sortState = { sortDirection: {}, lastSort: null };
 // -----------------------------
 async function loadHosts() {
     let hosts = [];
+    const loader = document.getElementById("loader");
+    const container = document.getElementById("devices-container");
+    const dataTable = document.getElementById("dataTable");
+
+    // hide table during loading to avoid flickering and show loader
+    dataTable.classList.add("d-none");
+
     try {
+        // Show loader
+        loader.style.display = "block";
+
         // Fetch data
         const res = await fetch(`/api/hosts`, {
             headers: { Accept: 'application/json' },
@@ -50,6 +60,9 @@ async function loadHosts() {
         console.error(err?.message || "Error loading hosts");
         showToast(err?.message || "Error loading hosts", false);
         hosts = [];
+        // hide loader and show table
+        loader.style.display = "none";
+        dataTable.classList.remove("d-none");
     }
 
     // DOM Reference
@@ -233,9 +246,13 @@ async function loadHosts() {
     if (typeof lastSort === "object" && lastSort && Array.isArray(sortDirection)) {
         if (Number.isInteger(lastSort.colIndex)) {
             sortDirection[lastSort.colIndex] = !lastSort.ascending;
-            sortTable(lastSort.colIndex);
+            sortTable(lastSort.colIndex, sortState);
         }
     }
+
+    // hide loader and show table
+    loader.style.display = "none";
+    dataTable.classList.remove("d-none");
 }
 
 // -----------------------------
-- 
2.47.3