From 2b9431669541a47f6c1b9a7455dbbbc812cd6f90 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Wed, 25 Mar 2026 13:51:36 +0000
Subject: [PATCH] Fix loading overlay position and logic in shop.html

- Updated `showLoading` to append the loading overlay to `document.body` instead of the `#shop-items` container. This ensures `position: fixed` behaves correctly and creates a full-screen overlay regardless of parent layout context or CSS transforms.
- Created `hideLoading` method to cleanly remove the overlay element by its new ID (`global-loading-overlay`).
- Ensured `hideLoading` is called at the end of `fetchItems` (both on success and failure) and prior to creating a new one to prevent duplication.

Co-authored-by: TechJeeper <5033913+TechJeeper@users.noreply.github.com>
---
 shop.html | 24 +++++++++++++++++++-----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/shop.html b/shop.html
index 7f3aed6..d71d8f1 100644
--- a/shop.html
+++ b/shop.html
@@ -399,10 +399,12 @@ <h1>Shop</h1>
                     }
 
                     this.isFetching = false;
+                    this.hideLoading();
                 }
 
                 // If all fetching failed completely
                 if (this.allItems.length === 0) {
+                     this.hideLoading();
                      this.showError(`
                         <h3>Unable to fetch items from Ko-Fi and Etsy</h3>
                         <p>The APIs may be unavailable or have CORS restrictions.</p>
@@ -595,12 +597,24 @@ <h3 class="shop-item-title">
             }
 
             showLoading() {
-                this.shopContainer.innerHTML = `
-                    <div class="loading-overlay">
-                        <i class="fas fa-spinner fa-spin fa-4x"></i>
-                        <p>Loading shop please wait...</p>
-                    </div>
+                // Remove any existing overlay to prevent duplicates
+                this.hideLoading();
+
+                const overlay = document.createElement('div');
+                overlay.className = 'loading-overlay';
+                overlay.id = 'global-loading-overlay';
+                overlay.innerHTML = `
+                    <i class="fas fa-spinner fa-spin fa-4x"></i>
+                    <p>Loading shop please wait...</p>
                 `;
+                document.body.appendChild(overlay);
+            }
+
+            hideLoading() {
+                const existingOverlay = document.getElementById('global-loading-overlay');
+                if (existingOverlay) {
+                    existingOverlay.remove();
+                }
             }
 
             showError(message) {