Add skeleton templates for various sections

- Created skeleton templates for events, notifications, plugins, presence, report, settings, and workflows to enhance loading states.
- Implemented structured skeletons for tab details, tab events, maintenance backup, database tools, logging, multi-edit, presence, sessions, and system info.
- Each template includes shimmer effects for loading indicators, improving user experience during data fetching.

front/appEvents.php

@@ -1,7 +1,6 @@
 <?php
 
   require 'php/templates/header.php';  
-  require 'php/templates/modals.php'; 
 ?>
 <!-- ----------------------------------------------------------------------- -->
  

front/css/app.css

@@ -2591,8 +2591,9 @@ table.dataTable tbody > tr.selected
     background-color: rgba(140, 140, 140, 0.05);
 }
 
-/* ===== Settings Page Loading Skeleton ===== */
+/* ===== Loading Skeleton ===== */
 
+/* Custom properties (overridden in dark-patch.css for Dark/System themes) */
 :root {
     --skel-base:     #e2e2e2;
     --skel-shine:    #f0f0f0;
@@ -2607,23 +2608,6 @@ table.dataTable tbody > tr.selected
     100% { background-position:  600px 0; }
 }
 
-#settingsPage {
-    position: relative;
-}
-
-#settings-skeleton {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: 50;
-    background-color: var(--skel-bg);
-    padding-top: 50px;
-    padding-left: 20px;
-    padding-right: 20px;
-    min-height: 500px;
-}
-
 .skel-shimmer {
     background: linear-gradient(
         90deg,
@@ -2637,122 +2621,150 @@ table.dataTable tbody > tr.selected
     display: inline-block;
 }
 
-/* Overview panel skeleton */
-.skel-overview-panel {
-    margin-bottom: 10px;
-    border-radius: 4px;
-    overflow: hidden;
+/* Positioning anchors */
+#settingsPage, #devicesPage, #deviceDetailsPage,
+#eventsPage, #presencePage, #reportPage, #notifications, #wf-content-wrapper, #pluginsPage,
+#panDetails, #panSessions, #panPresence, #panEvents {
+    position: relative;
+}
+#panDetails, #panSessions, #panPresence, #panEvents { min-height: 420px; }
+#tab_DBTools, #tab_BackupRestore, #tab_Logging, #tab_multiEdit { position: relative; min-height: 320px; }
+
+/* Page-level overlay base */
+#settings-skeleton, #devices-skeleton, #device-details-skeleton,
+#events-skeleton, #presence-skeleton, #report-skeleton,
+#notifications-skeleton, #workflows-skeleton, #plugins-skeleton, .skel-tab-pane {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    background-color: var(--skel-bg);
+    padding: 15px;
+}
+#settings-skeleton, #devices-skeleton, #device-details-skeleton,
+#events-skeleton, #presence-skeleton, #report-skeleton,
+#notifications-skeleton, #workflows-skeleton, #plugins-skeleton { z-index: 50; }
+.skel-tab-pane           { z-index: 10; min-height: 400px; }
+#settings-skeleton       { padding-top: 50px; padding-left: 20px; padding-right: 20px; min-height: 500px; }
+#devices-skeleton        { top: 50px; min-height: 500px; }
+#device-details-skeleton { min-height: 600px; }
+#events-skeleton         { top: 50px; min-height: 500px; }
+#presence-skeleton       { top: 50px; min-height: 500px; }
+#report-skeleton         { min-height: 400px; }
+#notifications-skeleton  { min-height: 400px; }
+#workflows-skeleton      { top: 50px; width: 770px; margin: 0 auto; min-height: 300px; }
+#plugins-skeleton        { padding: 0; min-height: 400px; }
+
+/* Bordered containers */
+.skel-overview-panel, .skel-section, .skel-plugin-block,
+.skel-chart-box, .skel-table-box,
+.skel-detail-info-panel, .skel-detail-form, .skel-tabs-bar {
     border: 1px solid var(--skel-border);
 }
 
-.skel-overview-heading {
-    height: 44px;
-    background: var(--skel-section);
-    display: flex;
-    align-items: center;
-    padding: 0 15px;
-    gap: 12px;
-}
-
-.skel-overview-body {
-    padding: 12px;
-    background: var(--skel-panel-bg);
-    display: flex;
-    gap: 12px;
-    flex-wrap: wrap;
-}
-
-.skel-overview-card {
-    min-width: 100px;
-    height: 76px;
-    border-radius: 4px;
-}
-
-/* Section accordion skeleton */
-.skel-section {
-    margin-bottom: 8px;
+/* Clipped rounded containers */
+.skel-overview-panel, .skel-section, .skel-plugin-block,
+.skel-chart-box, .skel-table-box, .skel-tile {
     border-radius: 4px;
     overflow: hidden;
-    border: 1px solid var(--skel-border);
 }
 
-.skel-overview-header {
-    height: 44px;
-    padding: 0 15px;
-    display: flex;
-    align-items: center;
-    gap: 14px;
-    background: var(--skel-panel-bg);
-}
-
-.skel-section-header {
-    height: 44px;
-    padding: 0 15px;
-    display: flex;
-    align-items: center;
-    gap: 14px;
+/* Section-toned backgrounds */
+.skel-overview-heading, .skel-section-header, .skel-plugin-header,
+.skel-box-header, .skel-table-header-row, .skel-tile, .skel-tabs-bar {
     background: var(--skel-section);
 }
 
-/* Plugin block inside an open section */
-.skel-plugin-block {
-    margin: 8px;
-    border-radius: 4px;
-    overflow: hidden;
-    border: 1px solid var(--skel-border);
-}
-
-.skel-plugin-header {
-    height: 48px;
-    padding: 0 15px;
-    display: flex;
-    align-items: center;
-    gap: 14px;
-    background: var(--skel-section);
-}
-
-.skel-plugin-body {
+/* Panel-toned backgrounds */
+.skel-overview-body, .skel-overview-header, .skel-plugin-body,
+.skel-detail-info-panel, .skel-detail-form {
     background: var(--skel-panel-bg);
 }
 
-.skel-setting-row {
+/* Flex rows with vertical centering */
+.skel-overview-heading, .skel-overview-header, .skel-section-header, .skel-plugin-header,
+.skel-box-header, .skel-table-header-row, .skel-setting-row, .skel-tr, .skel-form-row,
+.skel-tile-icon-area {
     display: flex;
     align-items: center;
-    gap: 10px;
-    padding: 11px 15px;
-    border-bottom: 1px solid var(--skel-border);
 }
 
-.skel-setting-row:last-child {
-    border-bottom: none;
+/* Standard header bar height + padding */
+.skel-overview-heading, .skel-overview-header, .skel-section-header, .skel-box-header {
+    height: 44px;
+    padding: 0 15px;
 }
 
-/* Skeleton line / cell primitives */
-.skel-line {
-    height: 14px;
-    flex-shrink: 0;
-}
+/* Row separator borders */
+.skel-setting-row, .skel-tr, .skel-form-row { border-bottom: 1px solid var(--skel-border); }
+.skel-setting-row:last-child, .skel-tr:last-child, .skel-form-row:last-of-type { border-bottom: none; }
 
-.skel-icon-block {
-    width: 22px;
-    height: 16px;
-    flex-shrink: 0;
-}
+/* Standard data row spacing */
+.skel-setting-row, .skel-tr { gap: 10px; padding: 11px 15px; }
 
-.skel-cell-name {
-    width: 20%;
-    height: 14px;
-    flex-shrink: 0;
-}
+/* Thin-line height (14px) */
+.skel-line, .skel-cell-name, .skel-cell-desc, .skel-th, .skel-form-label { height: 14px; }
 
-.skel-cell-desc {
-    width: 36%;
-    height: 14px;
-    flex-shrink: 0;
-}
+/* Non-growing primitives */
+.skel-line, .skel-icon-block, .skel-cell-name, .skel-cell-desc, .skel-form-label { flex-shrink: 0; }
+
+/* Filling cells (flex: 1) */
+.skel-tile-inner, .skel-th, .skel-td, .skel-cell-input, .skel-form-input { flex: 1; }
+
+/* ----- Settings --------------------------------------------------------- */
+.skel-overview-panel    { margin-bottom: 10px; }
+.skel-overview-heading  { gap: 12px; }
+.skel-overview-body     { padding: 12px; display: flex; gap: 12px; flex-wrap: wrap; }
+.skel-overview-card     { min-width: 100px; height: 76px; border-radius: 4px; }
+.skel-section           { margin-bottom: 8px; }
+.skel-overview-header   { gap: 14px; }
+.skel-section-header    { gap: 14px; }
+.skel-plugin-block      { margin: 8px; }
+.skel-plugin-header     { height: 48px; padding: 0 15px; gap: 14px; }
+.skel-icon-block        { width: 22px; height: 16px; }
+.skel-cell-name         { width: 20%; }
+.skel-cell-desc         { width: 36%; }
+.skel-cell-input        { height: 32px; }
+
+/* ----- Devices ---------------------------------------------------------- */
+.skel-tile              { display: flex; height: 80px; }
+.skel-tile-inner        { display: flex; flex-direction: column; padding: 12px 15px; justify-content: center; gap: 10px; }
+.skel-tile-num          { height: 26px; width: 55%; }
+.skel-tile-label        { height: 13px; width: 75%; }
+.skel-tile-icon-area    { width: 70px; justify-content: center; background: var(--skel-base); opacity: 0.6; }
+.skel-tile-icon-shape   { width: 38px; height: 38px; border-radius: 50%; }
+.skel-chart-box         { margin-bottom: 12px; }
+.skel-box-header        { gap: 12px; border-bottom: 1px solid var(--skel-border); }
+.skel-chart-body        { height: 220px; border-radius: 0; display: block; width: 100%; }
+.skel-table-header-row  { gap: 10px; padding: 10px 15px; border-bottom: 2px solid var(--skel-border); }
+.skel-td                { height: 13px; }
+
+/* ----- Device Details --------------------------------------------------- */
+.skel-detail-header     { margin-bottom: 15px; }
+.skel-detail-title      { height: 26px; width: 42%; margin-bottom: 14px; }
+.skel-detail-info-panel { display: flex; gap: 0; padding: 14px; border-radius: 4px; margin-bottom: 15px; max-width: 400px; }
+.skel-tabs-bar          { display: flex; gap: 4px; padding: 8px 10px 0; border-radius: 4px 4px 0 0; border-bottom: none; }
+.skel-tab               { height: 34px; width: 100px; border-radius: 4px 4px 0 0; flex-shrink: 0; }
+.skel-detail-form       { border-top: none; border-radius: 0 0 4px 4px; padding: 20px 15px; }
+.skel-form-row          { gap: 15px; padding: 9px 0; }
+.skel-form-label        { width: 18%; min-width: 100px; }
+.skel-form-input        { height: 32px; }
+.skel-form-footer       { display: flex; justify-content: flex-end; gap: 10px; padding-top: 15px; }
+.skel-form-btn          { height: 34px; width: 100px; }
+
+/* ----- Workflows -------------------------------------------------------- */
+.skel-workflow-card     { border: 1px solid var(--skel-border); border-radius: 4px; margin-bottom: 8px; overflow: hidden; }
+.skel-workflow-header   { display: flex; align-items: center; height: 48px; padding: 0 15px; background: var(--skel-section); }
+
+/* ----- Plugins ---------------------------------------------------------- */
+.skel-plugins-wrap      { display: flex; gap: 0; min-height: 400px; }
+.skel-plugins-nav       { width: 165px; flex-shrink: 0; border-right: 1px solid var(--skel-border); padding: 8px 0; }
+.skel-plugins-nav-item  { display: flex; align-items: center; padding: 9px 15px; border-bottom: 1px solid var(--skel-border); }
+.skel-plugins-nav-item:last-child { border-bottom: none; }
+.skel-plugins-body      { flex: 1; padding: 0; }
+
+/* ----- Systeminfo tabs -------------------------------------------------- */
+.skel-info-tab          { padding: 15px; min-height: 360px; }
+
+/* ===== /Loading Skeleton ===== */
 
-.skel-cell-input {
-    flex: 1;
-    height: 32px;
-}
-/* ===== /Settings Page Loading Skeleton ===== */

front/deviceDetails.php

@@ -21,11 +21,12 @@
 </script>
 
 <!-- Page ------------------------------------------------------------------ -->
-  <div class="content-wrapper">
+  <div class="content-wrapper" id="deviceDetailsPage">
+
+    <?php require 'php/templates/skel_device_details.php'; ?>
 
 <!-- Content header--------------------------------------------------------- -->
     <section class="content-header">
-      <?php require 'php/templates/modals.php'; ?>
 
       <h1 id="pageTitle">
         &nbsp<small>Quering device info...</small>
@@ -597,7 +598,22 @@ window.onload = function() {
     updateChevrons(mac);
     await renderSmallBoxes();
     main();
+    hideDeviceDetailsSkeleton();
   });
+
+// -----------------------------------------------------------------------------
+function hideDeviceDetailsSkeleton() {
+  $('#device-details-skeleton').fadeOut(250, function() { $(this).remove(); });
+}
+
+// Fallback: remove main skeleton and all tab pane skeletons if init stalls
+setTimeout(function() {
+  hideDeviceDetailsSkeleton();
+  if (typeof hideDetailsTabSkeleton  === 'function') hideDetailsTabSkeleton();
+  if (typeof hideSessionsTabSkeleton === 'function') hideSessionsTabSkeleton();
+  if (typeof hidePresenceTabSkeleton === 'function') hidePresenceTabSkeleton();
+  if (typeof hideEventsTabSkeleton   === 'function') hideEventsTabSkeleton();
+}, 15000);
 }
 
 </script>

front/deviceDetailsEdit.php

@@ -3,6 +3,7 @@
 // check if authenticated
 require_once $_SERVER["DOCUMENT_ROOT"] . "/php/templates/security.php"; ?>
 
+<?php require $_SERVER['DOCUMENT_ROOT'] . '/php/templates/skel_tab_details.php'; ?>
 
 <div class="row" id="deviceDetailsEdit">
   <div class="box-body form-horizontal">
@@ -375,6 +376,7 @@ function getDeviceData() {
             initHoverNodeInfo();
 
             hideSpinner();
+            hideDetailsTabSkeleton();
 
           }}); // $.get callback
       }, 100); // setTimeout
@@ -665,4 +667,9 @@ function toggleFieldLock(mac, fieldName) {
   });
 }
 
+// -----------------------------------------------------------------------------
+function hideDetailsTabSkeleton() {
+  $('#skel-tab-details').fadeOut(250, function() { $(this).remove(); });
+}
+
 </script>

front/deviceDetailsEvents.php

@@ -5,6 +5,7 @@
 ?>
 <!-- ----------------------------------------------------------------------- -->
 
+<?php require $_SERVER['DOCUMENT_ROOT'] . '/php/templates/skel_tab_events.php'; ?>
 
 <!-- Hide Connections -->
 <div class="col-sm-12 col-xs-12">
@@ -103,10 +104,12 @@ function loadEventsData() {
       table.draw();
 
       hideSpinner();
+      hideEventsTabSkeleton();
     },
     error: function (xhr) {
       console.error("Failed to load events", xhr.responseText);
       hideSpinner();
+      hideEventsTabSkeleton();
     }
   });
 }
@@ -198,5 +201,9 @@ function deviceEventsPageUpdater() {
 
 deviceEventsPageUpdater();
 
+// -----------------------------------------------------------------------------
+function hideEventsTabSkeleton() {
+  $('#skel-tab-events').fadeOut(250, function() { $(this).remove(); });
+}
 
 </script>

front/deviceDetailsPresence.php

@@ -5,8 +5,11 @@
 ?>
 
 <!-- fullCalendar -->
+ <?php require $_SERVER['DOCUMENT_ROOT'] . '/php/templates/skel_tab_presence.php'; ?>
 
 <link rel="stylesheet" href="lib/fullcalendar/fullcalendar.min.css">
+
+<!-- fullCalendar -->
   <link rel="stylesheet" href="lib/fullcalendar/fullcalendar.print.min.css" media="print">
   <script src="lib/moment/moment.js"></script>
   <script src="lib/fullcalendar/fullcalendar.min.js"></script>
@@ -63,6 +66,7 @@
             console.warn("Presence calendar API error:", response);
             callback([]);
           }
+          hidePresenceTabSkeleton();
         },
         error: function(xhr) {
           console.error(
@@ -71,6 +75,7 @@
             xhr.responseText
           );
           callback([]);
+          hidePresenceTabSkeleton();
         }
       });
     });
@@ -205,6 +210,10 @@ function devicePresencePageUpdater() {
 
 devicePresencePageUpdater();
 
+// -----------------------------------------------------------------------------
+function hidePresenceTabSkeleton() {
+  $('#skel-tab-presence').fadeOut(250, function() { $(this).remove(); });
+}
 
 
 </script>

front/deviceDetailsSessions.php

@@ -6,6 +6,7 @@
 
 <!-- ----------------------------------------------------------------------- -->
 
+<?php require $_SERVER['DOCUMENT_ROOT'] . '/php/templates/skel_tab_sessions.php'; ?>
 
 <!-- Datatable Session -->
 <table id="tableSessions" class="table table-bordered table-hover table-striped ">
@@ -130,10 +131,12 @@ function loadSessionsData() {
 
       table.draw();
       hideSpinner();
+      hideSessionsTabSkeleton();
     },
     error: function (xhr, status, err) {
       console.error("Failed to load sessions:", err, xhr.responseText);
       hideSpinner();
+      hideSessionsTabSkeleton();
     }
   });
 }
@@ -174,4 +177,9 @@ function deviceSessionsPageUpdater() {
 // start updater
 deviceSessionsPageUpdater();
 
+// -----------------------------------------------------------------------------
+function hideSessionsTabSkeleton() {
+  $('#skel-tab-sessions').fadeOut(250, function() { $(this).remove(); });
+}
+
 </script>

front/devices.php

@@ -37,7 +37,9 @@
 
 
 <!-- Page ------------------------------------------------------------------ -->
-  <div class="content-wrapper">
+  <div class="content-wrapper" id="devicesPage">
+
+    <?php require 'php/templates/skel_devices.php'; ?>
 
 <!-- Main content ---------------------------------------------------------- -->
     <section class="content">
@@ -181,6 +183,14 @@
   callAfterAppInitialized(main)
   showSpinner();
 
+// -----------------------------------------------------------------------------
+function hideDevicesSkeleton() {
+  $('#devices-skeleton').fadeOut(250, function() { $(this).remove(); });
+}
+
+// Fallback: ensure skeleton is removed even if DataTable fails to initialize
+setTimeout(hideDevicesSkeleton, 15000);
+
 // -----------------------------------------------------------------------------
 function main () {
 
@@ -1123,6 +1133,7 @@ function initializeDatatable (status) {
 
           initHoverNodeInfo();
           hideSpinner();
+          hideDevicesSkeleton();
 
     },
     createdRow: function(row, data, dataIndex) {

front/events.php

@@ -6,7 +6,8 @@ require 'php/templates/header.php';
   showSpinner(); // Show initial page loading spinner
 </script>
 
-<div class="content-wrapper eventsPage">
+<div class="content-wrapper eventsPage" id="eventsPage">
+<?php require 'php/templates/skel_events.php'; ?>
   <section class="content">
 
     <!-- ---------------- Top small boxes (Event shortcuts) ---------------- -->
@@ -154,11 +155,13 @@ function initializeDatatable() {
             recordsFiltered: response.recordsFiltered || 0
           });
           hideSpinner();
+          hideEventsSkeleton();
         },
         error: function (xhr, status, error) {
           console.error("Error fetching session events:", status, error, xhr.responseText);
           callback({ data: [], recordsTotal: 0, recordsFiltered: 0 });
           hideSpinner();
+          hideEventsSkeleton();
         }
       });
     },
@@ -253,4 +256,12 @@ function getEvents(type) {
   showSpinner();
   table.ajax.reload(null, true); // reset to page 1
 }
+
+function hideEventsSkeleton() {
+  $('#events-skeleton').fadeOut(250, function () { $(this).remove(); });
+}
+
+window.onload = function () {
+  setTimeout(hideEventsSkeleton, 15000);
+};
 </script>

front/maintenance.php

@@ -1,6 +1,5 @@
 <?php
   require 'php/templates/header.php';
-  require 'php/templates/modals.php';
 ?>
 
 <!-- Page ------------------------------------------------------------------ -->
@@ -146,6 +145,7 @@ $db->close();
       </ul>
     <div class="tab-content spinnerTarget">
         <div class="tab-pane active" id="tab_DBTools">
+                <?php require 'php/templates/skel_tab_maint_dbtools.php'; ?>
                 <div class="db_info_table">
                     <div class="db_info_table_row">
                         <div class="db_tools_table_cell_a" >
@@ -200,6 +200,7 @@ $db->close();
 
         <!-- ---------------------------Backup restore -------------------------------------------- -->
         <div class="tab-pane" id="tab_BackupRestore">
+          <?php require 'php/templates/skel_tab_maint_backup.php'; ?>
           <div class="db_info_table">
             <div class="db_info_table_row">
               <div class="db_tools_table_cell_a" >
@@ -241,6 +242,7 @@ $db->close();
         </div>
         <!-- ---------------------------Logging-------------------------------------------- -->
         <div class="tab-pane" id="tab_Logging">
+          <?php require 'php/templates/skel_tab_maint_logging.php'; ?>
           <div class="container">
             <div class="row actions">
               <div class="col-sm-2">
@@ -273,6 +275,7 @@ $db->close();
 
         <!-- ---------------------------Bulk edit -------------------------------------------- -->
         <div class="tab-pane" id="tab_multiEdit">
+            <?php require 'php/templates/skel_tab_maint_multiedit.php'; ?>
             <div class="db_info_table">
                 <div class="box box-solid">
                     <?php
@@ -785,7 +788,9 @@ function initializeTabs() {
     idSuffix:    '_id',
     delay:       50
   });
-  setTimeout(() => hideSpinner(), 50);
+  setTimeout(() => {
+    hideSpinner();
+  }, 50);
 }
 
 //------------------------------------------------------------------------------
@@ -836,6 +841,7 @@ function renderLogs(customData) {
       // data: { items: JSON.stringify(customData) }, // Send customData as JSON
       success: function(response) {
         $('#logsPlc').html(response); // Replace container content with fetched HTML
+        hideMaintLoggingSkeleton();
 
         applyFilter();
 
@@ -847,6 +853,7 @@ function renderLogs(customData) {
       },
       error: function(xhr, status, error) {
         console.error('Error fetching infoboxes:', error);
+        hideMaintLoggingSkeleton();
       }
     });
   }
@@ -870,6 +877,23 @@ window.onload = function asyncFooter() {
 
 </script>
 
+<script>
+  function hideMaintDBToolsSkeleton()   { $('#skel-tab-maint-dbtools').fadeOut(250, function() { $(this).remove(); }); }
+  function hideMaintBackupSkeleton()    { $('#skel-tab-maint-backup').fadeOut(250, function() { $(this).remove(); }); }
+  function hideMaintLoggingSkeleton()   { $('#skel-tab-maint-logging').fadeOut(250, function() { $(this).remove(); }); }
+  function hideMaintMultiEditSkeleton() { $('#skel-tab-maint-multiedit').fadeOut(250, function() { $(this).remove(); }); }
+
+  // Static tabs: content is PHP-rendered — dismiss immediately, no waiting for onload
+  hideMaintDBToolsSkeleton();
+  hideMaintBackupSkeleton();
+  hideMaintMultiEditSkeleton();
+
+  // Logging tab: AJAX-driven — fallback timeout only
+  window.addEventListener('load', function() {
+    setTimeout(hideMaintLoggingSkeleton, 15000);
+  });
+</script>
+
 <script>
   hideSpinner();
 </script>

front/network.php

@@ -1,6 +1,5 @@
 <?php
   require 'php/templates/header.php';
-  require 'php/templates/modals.php';
 ?>
 
 <!-- Page ------------------------------------------------------------------ -->

front/php/templates/footer.php

@@ -43,6 +43,9 @@
 </div>
 <!-- ./wrapper -->
 
+<!-- Modals — placed outside .wrapper so position:fixed modals are in the root stacking context -->
+<?php require 'php/templates/modals.php'; ?>
+
 <!-- jQuery UI -->
 <script src="lib/jquery-ui/jquery-ui.min.js"></script>
 

front/php/templates/migrationCheck.php

@@ -1,6 +1,4 @@
 <?php 
-
-  require 'php/templates/modals.php'; 
   //------------------------------------------------------------------------------
   // check if authenticated
   require_once  $_SERVER['DOCUMENT_ROOT'] . '/php/templates/security.php';

front/php/templates/skel_device_details.php

@@ -0,0 +1,67 @@
+<!-- Device Details Loading Skeleton ======================================= -->
+<div id="device-details-skeleton">
+
+  <!-- Content header area -------------------------------------------------- -->
+  <div class="skel-detail-header">
+    <div class="skel-detail-title skel-shimmer"></div>
+    <div class="skel-detail-info-panel">
+      <div class="skel-shimmer" style="width:76px; height:76px; border-radius:4px; flex-shrink:0;"></div>
+      <div style="flex:1; display:flex; flex-direction:column; gap:9px; padding:10px 0 10px 10px;">
+        <span class="skel-line skel-shimmer" style="width:55%"></span>
+        <span class="skel-line skel-shimmer" style="width:38%"></span>
+        <span class="skel-line skel-shimmer" style="width:45%"></span>
+      </div>
+    </div>
+  </div>
+
+  <!-- Top stat tiles -------------------------------------------------------- -->
+  <div class="row">
+    <div class="col-lg-3 col-sm-6 col-xs-6 padding-5px">
+      <div class="skel-tile">
+        <div class="skel-tile-inner">
+          <div class="skel-tile-num skel-shimmer"></div>
+          <div class="skel-tile-label skel-shimmer"></div>
+        </div>
+        <div class="skel-tile-icon-area">
+          <div class="skel-tile-icon-shape skel-shimmer"></div>
+        </div>
+      </div>
+    </div>
+    <div class="col-lg-3 col-sm-6 col-xs-6 padding-5px">
+      <div class="skel-tile">
+        <div class="skel-tile-inner">
+          <div class="skel-tile-num skel-shimmer"></div>
+          <div class="skel-tile-label skel-shimmer"></div>
+        </div>
+        <div class="skel-tile-icon-area">
+          <div class="skel-tile-icon-shape skel-shimmer"></div>
+        </div>
+      </div>
+    </div>
+    <div class="col-lg-3 col-sm-6 col-xs-6 padding-5px">
+      <div class="skel-tile">
+        <div class="skel-tile-inner">
+          <div class="skel-tile-num skel-shimmer"></div>
+          <div class="skel-tile-label skel-shimmer"></div>
+        </div>
+        <div class="skel-tile-icon-area">
+          <div class="skel-tile-icon-shape skel-shimmer"></div>
+        </div>
+      </div>
+    </div>
+    <div class="col-lg-3 col-sm-6 col-xs-6 padding-5px">
+      <div class="skel-tile">
+        <div class="skel-tile-inner">
+          <div class="skel-tile-num skel-shimmer"></div>
+          <div class="skel-tile-label skel-shimmer"></div>
+        </div>
+        <div class="skel-tile-icon-area">
+          <div class="skel-tile-icon-shape skel-shimmer"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+
+</div>
+<!-- /Device Details Loading Skeleton ====================================== -->

front/php/templates/skel_devices.php

@@ -0,0 +1,301 @@
+<!-- Devices Loading Skeleton ============================================== -->
+<div id="devices-skeleton">
+
+  <!-- Tile cards row -------------------------------------------------------- -->
+  <div class="row">
+    <div class="col-lg-2 col-sm-4 col-xs-6 padding-5px">
+      <div class="skel-tile">
+        <div class="skel-tile-inner">
+          <div class="skel-tile-num skel-shimmer"></div>
+          <div class="skel-tile-label skel-shimmer"></div>
+        </div>
+        <div class="skel-tile-icon-area">
+          <div class="skel-tile-icon-shape skel-shimmer"></div>
+        </div>
+      </div>
+    </div>
+    <div class="col-lg-2 col-sm-4 col-xs-6 padding-5px">
+      <div class="skel-tile">
+        <div class="skel-tile-inner">
+          <div class="skel-tile-num skel-shimmer"></div>
+          <div class="skel-tile-label skel-shimmer"></div>
+        </div>
+        <div class="skel-tile-icon-area">
+          <div class="skel-tile-icon-shape skel-shimmer"></div>
+        </div>
+      </div>
+    </div>
+    <div class="col-lg-2 col-sm-4 col-xs-6 padding-5px">
+      <div class="skel-tile">
+        <div class="skel-tile-inner">
+          <div class="skel-tile-num skel-shimmer"></div>
+          <div class="skel-tile-label skel-shimmer"></div>
+        </div>
+        <div class="skel-tile-icon-area">
+          <div class="skel-tile-icon-shape skel-shimmer"></div>
+        </div>
+      </div>
+    </div>
+    <div class="col-lg-2 col-sm-4 col-xs-6 padding-5px">
+      <div class="skel-tile">
+        <div class="skel-tile-inner">
+          <div class="skel-tile-num skel-shimmer"></div>
+          <div class="skel-tile-label skel-shimmer"></div>
+        </div>
+        <div class="skel-tile-icon-area">
+          <div class="skel-tile-icon-shape skel-shimmer"></div>
+        </div>
+      </div>
+    </div>
+    <div class="col-lg-2 col-sm-4 col-xs-6 padding-5px">
+      <div class="skel-tile">
+        <div class="skel-tile-inner">
+          <div class="skel-tile-num skel-shimmer"></div>
+          <div class="skel-tile-label skel-shimmer"></div>
+        </div>
+        <div class="skel-tile-icon-area">
+          <div class="skel-tile-icon-shape skel-shimmer"></div>
+        </div>
+      </div>
+    </div>
+    <div class="col-lg-2 col-sm-4 col-xs-6 padding-5px">
+      <div class="skel-tile">
+        <div class="skel-tile-inner">
+          <div class="skel-tile-num skel-shimmer"></div>
+          <div class="skel-tile-label skel-shimmer"></div>
+        </div>
+        <div class="skel-tile-icon-area">
+          <div class="skel-tile-icon-shape skel-shimmer"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- /Tile cards row ------------------------------------------------------- -->
+
+  <!-- Chart section --------------------------------------------------------- -->
+  <div class="row">
+    <div class="col-xs-12">
+      <div class="skel-chart-box">
+        <div class="skel-box-header">
+          <span class="skel-line skel-shimmer" style="width:220px"></span>
+          <span class="skel-line skel-shimmer" style="width:80px; margin-left:auto"></span>
+        </div>
+        <div class="skel-chart-body skel-shimmer"></div>
+      </div>
+    </div>
+  </div>
+  <!-- /Chart section -------------------------------------------------------- -->
+
+  <!-- Table section --------------------------------------------------------- -->
+  <div class="row">
+    <div class="col-xs-12">
+      <div class="skel-table-box">
+
+        <!-- Box header -->
+        <div class="skel-box-header">
+          <span class="skel-line skel-shimmer" style="width:180px"></span>
+          <span class="skel-line skel-shimmer" style="width:110px; margin-left:auto"></span>
+        </div>
+
+        <!-- Column headers -->
+        <div class="skel-table-header-row">
+          <span class="skel-th skel-shimmer" style="flex:0.5"></span>
+          <span class="skel-th skel-shimmer" style="flex:1.5"></span>
+          <span class="skel-th skel-shimmer" style="flex:2"></span>
+          <span class="skel-th skel-shimmer" style="flex:1.5"></span>
+          <span class="skel-th skel-shimmer" style="flex:1.5"></span>
+          <span class="skel-th skel-shimmer" style="flex:1"></span>
+        </div>
+
+        <!-- Data rows -->
+        <div class="skel-tr">
+          <span class="skel-td skel-shimmer" style="flex:0.5"></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+        </div>
+        <div class="skel-tr">
+          <span class="skel-td skel-shimmer" style="flex:0.5"></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+        </div>
+        <div class="skel-tr">
+          <span class="skel-td skel-shimmer" style="flex:0.5"></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+        </div>
+        <div class="skel-tr">
+          <span class="skel-td skel-shimmer" style="flex:0.5"></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+        </div>
+        <div class="skel-tr">
+          <span class="skel-td skel-shimmer" style="flex:0.5"></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+        </div>
+        <div class="skel-tr">
+          <span class="skel-td skel-shimmer" style="flex:0.5"></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+        </div>
+        <div class="skel-tr">
+          <span class="skel-td skel-shimmer" style="flex:0.5"></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+        </div>
+        <div class="skel-tr">
+          <span class="skel-td skel-shimmer" style="flex:0.5"></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+        </div>
+        <div class="skel-tr">
+          <span class="skel-td skel-shimmer" style="flex:0.5"></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+        </div>
+        <div class="skel-tr">
+          <span class="skel-td skel-shimmer" style="flex:0.5"></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+        </div>
+        <div class="skel-tr">
+          <span class="skel-td skel-shimmer" style="flex:0.5"></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+        </div>
+        <div class="skel-tr">
+          <span class="skel-td skel-shimmer" style="flex:0.5"></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+        </div>
+        <div class="skel-tr">
+          <span class="skel-td skel-shimmer" style="flex:0.5"></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+        </div>
+        <div class="skel-tr">
+          <span class="skel-td skel-shimmer" style="flex:0.5"></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+        </div>
+        <div class="skel-tr">
+          <span class="skel-td skel-shimmer" style="flex:0.5"></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+        </div>
+                <div class="skel-tr">
+          <span class="skel-td skel-shimmer" style="flex:0.5"></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+        </div>
+        <div class="skel-tr">
+          <span class="skel-td skel-shimmer" style="flex:0.5"></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+        </div>
+        <div class="skel-tr">
+          <span class="skel-td skel-shimmer" style="flex:0.5"></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+        </div>
+        <div class="skel-tr">
+          <span class="skel-td skel-shimmer" style="flex:0.5"></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+        </div>
+        <div class="skel-tr">
+          <span class="skel-td skel-shimmer" style="flex:0.5"></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+        </div>
+        <div class="skel-tr">
+          <span class="skel-td skel-shimmer" style="flex:0.5"></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+        </div>
+        <div class="skel-tr">
+          <span class="skel-td skel-shimmer" style="flex:0.5"></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+        </div>
+        <div class="skel-tr">
+          <span class="skel-td skel-shimmer" style="flex:0.5"></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+          <span class="skel-td skel-shimmer" ></span>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- /Table section -------------------------------------------------------- -->
+
+</div>
+<!-- /Devices Loading Skeleton ============================================= -->

front/php/templates/skel_events.php

@@ -0,0 +1,44 @@
+<div id="events-skeleton">
+
+  <!-- 6 stat tiles -->
+  <div class="row">
+    <?php for ($i = 0; $i < 6; $i++): ?>
+    <div class="col-lg-2 col-sm-4 col-xs-6">
+      <div class="skel-tile">
+        <div class="skel-tile-inner">
+          <span class="skel-tile-num   skel-shimmer"></span>
+          <span class="skel-tile-label skel-shimmer"></span>
+        </div>
+        <div class="skel-tile-icon-area">
+          <span class="skel-tile-icon-shape skel-shimmer"></span>
+        </div>
+      </div>
+    </div>
+    <?php endfor; ?>
+  </div>
+
+  <!-- events table -->
+  <div class="row" style="margin-top:12px">
+    <div class="col-xs-12">
+      <div class="skel-table-box">
+        <div class="skel-box-header">
+          <span class="skel-line skel-shimmer" style="width:120px"></span>
+          <span class="skel-line skel-shimmer" style="width:90px; margin-left:auto;"></span>
+        </div>
+        <div class="skel-table-header-row">
+          <?php for ($i = 0; $i < 6; $i++): ?>
+          <span class="skel-th skel-shimmer"></span>
+          <?php endfor; ?>
+        </div>
+        <?php for ($i = 0; $i < 8; $i++): ?>
+        <div class="skel-tr">
+          <?php for ($j = 0; $j < 6; $j++): ?>
+          <span class="skel-td skel-shimmer"></span>
+          <?php endfor; ?>
+        </div>
+        <?php endfor; ?>
+      </div>
+    </div>
+  </div>
+
+</div>

front/php/templates/skel_notifications.php

@@ -0,0 +1,19 @@
+<div id="notifications-skeleton">
+  <div class="skel-table-box">
+    <div class="skel-box-header">
+      <span class="skel-line skel-shimmer" style="width:200px"></span>
+    </div>
+    <div class="skel-table-header-row">
+      <?php for ($i = 0; $i < 4; $i++): ?>
+      <span class="skel-th skel-shimmer"></span>
+      <?php endfor; ?>
+    </div>
+    <?php for ($i = 0; $i < 8; $i++): ?>
+    <div class="skel-tr">
+      <?php for ($j = 0; $j < 4; $j++): ?>
+      <span class="skel-td skel-shimmer"></span>
+      <?php endfor; ?>
+    </div>
+    <?php endfor; ?>
+  </div>
+</div>

front/php/templates/skel_plugins.php

@@ -0,0 +1,42 @@
+<div id="plugins-skeleton">
+  <div class="skel-plugins-wrap">
+
+    <!-- Left nav sidebar -->
+    <div class="skel-plugins-nav">
+      <?php
+        $widths = [72, 60, 80, 55, 68, 75];
+        for ($i = 0; $i < 6; $i++):
+      ?>
+      <div class="skel-plugins-nav-item">
+        <span class="skel-line skel-shimmer" style="width:<?= $widths[$i] ?>%"></span>
+      </div>
+      <?php endfor; ?>
+    </div>
+
+    <!-- Right content area -->
+    <div class="skel-plugins-body">
+      <!-- Sub-tab bar -->
+      <div class="skel-tabs-bar" style="border-radius: 0 4px 0 0; margin-bottom: 0;">
+        <span class="skel-tab skel-shimmer"></span>
+        <span class="skel-tab skel-shimmer"></span>
+        <span class="skel-tab skel-shimmer"></span>
+      </div>
+      <!-- Data table -->
+      <div class="skel-table-box" style="border-top: none; border-radius: 0 0 4px 4px;">
+        <div class="skel-table-header-row">
+          <?php for ($j = 0; $j < 5; $j++): ?>
+          <span class="skel-th skel-shimmer"></span>
+          <?php endfor; ?>
+        </div>
+        <?php for ($i = 0; $i < 8; $i++): ?>
+        <div class="skel-tr">
+          <?php for ($j = 0; $j < 5; $j++): ?>
+          <span class="skel-td skel-shimmer"></span>
+          <?php endfor; ?>
+        </div>
+        <?php endfor; ?>
+      </div>
+    </div>
+
+  </div>
+</div>

front/php/templates/skel_presence.php

@@ -0,0 +1,45 @@
+<div id="presence-skeleton">
+
+  <!-- 6 stat tiles -->
+  <div class="row">
+    <?php for ($i = 0; $i < 6; $i++): ?>
+    <div class="col-lg-2 col-sm-4 col-xs-6">
+      <div class="skel-tile">
+        <div class="skel-tile-inner">
+          <span class="skel-tile-num   skel-shimmer"></span>
+          <span class="skel-tile-label skel-shimmer"></span>
+        </div>
+        <div class="skel-tile-icon-area">
+          <span class="skel-tile-icon-shape skel-shimmer"></span>
+        </div>
+      </div>
+    </div>
+    <?php endfor; ?>
+  </div>
+
+  <!-- activity chart -->
+  <div class="row" style="margin-top:12px">
+    <div class="col-md-12">
+      <div class="skel-chart-box">
+        <div class="skel-box-header">
+          <span class="skel-line skel-shimmer" style="width:160px"></span>
+        </div>
+        <div class="skel-chart-body skel-shimmer" style="height:160px"></div>
+      </div>
+    </div>
+  </div>
+
+  <!-- presence calendar -->
+  <div class="row">
+    <div class="col-md-12">
+      <div class="skel-chart-box">
+        <div class="skel-box-header">
+          <span class="skel-line skel-shimmer" style="width:100px"></span>
+          <span class="skel-line skel-shimmer" style="width:180px; margin-left:auto;"></span>
+        </div>
+        <div class="skel-chart-body skel-shimmer" style="height:380px"></div>
+      </div>
+    </div>
+  </div>
+
+</div>

front/php/templates/skel_report.php

@@ -0,0 +1,23 @@
+<div id="report-skeleton">
+  <div class="skel-table-box">
+    <div class="skel-box-header">
+      <span class="skel-line skel-shimmer" style="width:160px"></span>
+    </div>
+
+    <!-- nav controls + format select -->
+    <div style="display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:12px 15px; border-bottom:1px solid var(--skel-border);">
+      <span class="skel-shimmer" style="height:32px; width:34px; border-radius:4px;"></span>
+      <span class="skel-shimmer" style="height:14px; width:40px;"></span>
+      <span class="skel-shimmer" style="height:32px; width:34px; border-radius:4px;"></span>
+      <span class="skel-shimmer" style="height:32px; width:80px; border-radius:4px;"></span>
+      <span class="skel-shimmer" style="height:14px; width:160px;"></span>
+    </div>
+
+    <!-- report body shimmer lines -->
+    <div style="padding:20px 15px; display:flex; flex-direction:column; gap:10px;">
+      <?php foreach ([90, 75, 85, 60, 80, 70, 65, 88] as $w): ?>
+      <span class="skel-shimmer" style="height:16px; width:<?= $w ?>%;"></span>
+      <?php endforeach; ?>
+    </div>
+  </div>
+</div>

front/php/templates/skel_tab_details.php

@@ -0,0 +1,42 @@
+<!-- Details Tab Skeleton ================================================== -->
+<div id="skel-tab-details" class="skel-tab-pane">
+  <div class="skel-detail-form">
+    <div class="skel-form-row">
+      <span class="skel-form-label skel-shimmer"></span>
+      <span class="skel-form-input skel-shimmer" style="max-width:340px"></span>
+    </div>
+    <div class="skel-form-row">
+      <span class="skel-form-label skel-shimmer"></span>
+      <span class="skel-form-input skel-shimmer" style="max-width:260px"></span>
+    </div>
+    <div class="skel-form-row">
+      <span class="skel-form-label skel-shimmer"></span>
+      <span class="skel-form-input skel-shimmer" style="max-width:400px"></span>
+    </div>
+    <div class="skel-form-row">
+      <span class="skel-form-label skel-shimmer"></span>
+      <span class="skel-form-input skel-shimmer" style="max-width:300px"></span>
+    </div>
+    <div class="skel-form-row">
+      <span class="skel-form-label skel-shimmer"></span>
+      <span class="skel-form-input skel-shimmer" style="max-width:220px"></span>
+    </div>
+    <div class="skel-form-row">
+      <span class="skel-form-label skel-shimmer"></span>
+      <span class="skel-form-input skel-shimmer" style="max-width:380px"></span>
+    </div>
+    <div class="skel-form-row">
+      <span class="skel-form-label skel-shimmer"></span>
+      <span class="skel-form-input skel-shimmer" style="max-width:280px"></span>
+    </div>
+    <div class="skel-form-row">
+      <span class="skel-form-label skel-shimmer"></span>
+      <span class="skel-form-input skel-shimmer" style="max-width:320px"></span>
+    </div>
+    <div class="skel-form-footer">
+      <span class="skel-form-btn skel-shimmer"></span>
+      <span class="skel-form-btn skel-shimmer"></span>
+    </div>
+  </div>
+</div>
+<!-- /Details Tab Skeleton ================================================= -->

front/php/templates/skel_tab_events.php

@@ -0,0 +1,75 @@
+<!-- Events Tab Skeleton =================================================== -->
+<div id="skel-tab-events" class="skel-tab-pane">
+  <!-- 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>
+    <span class="skel-line skel-shimmer" style="width:220px"></span>
+  </div>
+  <!-- Table -->
+  <div class="skel-table-box">
+    <div class="skel-table-header-row">
+      <span class="skel-th skel-shimmer" style="flex:1.5"></span>
+      <span class="skel-th skel-shimmer" style="flex:1.5"></span>
+      <span class="skel-th skel-shimmer" style="flex:2"></span>
+      <span class="skel-th skel-shimmer" style="flex:1.5"></span>
+      <span class="skel-th skel-shimmer" style="flex:2"></span>
+    </div>
+    <div class="skel-tr">
+      <span class="skel-td skel-shimmer" style="flex:1.5; max-width:15%"></span>
+      <span class="skel-td skel-shimmer" style="flex:1.5; max-width:14%"></span>
+      <span class="skel-td skel-shimmer" style="flex:2; max-width:18%"></span>
+      <span class="skel-td skel-shimmer" style="flex:1.5; max-width:12%"></span>
+      <span class="skel-td skel-shimmer" style="flex:2; max-width:20%"></span>
+    </div>
+    <div class="skel-tr">
+      <span class="skel-td skel-shimmer" style="flex:1.5; max-width:13%"></span>
+      <span class="skel-td skel-shimmer" style="flex:1.5; max-width:16%"></span>
+      <span class="skel-td skel-shimmer" style="flex:2; max-width:22%"></span>
+      <span class="skel-td skel-shimmer" style="flex:1.5; max-width:11%"></span>
+      <span class="skel-td skel-shimmer" style="flex:2; max-width:16%"></span>
+    </div>
+    <div class="skel-tr">
+      <span class="skel-td skel-shimmer" style="flex:1.5; max-width:16%"></span>
+      <span class="skel-td skel-shimmer" style="flex:1.5; max-width:13%"></span>
+      <span class="skel-td skel-shimmer" style="flex:2; max-width:19%"></span>
+      <span class="skel-td skel-shimmer" style="flex:1.5; max-width:14%"></span>
+      <span class="skel-td skel-shimmer" style="flex:2; max-width:18%"></span>
+    </div>
+    <div class="skel-tr">
+      <span class="skel-td skel-shimmer" style="flex:1.5; max-width:14%"></span>
+      <span class="skel-td skel-shimmer" style="flex:1.5; max-width:15%"></span>
+      <span class="skel-td skel-shimmer" style="flex:2; max-width:20%"></span>
+      <span class="skel-td skel-shimmer" style="flex:1.5; max-width:13%"></span>
+      <span class="skel-td skel-shimmer" style="flex:2; max-width:22%"></span>
+    </div>
+    <div class="skel-tr">
+      <span class="skel-td skel-shimmer" style="flex:1.5; max-width:12%"></span>
+      <span class="skel-td skel-shimmer" style="flex:1.5; max-width:17%"></span>
+      <span class="skel-td skel-shimmer" style="flex:2; max-width:17%"></span>
+      <span class="skel-td skel-shimmer" style="flex:1.5; max-width:10%"></span>
+      <span class="skel-td skel-shimmer" style="flex:2; max-width:24%"></span>
+    </div>
+    <div class="skel-tr">
+      <span class="skel-td skel-shimmer" style="flex:1.5; max-width:15%"></span>
+      <span class="skel-td skel-shimmer" style="flex:1.5; max-width:12%"></span>
+      <span class="skel-td skel-shimmer" style="flex:2; max-width:21%"></span>
+      <span class="skel-td skel-shimmer" style="flex:1.5; max-width:15%"></span>
+      <span class="skel-td skel-shimmer" style="flex:2; max-width:19%"></span>
+    </div>
+    <div class="skel-tr">
+      <span class="skel-td skel-shimmer" style="flex:1.5; max-width:17%"></span>
+      <span class="skel-td skel-shimmer" style="flex:1.5; max-width:14%"></span>
+      <span class="skel-td skel-shimmer" style="flex:2; max-width:18%"></span>
+      <span class="skel-td skel-shimmer" style="flex:1.5; max-width:12%"></span>
+      <span class="skel-td skel-shimmer" style="flex:2; max-width:21%"></span>
+    </div>
+    <div class="skel-tr">
+      <span class="skel-td skel-shimmer" style="flex:1.5; max-width:13%"></span>
+      <span class="skel-td skel-shimmer" style="flex:1.5; max-width:16%"></span>
+      <span class="skel-td skel-shimmer" style="flex:2; max-width:23%"></span>
+      <span class="skel-td skel-shimmer" style="flex:1.5; max-width:11%"></span>
+      <span class="skel-td skel-shimmer" style="flex:2; max-width:17%"></span>
+    </div>
+  </div>
+</div>
+<!-- /Events Tab Skeleton ================================================== -->

front/php/templates/skel_tab_maint_backup.php

@@ -0,0 +1,11 @@
+<div class="skel-tab-pane" id="skel-tab-maint-backup">
+  <?php
+    $widths = [55, 60, 65, 50, 55, 70];
+    for ($i = 0; $i < 6; $i++):
+  ?>
+  <div class="skel-tr">
+    <span class="skel-shimmer" style="height:32px; width:185px; flex-shrink:0; border-radius:4px;"></span>
+    <span class="skel-line skel-shimmer" style="width:<?= $widths[$i] ?>%"></span>
+  </div>
+  <?php endfor; ?>
+</div>

front/php/templates/skel_tab_maint_dbtools.php

@@ -0,0 +1,11 @@
+<div class="skel-tab-pane" id="skel-tab-maint-dbtools">
+  <?php
+    $widths = [55, 70, 45, 62, 58, 50, 55, 48];
+    for ($i = 0; $i < 8; $i++):
+  ?>
+  <div class="skel-tr">
+    <span class="skel-shimmer" style="height:32px; width:185px; flex-shrink:0; border-radius:4px;"></span>
+    <span class="skel-line skel-shimmer" style="width:<?= $widths[$i] ?>%"></span>
+  </div>
+  <?php endfor; ?>
+</div>

front/php/templates/skel_tab_maint_logging.php

@@ -0,0 +1,10 @@
+<div class="skel-tab-pane" 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>
+    <span class="skel-line skel-shimmer" style="width:100px"></span>
+    <span class="skel-shimmer" style="height:32px; flex:1; border-radius:4px;"></span>
+  </div>
+  <!-- Log content area -->
+  <span class="skel-shimmer" style="display:block; width:100%; height:280px; border-radius:4px;"></span>
+</div>

front/php/templates/skel_tab_maint_multiedit.php

@@ -0,0 +1,8 @@
+<div class="skel-tab-pane" 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>
+    <span class="skel-form-input skel-shimmer"></span>
+  </div>
+  <?php endfor; ?>
+</div>

front/php/templates/skel_tab_presence.php

@@ -0,0 +1,12 @@
+<!-- Presence Tab Skeleton ================================================= -->
+<div id="skel-tab-presence" class="skel-tab-pane">
+  <div class="skel-chart-box">
+    <div class="skel-box-header">
+      <span class="skel-line skel-shimmer" style="width:80px"></span>
+      <span class="skel-line skel-shimmer" style="width:180px; margin:0 auto"></span>
+      <span class="skel-line skel-shimmer" style="width:80px; margin-left:auto"></span>
+    </div>
+    <div class="skel-chart-body skel-shimmer" style="height:380px"></div>
+  </div>
+</div>
+<!-- /Presence Tab Skeleton ================================================ -->

front/php/templates/skel_tab_sessions.php

@@ -0,0 +1,78 @@
+<!-- Sessions Tab Skeleton ================================================= -->
+<div id="skel-tab-sessions" class="skel-tab-pane">
+  <div class="skel-table-box">
+    <div class="skel-table-header-row">
+      <span class="skel-th skel-shimmer" style="flex:0.5"></span>
+      <span class="skel-th skel-shimmer" style="flex:1.5"></span>
+      <span class="skel-th skel-shimmer" style="flex:1.5"></span>
+      <span class="skel-th skel-shimmer" style="flex:1"></span>
+      <span class="skel-th skel-shimmer" style="flex:1"></span>
+      <span class="skel-th skel-shimmer" style="flex:2"></span>
+    </div>
+    <div class="skel-tr">
+      <span class="skel-td skel-shimmer" style="flex:0.5"></span>
+      <span class="skel-td skel-shimmer" style="flex:1.5; max-width:16%"></span>
+      <span class="skel-td skel-shimmer" style="flex:1.5; max-width:16%"></span>
+      <span class="skel-td skel-shimmer" style="flex:1; max-width:10%"></span>
+      <span class="skel-td skel-shimmer" style="flex:1; max-width:12%"></span>
+      <span class="skel-td skel-shimmer" style="flex:2; max-width:22%"></span>
+    </div>
+    <div class="skel-tr">
+      <span class="skel-td skel-shimmer" style="flex:0.5"></span>
+      <span class="skel-td skel-shimmer" style="flex:1.5; max-width:14%"></span>
+      <span class="skel-td skel-shimmer" style="flex:1.5; max-width:18%"></span>
+      <span class="skel-td skel-shimmer" style="flex:1; max-width:8%"></span>
+      <span class="skel-td skel-shimmer" style="flex:1; max-width:11%"></span>
+      <span class="skel-td skel-shimmer" style="flex:2; max-width:18%"></span>
+    </div>
+    <div class="skel-tr">
+      <span class="skel-td skel-shimmer" style="flex:0.5"></span>
+      <span class="skel-td skel-shimmer" style="flex:1.5; max-width:17%"></span>
+      <span class="skel-td skel-shimmer" style="flex:1.5; max-width:15%"></span>
+      <span class="skel-td skel-shimmer" style="flex:1; max-width:10%"></span>
+      <span class="skel-td skel-shimmer" style="flex:1; max-width:13%"></span>
+      <span class="skel-td skel-shimmer" style="flex:2; max-width:20%"></span>
+    </div>
+    <div class="skel-tr">
+      <span class="skel-td skel-shimmer" style="flex:0.5"></span>
+      <span class="skel-td skel-shimmer" style="flex:1.5; max-width:13%"></span>
+      <span class="skel-td skel-shimmer" style="flex:1.5; max-width:17%"></span>
+      <span class="skel-td skel-shimmer" style="flex:1; max-width:9%"></span>
+      <span class="skel-td skel-shimmer" style="flex:1; max-width:14%"></span>
+      <span class="skel-td skel-shimmer" style="flex:2; max-width:16%"></span>
+    </div>
+    <div class="skel-tr">
+      <span class="skel-td skel-shimmer" style="flex:0.5"></span>
+      <span class="skel-td skel-shimmer" style="flex:1.5; max-width:15%"></span>
+      <span class="skel-td skel-shimmer" style="flex:1.5; max-width:14%"></span>
+      <span class="skel-td skel-shimmer" style="flex:1; max-width:11%"></span>
+      <span class="skel-td skel-shimmer" style="flex:1; max-width:10%"></span>
+      <span class="skel-td skel-shimmer" style="flex:2; max-width:24%"></span>
+    </div>
+    <div class="skel-tr">
+      <span class="skel-td skel-shimmer" style="flex:0.5"></span>
+      <span class="skel-td skel-shimmer" style="flex:1.5; max-width:12%"></span>
+      <span class="skel-td skel-shimmer" style="flex:1.5; max-width:19%"></span>
+      <span class="skel-td skel-shimmer" style="flex:1; max-width:9%"></span>
+      <span class="skel-td skel-shimmer" style="flex:1; max-width:12%"></span>
+      <span class="skel-td skel-shimmer" style="flex:2; max-width:19%"></span>
+    </div>
+    <div class="skel-tr">
+      <span class="skel-td skel-shimmer" style="flex:0.5"></span>
+      <span class="skel-td skel-shimmer" style="flex:1.5; max-width:18%"></span>
+      <span class="skel-td skel-shimmer" style="flex:1.5; max-width:13%"></span>
+      <span class="skel-td skel-shimmer" style="flex:1; max-width:10%"></span>
+      <span class="skel-td skel-shimmer" style="flex:1; max-width:15%"></span>
+      <span class="skel-td skel-shimmer" style="flex:2; max-width:21%"></span>
+    </div>
+    <div class="skel-tr">
+      <span class="skel-td skel-shimmer" style="flex:0.5"></span>
+      <span class="skel-td skel-shimmer" style="flex:1.5; max-width:16%"></span>
+      <span class="skel-td skel-shimmer" style="flex:1.5; max-width:16%"></span>
+      <span class="skel-td skel-shimmer" style="flex:1; max-width:8%"></span>
+      <span class="skel-td skel-shimmer" style="flex:1; max-width:11%"></span>
+      <span class="skel-td skel-shimmer" style="flex:2; max-width:17%"></span>
+    </div>
+  </div>
+</div>
+<!-- /Sessions Tab Skeleton ================================================ -->

front/php/templates/skel_tab_sysinfo_initcheck.php

@@ -0,0 +1,12 @@
+<div class="skel-info-tab">
+  <!-- status banner -->
+  <div style="margin-bottom:16px">
+    <span class="skel-shimmer" style="height:44px; border-radius:4px; display:block;"></span>
+  </div>
+  <!-- card grid -->
+  <div style="display:flex; flex-wrap:wrap; gap:10px;">
+    <?php for ($i = 0; $i < 9; $i++): ?>
+    <span class="skel-shimmer" style="height:76px; width:190px; border-radius:4px;"></span>
+    <?php endfor; ?>
+  </div>
+</div>

front/php/templates/skel_tab_sysinfo_network.php

@@ -0,0 +1,8 @@
+<div class="skel-info-tab">
+  <?php for ($i = 0; $i < 10; $i++): ?>
+  <div class="skel-form-row">
+    <span class="skel-form-label skel-shimmer"></span>
+    <span class="skel-form-input skel-shimmer"></span>
+  </div>
+  <?php endfor; ?>
+</div>

front/php/templates/skel_tab_sysinfo_server.php

@@ -0,0 +1,8 @@
+<div class="skel-info-tab">
+  <?php for ($i = 0; $i < 14; $i++): ?>
+  <div class="skel-form-row">
+    <span class="skel-form-label skel-shimmer"></span>
+    <span class="skel-form-input skel-shimmer"></span>
+  </div>
+  <?php endfor; ?>
+</div>

front/php/templates/skel_tab_sysinfo_storage.php

@@ -0,0 +1,14 @@
+<div class="skel-info-tab">
+  <div class="skel-table-header-row">
+    <?php for ($i = 0; $i < 5; $i++): ?>
+    <span class="skel-th skel-shimmer"></span>
+    <?php endfor; ?>
+  </div>
+  <?php for ($i = 0; $i < 6; $i++): ?>
+  <div class="skel-tr">
+    <?php for ($j = 0; $j < 5; $j++): ?>
+    <span class="skel-td skel-shimmer"></span>
+    <?php endfor; ?>
+  </div>
+  <?php endfor; ?>
+</div>

front/php/templates/skel_workflows.php

@@ -0,0 +1,12 @@
+<div id="workflows-skeleton">
+  <?php for ($i = 0; $i < 3; $i++): ?>
+  <div class="skel-workflow-card">
+    <div class="skel-workflow-header">
+      <span class="skel-line skel-shimmer" style="width:<?= [220, 180, 200][$i] ?>px"></span>
+      <span class="skel-line skel-shimmer" style="width:55px; margin-left:auto;"></span>
+      <span class="skel-line skel-shimmer" style="width:55px; margin-left:auto;"></span>
+      <span class="skel-line skel-shimmer" style="width:55px; margin-left:auto;"></span>
+    </div>
+  </div>
+  <?php endfor; ?>
+</div>

front/plugins.php

@@ -1,12 +1,12 @@
 <?php
 
   require 'php/templates/header.php';  
-  require 'php/templates/modals.php'; 
 ?>
 
 <!-- Page ------------------------------------------------------------------ -->
-<div class="content-wrapper integrations-plugins">
+<div class="content-wrapper integrations-plugins" id="pluginsPage">
 
+<?php require 'php/templates/skel_plugins.php'; ?>
 <?php
   require 'pluginsCore.php';
 ?>

front/pluginsCore.php

@@ -516,6 +516,7 @@ function generateTabs() {
   if (visiblePlugins.length === 0) {
     $('#tabs-content-location').html(`<p class="text-muted" style="padding: 15px;">${getString('Gen_No_Data')}</p>`);
     hideSpinner();
+    hidePluginsSkeleton();
     return;
   }
 
@@ -534,6 +535,7 @@ function generateTabs() {
   }
 
   hideSpinner()
+  hidePluginsSkeleton()
 }
 
 function resetTabs() {
@@ -858,4 +860,12 @@ else
   initFields();
 }
 
+function hidePluginsSkeleton() {
+  $('#plugins-skeleton').fadeOut(250, function() { $(this).remove(); });
+}
+
+window.addEventListener('load', function() {
+  setTimeout(hidePluginsSkeleton, 15000);
+});
+
 </script>

front/presence.php

@@ -21,7 +21,8 @@
 </script>
 
 <!-- Page ------------------------------------------------------------------ -->
-  <div class="content-wrapper">
+  <div class="content-wrapper" id="presencePage">
+<?php require 'php/templates/skel_presence.php'; ?>
 
 <!-- Main content ---------------------------------------------------------- -->
     <section class="content">
@@ -344,6 +345,7 @@ function initializeCalendar () {
           showSpinner();
         } else {
           hideSpinner();
+          hidePresenceSkeleton();
         }
     }
 
@@ -507,6 +509,12 @@ function getDevicesPresence (status) {
   });
 };
 
+function hidePresenceSkeleton() {
+  $('#presence-skeleton').fadeOut(250, function() { $(this).remove(); });
+}
 
+window.addEventListener('load', function() {
+  setTimeout(hidePresenceSkeleton, 15000);
+});
 
 </script>

front/report.php

@@ -1,7 +1,6 @@
 <?php
 
   require 'php/templates/header.php';
-  require 'php/templates/modals.php';
 
 ?>
 
@@ -10,7 +9,8 @@
 </script>
 
 <!-- Page ------------------------------------------------------------------ -->
-<div class="content-wrapper">
+<div class="content-wrapper" id="reportPage">
+<?php require 'php/templates/skel_report.php'; ?>
 
 <!-- Content header--------------------------------------------------------- -->
     <!-- Main content ---------------------------------------------------------- -->
@@ -126,6 +126,7 @@
             })
             .finally(() => {
                 hideSpinner(); // always called, even if error occurred
+                hideReportSkeleton();
             });
     }
 
@@ -183,6 +184,14 @@
   </script>
 
     <!-- /.content -->
+    <script>
+    function hideReportSkeleton() {
+      $('#report-skeleton').fadeOut(250, function() { $(this).remove(); });
+    }
+    window.addEventListener('load', function() {
+      setTimeout(hideReportSkeleton, 15000);
+    });
+    </script>
     <?php
       require 'php/templates/footer.php';
     ?>

front/settings.php

@@ -69,7 +69,7 @@ $settingsJSON_DB = json_encode($settings, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX
 
 <div id="settingsPage" class="content-wrapper">
 
-<?php require 'php/templates/settings_skeleton.php'; ?>
+<?php require 'php/templates/skel_settings.php'; ?>
 
 
 <!-- Content header--------------------------------------------------------- -->

front/systeminfo.php

@@ -13,7 +13,6 @@
 
   require 'php/templates/header.php';
 ?>
-<?php require 'php/templates/modals.php'; ?>
 <!-- ----------------------------------------------------------------------- -->
 
 
@@ -70,16 +69,16 @@
 
             <div class="tab-content spinnerTarget" style="min-height: 430px;">
               <div class="tab-pane fade" data-php-file="systeminfoServer.php" id="panServer">
-               <!-- PLACEHOLDER -->
+                <?php require 'php/templates/skel_tab_sysinfo_server.php'; ?>
               </div>
               <div class="tab-pane fade" data-php-file="systeminfoNetwork.php" id="panNetwork">
-                 <!-- PLACEHOLDER -->
+                <?php require 'php/templates/skel_tab_sysinfo_network.php'; ?>
               </div>
               <div class="tab-pane fade table-responsive" data-php-file="systeminfoStorage.php" id="panStorage">
-               <!-- PLACEHOLDER -->
+                <?php require 'php/templates/skel_tab_sysinfo_storage.php'; ?>
               </div>
               <div class="tab-pane fade table-responsive" data-php-file="systeminfoInitCheck.php" id="panInitCheck">
-               <!-- PLACEHOLDER -->
+                <?php require 'php/templates/skel_tab_sysinfo_initcheck.php'; ?>
               </div>
             </div>
             <!-- /.tab-content -->

front/userNotifications.php

@@ -14,6 +14,7 @@ require 'php/templates/header.php';
 </script>
 
 <div id="notifications" class="content-wrapper">
+<?php require 'php/templates/skel_notifications.php'; ?>
   <section class="content">
     <div class="notification-box box box-gray col-xs-12" >
       <div class="box-header">
@@ -168,6 +169,7 @@ require 'php/templates/header.php';
     ,
     initComplete: function(settings, json) {
         hideSpinner(); // Called after the DataTable is fully initialized
+        hideNotificationsSkeleton();
     }});
 
     fetchData(function(data) {
@@ -215,6 +217,14 @@ require 'php/templates/header.php';
 
   });
 
+function hideNotificationsSkeleton() {
+  $('#notifications-skeleton').fadeOut(250, function () { $(this).remove(); });
+}
+
+window.onload = function () {
+  setTimeout(hideNotificationsSkeleton, 15000);
+};
+
 </script>
 
 <?php

front/workflows.php

@@ -1,13 +1,13 @@
 <?php
 
   require 'php/templates/header.php';
-  require 'php/templates/modals.php';
 ?>
 <!-- ----------------------------------------------------------------------- -->
 
 
 <!-- Page ------------------------------------------------------------------ -->
 <div class="content-wrapper" id="wf-content-wrapper">
+<?php require 'php/templates/skel_workflows.php'; ?>
 <span class="helpIcon"> <a target="_blank" href="https://docs.netalertx.com/WORKFLOWS"><i class="fa fa-circle-question"></i></a></span>
 <?php
    require 'workflowsCore.php';

front/workflowsCore.php

@@ -107,6 +107,7 @@ function getData() {
   })
   .always(function () {
     hideSpinner(); // Ensure the spinner is hidden in all cases
+    hideWorkflowsSkeleton();
   });
 }
 
@@ -1376,5 +1377,12 @@ $(document).ready(function () {
   getData();
 });
 
+function hideWorkflowsSkeleton() {
+  $('#workflows-skeleton').fadeOut(250, function() { $(this).remove(); });
+}
+
+window.addEventListener('load', function() {
+  setTimeout(hideWorkflowsSkeleton, 15000);
+});
 
 </script>