From b30a693d77f85e1ddcdc55d2b024f6af2fc4abb3 Mon Sep 17 00:00:00 2001
From: Marcus Quinn <marcus@agentdesign.co.uk>
Date: Sun, 16 Mar 2025 05:09:58 +0000
Subject: [PATCH] Fix theme tab loading spinner not disappearing after content
 loads

---
 admin/css/wp-allstars-plugins.css |  9 ++++++++-
 admin/js/wp-allstars-admin.js     | 22 ++++++++++------------
 2 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/admin/css/wp-allstars-plugins.css b/admin/css/wp-allstars-plugins.css
index f402909..d486a01 100644
--- a/admin/css/wp-allstars-plugins.css
+++ b/admin/css/wp-allstars-plugins.css
@@ -254,8 +254,9 @@
     left: 0;
     right: 0;
     bottom: 0;
-    background-color: rgba(255, 255, 255, 0.7);
+    background-color: rgba(255, 255, 255, 0.9);
     display: flex;
+    flex-direction: column;
     justify-content: center;
     align-items: center;
     z-index: 100;
@@ -264,7 +265,13 @@
 .wp-allstars-loading-overlay .spinner {
     float: none;
     visibility: visible;
+    margin: 0 0 10px 0;
+}
+
+.wp-allstars-loading-overlay p {
     margin: 0;
+    font-size: 14px;
+    color: #555;
 }
 
 /* Theme Browser */
diff --git a/admin/js/wp-allstars-admin.js b/admin/js/wp-allstars-admin.js
index 72ecd8f..4cd28ef 100644
--- a/admin/js/wp-allstars-admin.js
+++ b/admin/js/wp-allstars-admin.js
@@ -187,13 +187,13 @@ jQuery(document).ready(function($) {
     // Function to load themes
     function loadTheme() {
         var $container = $('#wpa-theme-list');
-        var $loadingOverlay = $('<div class="wp-allstars-loading-overlay"><span class="spinner is-active"></span></div>');
         
-        // Show loading overlay
-        $container.css('position', 'relative').append($loadingOverlay);
+        // Clear existing themes and show loading message
+        $container.empty().html('<div class="wp-allstars-loading-overlay"><span class="spinner is-active"></span><p>Loading themes...</p></div>');
+        var $loadingOverlay = $container.find('.wp-allstars-loading-overlay');
         
-        // Clear existing themes
-        $container.empty().append($loadingOverlay);
+        // Ensure container has proper positioning for overlay
+        $container.css('position', 'relative');
         
         // AJAX request to get themes
         $.ajax({
@@ -204,11 +204,8 @@ jQuery(document).ready(function($) {
                 _wpnonce: wpAllstars.nonce
             },
             success: function(response) {
-                // Remove loading overlay
-                $loadingOverlay.remove();
-                
                 if (response.success) {
-                    // Append themes HTML
+                    // Replace all content (including loading overlay) with new HTML
                     $container.html(response.data);
                     
                     // Initialize theme action buttons
@@ -219,12 +216,13 @@ jQuery(document).ready(function($) {
                 }
             },
             error: function(xhr, status, error) {
-                // Remove loading overlay
-                $loadingOverlay.remove();
-                
                 // Show error message
                 $container.html('<div class="notice notice-error"><p>Failed to load themes. Please try again. Error: ' + error + '</p></div>');
                 console.error('AJAX Error:', xhr.responseText);
+            },
+            complete: function() {
+                // Ensure the loading overlay is removed in all cases
+                $loadingOverlay.remove();
             }
         });
     }