localized spinner support

front/css/app.css

@@ -2093,10 +2093,10 @@ input[readonly] {
 #loadingSpinner {
     position: fixed;
     z-index: 1000;
-    top: 0;
+    /* top: 0; */
-    left: 0;
+    /* left: 0; */
-    width: 100%;
+    /* width: 100%; */
-    height: 100%;
+    /* height: 100%; */
     opacity: 0;
     transition: opacity 0.3s ease-in-out;
     pointer-events: none;

front/deviceDetails.php

@@ -123,7 +123,7 @@
               </div>
             </ul>
             
-            <div class="tab-content" style="min-height: 430px;">
+            <div class="tab-content spinnerTarget" style="min-height: 430px;">
 
 <!-- tab page 1 ------------------------------------------------------------ -->
 

front/js/common.js

@@ -1112,38 +1112,92 @@ let animationTime = 300
 function showSpinner(stringKey = 'Loading') {
   const text = isEmpty(stringKey) ? "Loading" : getString(stringKey || "Loading");
   const spinner = $("#loadingSpinner");
-  
+  const target = $(".spinnerTarget").first(); // Only use the first one if multiple exist
-  if (spinner.length && spinner.is(':visible')) {
-    clearTimeout(spinnerTimeout);
-    
-    $("#loadingSpinnerText").text(text);
-    spinner.addClass("visible");
 
-    spinner.fadeIn(animationTime);
+  $("#loadingSpinnerText").text(text);
+
+  if (target.length) {
+    // Position relative to target
+    const offset = target.offset();
+    const width = target.outerWidth();
+    const height = target.outerHeight();
+
+    spinner.css({
+      position: "absolute",
+      top: offset.top,
+      left: offset.left,
+      width: width,
+      height: height,
+      zIndex: 800
+    });
   } else {
-    $("#loadingSpinnerText").text(text);
+    // Fullscreen fallback
-
+    spinner.css({
-    requestAnimationFrame(() => {
+      position: "fixed",
-      spinner.addClass("visible");
+      top: 0,
-      spinner.fadeIn(animationTime);
+      left: 0,
+      width: "100%",
+      height: "100%",
+      zIndex: 800
     });
   }
+
+  requestAnimationFrame(() => {
+    spinner.addClass("visible");
+    spinner.fadeIn(animationTime);
+  });
 }
 
 function hideSpinner() {
   clearTimeout(spinnerTimeout);
-
   const spinner = $("#loadingSpinner");
 
-  if (spinner.length) {
+  if (!spinner.length) return;
-    spinner.removeClass("visible");
-    spinner.fadeOut(animationTime);
 
-    spinnerTimeout = setTimeout(() => {
+  const target = $(".spinnerTarget").first();
-      spinner.removeClass("visible");
+
-      spinner.fadeOut(animationTime); // optional remove or hide again
+  if (target.length) {
-    }, 300);
+    // Lock position to target
+    const offset = target.offset();
+    const width = target.outerWidth();
+    const height = target.outerHeight();
+
+    spinner.css({
+      position: "absolute",
+      top: offset.top,
+      left: offset.left,
+      width: width,
+      height: height,
+      zIndex: 800
+    });
+  } else {
+    // Fullscreen fallback
+    spinner.css({
+      position: "fixed",
+      top: 0,
+      left: 0,
+      width: "100%",
+      height: "100%",
+      zIndex: 800
+    });
   }
+
+  // Trigger fade-out and only remove styles AFTER fade completes AND display is none
+  spinner.removeClass("visible").fadeOut(animationTime, () => {
+    // Ensure it's really hidden before resetting styles
+    spinner.css({
+      display: "none"
+    });
+
+    spinner.css({
+      position: "",
+      top: "",
+      left: "",
+      width: "",
+      height: "",
+      zIndex: ""
+    });
+  });
 }
 
     

front/maintenance.php

@@ -8,7 +8,10 @@
 
 <!-- Main content ---------------------------------------------------------- -->
 <section class="content">
-
+  
+<script>
+  showSpinner();
+</script>
 
 <?php
 
@@ -143,7 +146,7 @@ $db->close();
           </a>
         </li>
       </ul>
-    <div class="tab-content">
+    <div class="tab-content spinnerTarget">
         <div class="tab-pane active" id="tab_DBTools">
                 <div class="db_info_table">
                     <div class="db_info_table_row">
@@ -709,6 +712,8 @@ window.onload = function asyncFooter() {
 
 </script>
 
-
+<script>
+  hideSpinner();
+</script>
 
 

front/systeminfo.php

@@ -42,15 +42,15 @@
                       <?= lang('Systeminfo_System');?>  
                     </span>
                 </a>
-                </li>
+              </li>
-                <li> 
+              <li> 
                 <a id="tabNetwork"    href="#panNetwork"    data-toggle="tab"> 
                   <i class="fa fa-sitemap fa-rotate-270"></i> 
                     <span class="dev-detail-tab-name">
                       <?= lang('Systeminfo_Network');?>    
                     </span>
                 </a>
-                </li>
+              </li>
               <li> 
                 <a id="tabStorage" href="#panStorage" data-toggle="tab"> 
                   <i class="fa fa-hdd"></i> 
@@ -61,30 +61,20 @@
                 </li>
             </ul>
             
-            <div class="tab-content" style="min-height: 430px;">
+            <div class="tab-content spinnerTarget" style="min-height: 430px;">
-
-<!-- tab page  ------------------------------------------------------------ -->
-
               <div class="tab-pane fade" data-php-file="systeminfoServer.php" id="panServer">
                <!-- PLACEHOLDER -->
               </div>                                                                         
-        
-<!-- tab page  ------------------------------------------------------------ -->
-
               <div class="tab-pane fade" data-php-file="systeminfoNetwork.php" id="panNetwork">
                  <!-- PLACEHOLDER -->     	        
               </div>
-
-<!-- tab page  ------------------------------------------------------------ -->
               <div class="tab-pane fade table-responsive" data-php-file="systeminfoStorage.php" id="panStorage">
                <!-- PLACEHOLDER -->
               </div>
-
             </div>
             <!-- /.tab-content -->
           </div>
           <!-- /.nav-tabs-custom -->
-
           <!-- </div> -->
         </div>
         <!-- /.col -->
@@ -93,59 +83,22 @@
     </section>
 
     <!-- /.content -->
-    <?php
+
-      require 'php/templates/footer.php';
-    ?>
   </div>
   <!-- /.content-wrapper -->
 
+  <?php
+      require 'php/templates/footer.php';
+    ?>
+
 <!-- ----------------------------------------------------------------------- -->
 
 <script>
 
-// function initializeTabs () {  
-
-//   key ="activeSysinfoTab"
-
-//   // Activate panel
-//   if(!emptyArr.includes(getCache(key)))
-//   {
-//     selectedTab = getCache(key);
-//   }
-
-//   $('.nav-tabs a[id='+ selectedTab +']').tab('show');
-
-//   // When changed save new current tab
-//   $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
-//     setCache(key, $(e.target).attr('id'))
-  
-//     var target = $(e.target).attr("href") // activated tab
-
-//     if (target === '#panStorage' && !$(target).data('loaded')) {
-//       // Load content only once
-
-//       showSpinner();
-//       $(target).load('systeminfoStorage.php', function () {
-//         $(target).data('loaded', true);
-//       });
-//     }    
-//   });
-// }
-
-// window.onload = function async()
-// {
-//   initializeTabs();  
-// }
-
-
 function loadTabContent(target) {
   const $tab = $(target);
   const phpFile = $tab.data('php-file');
 
-  console.log(phpFile);
-  console.log(target);
-  console.log($tab );
-  
 
   if (phpFile && !$tab.data('loaded')) {
     showSpinner();
@@ -164,8 +117,6 @@ function initializeTabs() {
     selectedTab = cached;
   }
 
-  console.log(selectedTab);
-  
   // Activate the correct tab
   const $tabLink = $('.nav-tabs a[id="' + selectedTab + '"]');
   $tabLink.tab('show');