[fix] Add spinner

Author: dee077

openwisp_monitoring/device/static/monitoring/js/device-map.js

@@ -63,20 +63,22 @@
       success: function (data) {
         let devices = data.results;
         let nextUrl = data.next;
-        const uniqueStatus = Array.from(
-          new Set(devices.map((d) => d.monitoring.status_label)),
-        );
+        const uniqueStatus = devices.reduce((acc, device) => {
+          const { status_label, status } = device.monitoring;
+          acc[status_label] = status;
+          return acc;
+        }, {});
         let statusFiltersBtn = "";
-        uniqueStatus.forEach((status) => {
-          const label = gettext(status);
+        Object.entries(uniqueStatus).forEach(([status_label, status]) => {
+          const label = gettext(status_label);
           statusFiltersBtn += `
-             <span 
-                class="health-status health-${status} status-filter" 
-                data-status="${status}"
-              >
-                ${label}
-              </span>
-            `;
+            <span 
+              class="health-status health-${status} status-filter" 
+              data-status="${status}"
+            >
+              ${label}
+            </span>
+          `;
         });
         const has_floorplan = data.has_floorplan;
         const floorplan_btn = has_floorplan
@@ -110,6 +112,7 @@
                                     
                                 </tbody>
                               </table>
+                              // Todo: Fix css
                               <div class="ow-loading-spinner" style="display: none; position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);"></div>
                             </div>
                             ${floorplan_btn}
@@ -145,10 +148,14 @@
           el.find("tbody").html(rows);
         }
         let fetchDevicesTimeout;
+        let loading = false;
         function fetchDevices(url, ms = 0) {
-          if (!url) return;
+          if (!url || loading) return;
           clearTimeout(fetchDevicesTimeout);
           fetchDevicesTimeout = setTimeout(() => {
+            loading = true;
+            const spinner = el.find(".table-container .ow-loading-spinner");
+            spinner.show();
             let params = new URLSearchParams();
             const searchParam = el
               .find("#device-search")
@@ -170,6 +177,7 @@
             // if nextUrl is the same as url, that means we are fetching for infinite scroll
             if (url === nextUrl) fetchUrl = url;
             else fetchUrl = queryString ? `${url}?${queryString}` : url;
+
             $.ajax(
               {
                 dataType: "json",
@@ -188,14 +196,17 @@
                 error() {
                   console.error("Could not load more devices from", url);
                 },
+                complete() {
+                  loading = false;
+                  spinner.hide();
+                },
               },
-              ms,
             );
-          });
+          }, ms);
         }
         renderRows();
         el.find("#device-search").on("input", function () {
-          fetchDevices(url);
+          fetchDevices(url, 300);
         });
         let activeStatuses = [];
         el.find(".status-filter").on("click", function (e) {
@@ -218,7 +229,7 @@
         });
         el.find(".table-container").on("scroll", function () {
           if (this.scrollTop + this.clientHeight >= this.scrollHeight - 10) {
-            fetchDevices(nextUrl, 300);
+            fetchDevices(nextUrl, 100);
           }
         });
         loadingOverlay.hide();