diff --git a/admin/css/wp-allstars-plugins.css b/admin/css/wp-allstars-plugins.css index 1521116..a7ad29a 100644 --- a/admin/css/wp-allstars-plugins.css +++ b/admin/css/wp-allstars-plugins.css @@ -253,6 +253,37 @@ body.wp-admin .plugin-card-bottom .compatibility-untested *, color: #000 !important; } +/* Loading overlay styling */ +.wp-allstars-loading-overlay { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(255, 255, 255, 0.9); + z-index: 100; + display: flex; + align-items: center; + justify-content: center; + min-height: 200px; +} + +.wp-allstars-loading-container { + text-align: center; + padding: 20px; +} + +.wp-allstars-loading-container p { + font-size: 16px; + margin-bottom: 60px; +} + +.wp-allstars-loading-container .spinner { + float: none; + margin: 0 auto; + display: block; +} + .plugin-card:hover { border-color: #999; diff --git a/admin/js/wp-allstars-admin.js b/admin/js/wp-allstars-admin.js index 88a4103..02ed635 100644 --- a/admin/js/wp-allstars-admin.js +++ b/admin/js/wp-allstars-admin.js @@ -155,7 +155,7 @@ jQuery(document).ready(function($) { // Function to load plugins function loadPlugins(category) { var $container = $('#wpa-plugin-list'); - var $loadingOverlay = $('<div class="wp-allstars-loading-overlay"><div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;"><p style="margin-top: 0;">Loading plugins...</p><span class="spinner is-active" style="margin-top: 50px;"></span></div></div>'); + var $loadingOverlay = $('<div class="wp-allstars-loading-overlay"><div class="wp-allstars-loading-container"><p>Loading plugins...</p><span class="spinner is-active"></span></div></div>'); // Show loading overlay $container.css('position', 'relative').append($loadingOverlay); diff --git a/admin/settings.php b/admin/settings.php index c07d810..c4fbc10 100644 --- a/admin/settings.php +++ b/admin/settings.php @@ -626,7 +626,7 @@ function wp_allstars_settings_page() { if ($("#wpa-plugin-list").length && $("#wpa-plugin-list").is(":empty")) { var category = "' . esc_js($active_category) . '"; var $container = $("#wpa-plugin-list"); - var $loadingOverlay = $("<div class=\"wp-allstars-loading-overlay\"><div style=\"position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;\"><p style=\"margin-top: 0;\">Loading plugins...</p><span class=\"spinner is-active\" style=\"margin-top: 50px;\"></span></div></div>"); + var $loadingOverlay = $("<div class=\"wp-allstars-loading-overlay\"><div class=\"wp-allstars-loading-container\"><p>Loading plugins...</p><span class=\"spinner is-active\"></span></div></div>"); // Show loading overlay $container.css("position", "relative").append($loadingOverlay);