FE: skeleton uplift

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);

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)]}"` +

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}"

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,

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">

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">

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>

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 -->

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">

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>

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">

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">

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>

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++):

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++):

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>

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>

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>

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>

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>

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>

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>

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>

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>

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">

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">