From 8de06cb86982a09cbff92bc3ceb12659d2c1e524 Mon Sep 17 00:00:00 2001
From: Marcus Quinn <marcus@agentdesign.co.uk>
Date: Sun, 16 Mar 2025 18:55:35 +0000
Subject: [PATCH] Fix loading indicator with proper CSS and consistent
 positioning

---
 admin/css/wp-allstars-plugins.css | 31 +++++++++++++++++++++++++++++++
 admin/js/wp-allstars-admin.js     |  2 +-
 admin/settings.php                |  2 +-
 3 files changed, 33 insertions(+), 2 deletions(-)

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);