FE: skeleton uplift

front/css/dark-patch.css

@@ -21,7 +21,6 @@
   --color-red: #dd4b39;
   --color-gray: #8c8c8c;
   --color-lightgray: #bec5cb;
-  --color-white: #fff;
   --skel-base: #353c42;
   --skel-shine: #272c30;
   --skel-section: #272c30;

front/js/common.js

@@ -969,34 +969,52 @@ $(document).on('click', 'a', function (e) {
     }
 });
 
-function showSpinner(stringKey = 'Loading') {
-  let text = isEmpty(stringKey) ? "Loading..." : getString(stringKey || "Loading");
+function resolveSpinnerTarget(explicitTarget = null) {
+  if (explicitTarget) {
+    return $(explicitTarget);
+  }
+
+  // Active tab pane
+  const activeTab = $(".tab-pane.active .spinnerTarget").first();
+  if (activeTab.length) {
+    return activeTab;
+  }
+
+  // Visible container fallback
+  const visibleTarget = $(".spinnerTarget:visible").first();
+  if (visibleTarget.length) {
+    return visibleTarget;
+  }
+
+  return $();
+}
+
+function showSpinner(stringKey = "Loading", target = null) {
+  let text = isEmpty(stringKey)
+    ? "Loading..."
+    : getString(stringKey || "Loading");
 
   if (!text || !text.trim()) {
-    text = "Loading..."
+    text = "Loading...";
   }
 
   const spinner = $("#loadingSpinner");
-  const target = $(".spinnerTarget").first(); // Only use the first one if multiple exist
+  const resolvedTarget = resolveSpinnerTarget(target);
 
   $("#loadingSpinnerText").text(text);
 
-  if (target.length) {
-    // Position relative to target
-    const offset = target.offset();
-    const width = target.outerWidth();
-    const height = target.outerHeight();
+  if (resolvedTarget.length) {
+    const offset = resolvedTarget.offset();
 
     spinner.css({
       position: "absolute",
       top: offset.top,
       left: offset.left,
-      width: width,
-      height: height,
+      width: resolvedTarget.outerWidth(),
+      height: resolvedTarget.outerHeight(),
       zIndex: 9999
     });
   } else {
-    // Fullscreen fallback
     spinner.css({
       position: "fixed",
       top: 0,
@@ -1013,6 +1031,12 @@ function showSpinner(stringKey = 'Loading') {
   });
 }
 
+function hideSpinner() {
+  $("#loadingSpinner")
+    .removeClass("visible")
+    .fadeOut(animationTime);
+}
+
 function hideSpinner() {
   clearTimeout(spinnerTimeout);
   const spinner = $("#loadingSpinner");