marcus/wpa-superstar-plugin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix theme tab loading spinner not disappearing after content loads

Browse Source
This commit is contained in:
Marcus Quinn
2025-03-16 05:09:58 +00:00
parent 46ab1e3d40
commit b30a693d77
2 changed files with 18 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
admin/css/wp-allstars-plugins.css
View File

@ -254,8 +254,9 @@
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background-color: rgba(255, 255, 255, 0.7); background-color: rgba(255, 255, 255, 0.9);
display: flex; display: flex;
flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
z-index: 100; z-index: 100;
@ -264,7 +265,13 @@
.wp-allstars-loading-overlay .spinner { .wp-allstars-loading-overlay .spinner {
float: none; float: none;
visibility: visible; visibility: visible;
margin: 0 0 10px 0;
}
.wp-allstars-loading-overlay p {
margin: 0; margin: 0;
font-size: 14px;
color: #555;
} }
/* Theme Browser */ /* Theme Browser */

22
admin/js/wp-allstars-admin.js
View File

@ -187,13 +187,13 @@ jQuery(document).ready(function($) {
// Function to load themes // Function to load themes
function loadTheme() { function loadTheme() {
var $container = $('#wpa-theme-list'); var $container = $('#wpa-theme-list');
var $loadingOverlay = $('<div class="wp-allstars-loading-overlay"><span class="spinner is-active"></span></div>');
// Show loading overlay // Clear existing themes and show loading message
$container.css('position', 'relative').append($loadingOverlay); $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 // Ensure container has proper positioning for overlay
$container.empty().append($loadingOverlay); $container.css('position', 'relative');
// AJAX request to get themes // AJAX request to get themes
$.ajax({ $.ajax({
@ -204,11 +204,8 @@ jQuery(document).ready(function($) {
_wpnonce: wpAllstars.nonce _wpnonce: wpAllstars.nonce
}, },
success: function(response) { success: function(response) {
// Remove loading overlay
$loadingOverlay.remove();
if (response.success) { if (response.success) {
// Append themes HTML // Replace all content (including loading overlay) with new HTML
$container.html(response.data); $container.html(response.data);
// Initialize theme action buttons // Initialize theme action buttons
@ -219,12 +216,13 @@ jQuery(document).ready(function($) {
} }
}, },
error: function(xhr, status, error) { error: function(xhr, status, error) {
// Remove loading overlay
$loadingOverlay.remove();
// Show error message // Show error message
$container.html('<div class="notice notice-error"><p>Failed to load themes. Please try again. Error: ' + error + '</p></div>'); $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); console.error('AJAX Error:', xhr.responseText);
},
complete: function() {
// Ensure the loading overlay is removed in all cases
$loadingOverlay.remove();
} }
}); });
} }