From 3f4d684e06518a21358e992471cd364c529b57a4 Mon Sep 17 00:00:00 2001
From: jokob-sk <jokob.sk@gmail.com>
Date: Wed, 24 Jun 2026 18:07:35 +1000
Subject: [PATCH] FE: skeleton uplift

---
 front/deviceDetailsEdit.php                        | 1 +
 front/devices.php                                  | 4 ++--
 front/js/network-tree.js                           | 4 ++--
 front/js/ui_components.js                          | 4 ++--
 front/php/templates/skel_devices.php               | 2 +-
 front/php/templates/skel_events.php                | 2 +-
 front/php/templates/skel_notifications.php         | 2 +-
 front/php/templates/skel_plugins.php               | 2 +-
 front/php/templates/skel_presence.php              | 2 +-
 front/php/templates/skel_report.php                | 2 +-
 front/php/templates/skel_settings.php              | 2 +-
 front/php/templates/skel_tab_details.php           | 2 +-
 front/php/templates/skel_tab_events.php            | 2 +-
 front/php/templates/skel_tab_maint_backup.php      | 2 +-
 front/php/templates/skel_tab_maint_dbtools.php     | 2 +-
 front/php/templates/skel_tab_maint_logging.php     | 2 +-
 front/php/templates/skel_tab_maint_multiedit.php   | 2 +-
 front/php/templates/skel_tab_plugins_table.php     | 2 +-
 front/php/templates/skel_tab_presence.php          | 2 +-
 front/php/templates/skel_tab_sessions.php          | 2 +-
 front/php/templates/skel_tab_sysinfo_initcheck.php | 2 +-
 front/php/templates/skel_tab_sysinfo_network.php   | 2 +-
 front/php/templates/skel_tab_sysinfo_server.php    | 2 +-
 front/php/templates/skel_tab_sysinfo_storage.php   | 2 +-
 front/php/templates/skel_tab_tools.php             | 2 +-
 front/php/templates/skel_workflows.php             | 2 +-
 26 files changed, 29 insertions(+), 28 deletions(-)

diff --git a/front/deviceDetailsEdit.php b/front/deviceDetailsEdit.php
index fa8d393a..317de6d7 100755
--- a/front/deviceDetailsEdit.php
+++ b/front/deviceDetailsEdit.php
@@ -488,6 +488,7 @@ function setDeviceData(direction = '', refreshCallback = '') {
 
       if (resp && resp.success) {
         showMessage(getString("Device_Saved_Success"));
+        hideDetailsTabSkeleton();
       } else {
 
         console.log(resp);
diff --git a/front/devices.php b/front/devices.php
index 79f5ff58..c4f124ab 100755
--- a/front/devices.php
+++ b/front/devices.php
@@ -921,8 +921,8 @@ function initializeDatatable (status) {
                   ` data-mac="${row[mapIndx(COL.devMac)]}"` +
                   ` data-vendor="${row[mapIndx(COL.devVendor)]}"` +
                   ` data-type="${row[mapIndx(COL.devType)]}"` +
-                  ` data-firstseen="${row[mapIndx(COL.devFirstConnection)]}"` +
-                  ` data-lastseen="${row[mapIndx(COL.devLastConnection)]}"` +
+                  ` data-firstseen="${localizeTimestamp(row[mapIndx(COL.devFirstConnection)])}"` +
+                  ` data-lastseen="${localizeTimestamp(row[mapIndx(COL.devLastConnection)])}"` +
                   ` data-relationship="${row[mapIndx(COL.devParentRelType)]}"` +
                   ` data-status="${row[mapIndx(COL.devStatus)]}"` +
                   ` data-present="${row[mapIndx(COL.devPresentLastScan)]}"` +
diff --git a/front/js/network-tree.js b/front/js/network-tree.js
index 0f8f4f2f..078239d5 100644
--- a/front/js/network-tree.js
+++ b/front/js/network-tree.js
@@ -284,8 +284,8 @@ function initTree(myHierarchy)
                               data-vendor="${nodeData.data.devVendor}"
                               data-type="${nodeData.data.devType}"
                               data-devIsNetworkNodeDynamic="${nodeData.data.devIsNetworkNodeDynamic}"
-                              data-lastseen="${nodeData.data.devLastConnection}"
-                              data-firstseen="${nodeData.data.devFirstConnection}"
+                              data-lastseen="${localizeTimestamp(nodeData.data.devLastConnection)}"
+                              data-firstseen="${localizeTimestamp(nodeData.data.devFirstConnection)}"
                               data-relationship="${nodeData.data.devParentRelType}"
                               data-flapping="${nodeData.data.devFlapping}"
                               data-sleeping="${nodeData.data.devIsSleeping || 0}"
diff --git a/front/js/ui_components.js b/front/js/ui_components.js
index 1cd0a863..917ff860 100755
--- a/front/js/ui_components.js
+++ b/front/js/ui_components.js
@@ -980,8 +980,8 @@ function renderDeviceLink(data, container, useName = false) {
       'data-mac': device.devMac,
       'data-vendor': device.devVendor,
       'data-type': device.devType,
-      'data-lastseen': device.devLastConnection,
-      'data-firstseen': device.devFirstConnection,
+      'data-lastseen': localizeTimestamp(device.devLastConnection),
+      'data-firstseen': localizeTimestamp(device.devFirstConnection),
       'data-relationship': device.devParentRelType,
       'data-status': device.devStatus,
       'data-flapping': device.devFlapping,
diff --git a/front/php/templates/skel_devices.php b/front/php/templates/skel_devices.php
index 1fd09de3..6d6638d7 100644
--- a/front/php/templates/skel_devices.php
+++ b/front/php/templates/skel_devices.php
@@ -1,5 +1,5 @@
 <!-- Devices Loading Skeleton ============================================== -->
-<div id="devices-skeleton">
+<div id="devices-skeleton" class="spinnerTarget">
 
   <!-- Tile cards row -------------------------------------------------------- -->
   <div class="skel-tile-row">
diff --git a/front/php/templates/skel_events.php b/front/php/templates/skel_events.php
index 3b9a9bf2..0ac60b70 100644
--- a/front/php/templates/skel_events.php
+++ b/front/php/templates/skel_events.php
@@ -1,4 +1,4 @@
-<div id="events-skeleton">
+<div id="events-skeleton" class="spinnerTarget">
 
   <!-- 6 stat tiles -->
   <div class="row">
diff --git a/front/php/templates/skel_notifications.php b/front/php/templates/skel_notifications.php
index d4f6fa03..67b37c2f 100644
--- a/front/php/templates/skel_notifications.php
+++ b/front/php/templates/skel_notifications.php
@@ -1,4 +1,4 @@
-<div id="notifications-skeleton">
+<div id="notifications-skeleton" class="spinnerTarget">
   <div class="skel-table-box">
     <div class="skel-box-header">
       <span class="skel-line skel-shimmer" style="width:200px"></span>
diff --git a/front/php/templates/skel_plugins.php b/front/php/templates/skel_plugins.php
index a752921d..b6107902 100644
--- a/front/php/templates/skel_plugins.php
+++ b/front/php/templates/skel_plugins.php
@@ -1,4 +1,4 @@
-<div id="plugins-skeleton">
+<div id="plugins-skeleton" class="spinnerTarget">
   <div class="skel-plugins-wrap  col-sm-12">
 
     <!-- Left nav sidebar -->
diff --git a/front/php/templates/skel_presence.php b/front/php/templates/skel_presence.php
index e344d4aa..eb3be3fd 100644
--- a/front/php/templates/skel_presence.php
+++ b/front/php/templates/skel_presence.php
@@ -1,4 +1,4 @@
-<div id="presence-skeleton">
+<div id="presence-skeleton" class="spinnerTarget">
 
   <!-- 6 stat tiles -->
   <div class="row">
diff --git a/front/php/templates/skel_report.php b/front/php/templates/skel_report.php
index fa6748c2..25dd5dc7 100644
--- a/front/php/templates/skel_report.php
+++ b/front/php/templates/skel_report.php
@@ -1,4 +1,4 @@
-<div id="report-skeleton">
+<div id="report-skeleton" class="spinnerTarget">
   <div class="skel-table-box">
     <div class="skel-box-header">
       <span class="skel-line skel-shimmer" style="width:160px"></span>
diff --git a/front/php/templates/skel_settings.php b/front/php/templates/skel_settings.php
index e06ead88..0c65db44 100644
--- a/front/php/templates/skel_settings.php
+++ b/front/php/templates/skel_settings.php
@@ -1,5 +1,5 @@
 <!-- Settings Loading Skeleton --------------------------------------------- -->
-<div id="settings-skeleton">
+<div id="settings-skeleton" class="spinnerTarget">
 
   <!-- Overview panel skeleton -->
   <div class="skel-overview-panel">
diff --git a/front/php/templates/skel_tab_details.php b/front/php/templates/skel_tab_details.php
index dcccaf93..c6a96448 100644
--- a/front/php/templates/skel_tab_details.php
+++ b/front/php/templates/skel_tab_details.php
@@ -1,5 +1,5 @@
 <!-- Details Tab Skeleton ================================================== -->
-<div id="skel-tab-details" class="skel-tab-pane">
+<div id="skel-tab-details" class="skel-tab-pane spinnerTarget">
   <div class="skel-detail-form col-lg-12 col-sm-12 col-xs-12">
     <div class="col-lg-4 col-sm-6 col-xs-12">
       <div class="skel-form-row">
diff --git a/front/php/templates/skel_tab_events.php b/front/php/templates/skel_tab_events.php
index 667049b0..4096af40 100644
--- a/front/php/templates/skel_tab_events.php
+++ b/front/php/templates/skel_tab_events.php
@@ -1,5 +1,5 @@
 <!-- Events Tab Skeleton =================================================== -->
-<div id="skel-tab-events" class="skel-tab-pane">
+<div id="skel-tab-events" class="skel-tab-pane spinnerTarget">
   <!-- Checkbox row -->
   <div style="display:flex; align-items:center; gap:10px; margin-bottom:12px; padding:0 2px;">
     <span class="skel-shimmer" style="width:16px; height:16px; border-radius:3px; flex-shrink:0;"></span>
diff --git a/front/php/templates/skel_tab_maint_backup.php b/front/php/templates/skel_tab_maint_backup.php
index 83044e56..d6090247 100644
--- a/front/php/templates/skel_tab_maint_backup.php
+++ b/front/php/templates/skel_tab_maint_backup.php
@@ -1,4 +1,4 @@
-<div class="skel-tab-pane" id="skel-tab-maint-backup">
+<div class="skel-tab-pane spinnerTarget" id="skel-tab-maint-backup">
   <?php
     $widths = [55, 60, 65, 50, 55, 70];
     for ($i = 0; $i < 6; $i++):
diff --git a/front/php/templates/skel_tab_maint_dbtools.php b/front/php/templates/skel_tab_maint_dbtools.php
index 7072bfa4..b821eb36 100644
--- a/front/php/templates/skel_tab_maint_dbtools.php
+++ b/front/php/templates/skel_tab_maint_dbtools.php
@@ -1,4 +1,4 @@
-<div class="skel-tab-pane" id="skel-tab-maint-dbtools">
+<div class="skel-tab-pane spinnerTarget" id="skel-tab-maint-dbtools">
   <?php
     $widths = [55, 70, 45, 62, 58, 50, 55, 48];
     for ($i = 0; $i < 8; $i++):
diff --git a/front/php/templates/skel_tab_maint_logging.php b/front/php/templates/skel_tab_maint_logging.php
index 4b7e228e..517a108a 100644
--- a/front/php/templates/skel_tab_maint_logging.php
+++ b/front/php/templates/skel_tab_maint_logging.php
@@ -1,4 +1,4 @@
-<div class="skel-tab-pane" id="skel-tab-maint-logging">
+<div class="skel-tab-pane spinnerTarget" id="skel-tab-maint-logging">
   <!-- Controls bar -->
   <div style="display:flex; gap:20px; padding:10px 0 15px; align-items:center;">
     <span class="skel-line skel-shimmer" style="width:120px"></span>
diff --git a/front/php/templates/skel_tab_maint_multiedit.php b/front/php/templates/skel_tab_maint_multiedit.php
index d9caa923..1324239f 100644
--- a/front/php/templates/skel_tab_maint_multiedit.php
+++ b/front/php/templates/skel_tab_maint_multiedit.php
@@ -1,4 +1,4 @@
-<div class="skel-tab-pane" id="skel-tab-maint-multiedit">
+<div class="skel-tab-pane spinnerTarget" id="skel-tab-maint-multiedit">
   <?php for ($i = 0; $i < 8; $i++): ?>
   <div class="skel-form-row">
     <span class="skel-form-label skel-shimmer"></span>
diff --git a/front/php/templates/skel_tab_plugins_table.php b/front/php/templates/skel_tab_plugins_table.php
index cfe163c1..f7d9ca15 100644
--- a/front/php/templates/skel_tab_plugins_table.php
+++ b/front/php/templates/skel_tab_plugins_table.php
@@ -1,5 +1,5 @@
 <!-- Plugins Sub-Tab Table Skeleton (shared: Objects / Events / History) === -->
-<div class="skel-table-box">
+<div class="skel-table-box spinnerTarget">
   <div class="skel-table-header-row">
     <?php for ($j = 0; $j < 5; $j++): ?>
     <span class="skel-th skel-shimmer"></span>
diff --git a/front/php/templates/skel_tab_presence.php b/front/php/templates/skel_tab_presence.php
index c403b47d..757be01b 100644
--- a/front/php/templates/skel_tab_presence.php
+++ b/front/php/templates/skel_tab_presence.php
@@ -1,5 +1,5 @@
 <!-- Presence Tab Skeleton ================================================= -->
-<div id="skel-tab-presence" class="skel-tab-pane">
+<div id="skel-tab-presence" class="skel-tab-pane spinnerTarget">
   <div class="skel-chart-box">
     <div class="skel-box-header">
       <span class="skel-line skel-shimmer" style="width:80px"></span>
diff --git a/front/php/templates/skel_tab_sessions.php b/front/php/templates/skel_tab_sessions.php
index 80cedbf6..f2e9e619 100644
--- a/front/php/templates/skel_tab_sessions.php
+++ b/front/php/templates/skel_tab_sessions.php
@@ -1,5 +1,5 @@
 <!-- Sessions Tab Skeleton ================================================= -->
-<div id="skel-tab-sessions" class="skel-tab-pane">
+<div id="skel-tab-sessions" class="skel-tab-pane spinnerTarget">
   <div class="skel-table-box">
     <div class="skel-table-header-row">
       <span class="skel-th skel-shimmer" style="flex:0.5"></span>
diff --git a/front/php/templates/skel_tab_sysinfo_initcheck.php b/front/php/templates/skel_tab_sysinfo_initcheck.php
index 4c8656d3..b84b81bf 100644
--- a/front/php/templates/skel_tab_sysinfo_initcheck.php
+++ b/front/php/templates/skel_tab_sysinfo_initcheck.php
@@ -1,4 +1,4 @@
-<div class="skel-info-tab">
+<div class="skel-info-tab spinnerTarget">
   <!-- status banner -->
   <div style="margin-bottom:16px">
     <span class="skel-shimmer" style="height:44px; border-radius:4px; display:block;"></span>
diff --git a/front/php/templates/skel_tab_sysinfo_network.php b/front/php/templates/skel_tab_sysinfo_network.php
index 1598d59c..efdb3526 100644
--- a/front/php/templates/skel_tab_sysinfo_network.php
+++ b/front/php/templates/skel_tab_sysinfo_network.php
@@ -1,4 +1,4 @@
-<div class="skel-info-tab">
+<div class="skel-info-tab spinnerTarget">
   <?php for ($i = 0; $i < 20; $i++): ?>
   <div class="skel-form-row">
     <span class="skel-form-label skel-shimmer"></span>
diff --git a/front/php/templates/skel_tab_sysinfo_server.php b/front/php/templates/skel_tab_sysinfo_server.php
index 1598d59c..efdb3526 100644
--- a/front/php/templates/skel_tab_sysinfo_server.php
+++ b/front/php/templates/skel_tab_sysinfo_server.php
@@ -1,4 +1,4 @@
-<div class="skel-info-tab">
+<div class="skel-info-tab spinnerTarget">
   <?php for ($i = 0; $i < 20; $i++): ?>
   <div class="skel-form-row">
     <span class="skel-form-label skel-shimmer"></span>
diff --git a/front/php/templates/skel_tab_sysinfo_storage.php b/front/php/templates/skel_tab_sysinfo_storage.php
index bca96202..001bed2a 100644
--- a/front/php/templates/skel_tab_sysinfo_storage.php
+++ b/front/php/templates/skel_tab_sysinfo_storage.php
@@ -1,4 +1,4 @@
-<div class="skel-info-tab">
+<div class="skel-info-tab spinnerTarget">
   <div class="skel-table-header-row">
     <?php for ($i = 0; $i < 5; $i++): ?>
     <span class="skel-th skel-shimmer"></span>
diff --git a/front/php/templates/skel_tab_tools.php b/front/php/templates/skel_tab_tools.php
index a830d7b5..42d74241 100644
--- a/front/php/templates/skel_tab_tools.php
+++ b/front/php/templates/skel_tab_tools.php
@@ -1,4 +1,4 @@
-<div id="skel-tab-tools">
+<div id="skel-tab-tools" class="spinnerTarget">
 
   <!-- events table -->
   <div class="row" style="margin-top:12px">
diff --git a/front/php/templates/skel_workflows.php b/front/php/templates/skel_workflows.php
index 23a72188..22d5976f 100644
--- a/front/php/templates/skel_workflows.php
+++ b/front/php/templates/skel_workflows.php
@@ -1,4 +1,4 @@
-<div id="workflows-skeleton">
+<div id="workflows-skeleton" class="spinnerTarget">
   <?php for ($i = 0; $i < 3; $i++): ?>
   <div class="skel-workflow-card">
     <div class="skel-workflow-header">