From e0730f1ba3442e28ea4bac5be1d1c5872e48171f Mon Sep 17 00:00:00 2001
From: lelo <leonid.firus@outlook.com>
Date: Sat, 22 Mar 2025 21:36:19 +0100
Subject: [PATCH] fix loader overlay

---
 static/gallery.css | 25 +++++++++++++++++--------
 static/gallery.js  |  4 ++--
 templates/app.html |  7 +++++--
 3 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/static/gallery.css b/static/gallery.css
index 79845c9..5c54c9f 100644
--- a/static/gallery.css
+++ b/static/gallery.css
@@ -48,16 +48,25 @@
   }
     
   /* Loader for gallery */
+  #loader-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999; /* Ensure it's on top */
+  }
+  
   #gallery-loader {
-    display: none; /* Hidden by default */
-    border: 8px solid #f3f3f3; /* Light gray */
-    border-top: 8px solid #525252; /* Blue */
+    border: 8px solid #f3f3f3;
+    border-top: 8px solid #525252;
     border-radius: 50%;
-    width: 10px;
-    height: 10px;
-    padding-left: 50%;
-    padding-top: 50%;
-    animation: spin 1.5s linear infinite;
+    width: 30px;
+    height: 30px;
+    animation: spin 3s linear infinite;
   }
   
   /* Keyframes for spinner animation */
diff --git a/static/gallery.js b/static/gallery.js
index ab891da..7bda56f 100644
--- a/static/gallery.js
+++ b/static/gallery.js
@@ -15,12 +15,12 @@ function showGalleryImage(relUrl) {
   const fullUrl = '/media/' + relUrl;
   const modal = document.getElementById('gallery-modal');
   const currentImage = document.getElementById('gallery-modal-content');
-  const loader = document.getElementById('gallery-loader');
+  const loader = document.getElementById('loader-container');
   const closeBtn = document.getElementById('gallery-close');
   
   // Set a timeout for showing the loader after 500ms.
   let loaderTimeout = setTimeout(() => {
-    loader.style.display = 'block';
+    loader.style.display = 'flex';
   }, 500);
 
   // Preload the new image.
diff --git a/templates/app.html b/templates/app.html
index 48c685c..82f0dc6 100644
--- a/templates/app.html
+++ b/templates/app.html
@@ -90,13 +90,16 @@
   
   <!-- Gallery Modal for Images -->
   <div id="gallery-modal" style="display: none;">
-    <div id="gallery-loader"></div>
-    <img id="gallery-modal-content" src="" alt="Gallery Image" />
+    <img id="gallery-modal-content" src="" />
     <button class="gallery-nav gallery-prev">‹</button>
     <button class="gallery-nav gallery-next">›</button>
     <button id="gallery-close">x</button>
   </div>
   
+  <div id="loader-container" style="display: none;">
+    <div id="gallery-loader"></div>
+  </div>
+
   <!-- Load main app JS first, then gallery JS -->
   <script src="{{ url_for('static', filename='app.js') }}"></script>
   <script src="{{ url_for('static', filename='gallery.js') }}"></script>