From 127eaa44e5a040ca258931a0d91176b022344a2a Mon Sep 17 00:00:00 2001
From: David Cook <david@redcliffs.net>
Date: Wed, 29 Nov 2023 16:12:45 +1100
Subject: [PATCH] Ensure loading message always shows

Before, it was affixed near the top of the page and wasn't visible after scrolling down.
---
 app/views/admin/products_v3/index.html.haml     |  8 +++++---
 .../css/admin_v3/components/spinner.scss        | 17 ++++++++++++-----
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/app/views/admin/products_v3/index.html.haml b/app/views/admin/products_v3/index.html.haml
index 581dcc2605..82a4e5f38e 100644
--- a/app/views/admin/products_v3/index.html.haml
+++ b/app/views/admin/products_v3/index.html.haml
@@ -11,7 +11,9 @@
 = render partial: 'spree/admin/shared/product_sub_menu'
 
 #products_v3_page{ "data-controller": "products" }
-  #loading-spinner.spinner-container{ "data-controller": "loading", "data-products-target": "loading" }
-    .spinner
-    = t('.loading')
+
+  .spinner-overlay{ "data-controller": "loading", "data-products-target": "loading" }
+    .spinner-container
+      .spinner
+      = t('.loading')
   #products-content
diff --git a/app/webpacker/css/admin_v3/components/spinner.scss b/app/webpacker/css/admin_v3/components/spinner.scss
index d6694b3ed2..fd7235ffe3 100644
--- a/app/webpacker/css/admin_v3/components/spinner.scss
+++ b/app/webpacker/css/admin_v3/components/spinner.scss
@@ -1,16 +1,23 @@
-.spinner-container {
+.spinner-overlay {
   position: absolute;
-  width: 100%;
+  left: 0;
+  right: 0;
   height: 100%;
   min-height: 200px;
+  background: rgba(255, 255, 255, 0.8);
+  z-index: 2;
+}
+
+.spinner-container {
+  position: fixed;
+  left: 0;
+  right: 0;
   display: flex;
-  justify-content: flex-start;
+  justify-content: center;
   align-items: center;
   flex-direction: column;
   gap: 40px;
   font-size: 24px;
-  background: rgba(255, 255, 255, 0.8);
-  z-index: 2;
 
   &.hidden {
     display: none;