FE: skeleton uplift

front/deviceDetailsEdit.php

@@ -3,7 +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'; ?>
+<?php require $_SERVER['DOCUMENT_ROOT'] . '/php/templates/skel_device_details_tab_details.php'; ?>
 
 <div class="row" id="deviceDetailsEdit">
   <div class="box-body form-horizontal">

front/deviceDetailsEvents.php

@@ -5,7 +5,7 @@
 ?>
 <!-- ----------------------------------------------------------------------- -->
 
-<?php require $_SERVER['DOCUMENT_ROOT'] . '/php/templates/skel_tab_events.php'; ?>
+<?php require $_SERVER['DOCUMENT_ROOT'] . '/php/templates/skel_device_details_tab_events.php'; ?>
 
 <!-- Hide Connections -->
 <div class="col-sm-12 col-xs-12">

front/deviceDetailsPresence.php

@@ -5,7 +5,7 @@
 ?>
 
 <!-- fullCalendar -->
- <?php require $_SERVER['DOCUMENT_ROOT'] . '/php/templates/skel_tab_presence.php'; ?>
+ <?php require $_SERVER['DOCUMENT_ROOT'] . '/php/templates/skel_device_details_tab_presence.php'; ?>
 
 <link rel="stylesheet" href="lib/fullcalendar/fullcalendar.min.css">
 

front/deviceDetailsSessions.php

@@ -6,7 +6,7 @@
 
 <!-- ----------------------------------------------------------------------- -->
 
-<?php require $_SERVER['DOCUMENT_ROOT'] . '/php/templates/skel_tab_sessions.php'; ?>
+<?php require $_SERVER['DOCUMENT_ROOT'] . '/php/templates/skel_device_details_tab_sessions.php'; ?>
 
 <!-- Datatable Session -->
 <table id="tableSessions" class="table table-bordered table-hover table-striped ">

front/deviceDetailsTools.php

@@ -2,7 +2,7 @@
   //------------------------------------------------------------------------------
   // check if authenticated
   require_once  $_SERVER['DOCUMENT_ROOT'] . '/php/templates/security.php';
-  require $_SERVER['DOCUMENT_ROOT'] . '/php/templates/skel_tab_tools.php';
+  require $_SERVER['DOCUMENT_ROOT'] . '/php/templates/skel_device_details_tab_tools.php';
 ?>
 <!-- INTERNET INFO -->
 <?php if (strtolower($_REQUEST["mac"]) == "internet") { ?>

front/js/common.js

@@ -971,22 +971,28 @@ $(document).on('click', 'a', function (e) {
 
 function resolveSpinnerTarget(explicitTarget = null) {
   if (explicitTarget) {
-    return $(explicitTarget);
+    const explicit = $(explicitTarget);
+    if (explicit.length) {
+      return explicit;
+    }
   }
 
-  // Active tab pane
-  const activeTab = $(".tab-pane.active .spinnerTarget").first();
-  if (activeTab.length) {
-    return activeTab;
+  // Prefer the active tab pane itself
+  const activePane = $(".tab-pane.active:visible");
+  if (activePane.length) {
+    // Use a direct child spinnerTarget if one exists and is visible
+    const childTarget = activePane.children(".spinnerTarget:visible").first();
+    return childTarget.length ? childTarget : activePane;
   }
 
-  // Visible container fallback
+  // Fall back to any visible spinnerTarget
   const visibleTarget = $(".spinnerTarget:visible").first();
   if (visibleTarget.length) {
     return visibleTarget;
   }
 
-  return $();
+  // Finally, cover the page
+  return $("body");
 }
 
 function showSpinner(stringKey = "Loading", target = null) {
@@ -1001,6 +1007,10 @@ function showSpinner(stringKey = "Loading", target = null) {
   const spinner = $("#loadingSpinner");
   const resolvedTarget = resolveSpinnerTarget(target);
 
+  console.log(resolvedTarget);
+  
+  console.log(`spinnerTarget=${resolvedTarget.attr("id")} class=${resolvedTarget.attr("class")} size=${resolvedTarget.outerWidth()}x${resolvedTarget.outerHeight()} parent=${resolvedTarget.parent().outerWidth()}x${resolvedTarget.parent().outerHeight()}`)
+
   $("#loadingSpinnerText").text(text);
 
   if (resolvedTarget.length) {

front/php/templates/skel_device_details.php

@@ -1,5 +1,5 @@
 <!-- Device Details Loading Skeleton ======================================= -->
-<div id="device-details-skeleton">
+<div id="device-details-skeleton" class="spinnerTarget">
 
   <!-- Content header area -------------------------------------------------- -->
   <div class="skel-detail-header">
@@ -48,7 +48,177 @@
       </div>
     </div>
   </div>
+  <!-- Tabs -->
 
+  <div class="skel-form-row">
+    <div class="skel-form-label skel-shimmer" style="max-width:50px;height:30px;"></div>
+    <div class="skel-form-label skel-shimmer" style="max-width:50px;height:30px;"></div>
+    <div class="skel-form-label skel-shimmer" style="max-width:50px;height:30px;"></div>
+    <div class="skel-form-label skel-shimmer" style="max-width:50px;height:30px;"></div>
+    <div class="skel-form-label skel-shimmer" style="max-width:50px;height:30px;"></div>
+    <div class="skel-form-label skel-shimmer" style="max-width:50px;height:30px;"></div>
+  </div>
+
+  <!-- FORM -->
+  <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">
+        <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><span class="skel-form-input skel-shimmer" style="max-width:40px"></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><span class="skel-form-input skel-shimmer" style="max-width:40px"></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:340px"></span><span class="skel-form-input skel-shimmer" style="max-width:40px"></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-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;height:50px"></span>
+      </div>
+    </div>
+    <div class="col-lg-4 col-sm-6 col-xs-12">
+      <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><span class="skel-form-input skel-shimmer" style="max-width:40px"></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:40px"></span>
+        <span class="skel-form-input skel-shimmer" style="max-width:380px"></span><span class="skel-form-input skel-shimmer" style="max-width:40px"></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-row">
+        <span class="skel-form-label skel-shimmer"></span>
+        <span class="skel-form-input skel-shimmer" style="max-width:260px"></span><span class="skel-form-input skel-shimmer" style="max-width:40px"></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><span class="skel-form-input skel-shimmer" style="max-width:40px"></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>
+    <div class="col-lg-4 col-sm-6 col-xs-12">
+      <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><span class="skel-form-input skel-shimmer" style="max-width:40px"></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><span class="skel-form-input skel-shimmer" style="max-width:40px"></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><span class="skel-form-input skel-shimmer" style="max-width:40px"></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-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><span class="skel-form-input skel-shimmer" style="max-width:40px"></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-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: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>
+    <div class="col-lg-6 col-sm-12 col-xs-12">
+      <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><span class="skel-form-input skel-shimmer" style="max-width:40px"></span><span class="skel-form-input skel-shimmer" style="max-width:40px"></span>
+      </div>
+    </div>
+    <div class="col-lg-6 col-sm-12 col-xs-12">
+      <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>
+    <div class="skel-form-footer">
+      <span class="skel-form-btn skel-shimmer"></span>
+      <span class="skel-form-btn skel-shimmer"></span>
+    </div>
+  </div>
+  
 
 </div>
+
+
 <!-- /Device Details Loading Skeleton ====================================== -->