fix loader overlay

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 */

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.

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>