Add loading indicator while retrieving JSON

diff --git a/frontend/aliases.html b/frontend/aliases.html
index 4141c6edbe0e79c77576894a24374bfd04489ca9..5142595909ca3460e576489f6677909980c7b88d 100644 (file)
--- 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 5ec8c9cc3cbaa6b349396bb2853bae6c9d1d42f7..e827d4e01b9eb6d01cc70eace6d6e96a7032a2ec 100644 (file)
--- 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 b48ef6f5595544a5e6970a5037640b33edae6b9a..5e7e3607ccd1c083bf4e0aa4b456a5e97a4610b2 100644 (file)
--- 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 3916346330322a31d81383e8e55127cfa0ff9924..3f8e2d7805b7798f8ee104ef1b54ed314cbd5353 100644 (file)
--- 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");
 }
 
 // -----------------------------