From 30c223328646daad9fa0ce8343ca4bf197bd0154 Mon Sep 17 00:00:00 2001
From: Gary <glaxlax11@gmail.com>
Date: Tue, 2 Jan 2024 20:51:45 +0100
Subject: [PATCH] updates

---
 .../progressions/progressions.php             | 65 ++++++++++++++-----
 Les competitions/progressions/style.css       | 55 +++++++++-------
 2 files changed, 78 insertions(+), 42 deletions(-)
diff --git a/Les competitions/progressions/progressions.php b/Les competitions/progressions/progressions.php
index 91bc1eb..828383b 100644
--- a/Les competitions/progressions/progressions.php	
+++ b/Les competitions/progressions/progressions.php	
@@ -21,6 +21,39 @@
 
     <!-- htmx -->
     <script src="https://unpkg.com/htmx.org@1.9.10" integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC" crossorigin="anonymous"></script>
+
+    <style>
+        #loader-wrapper {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(255, 255, 255, 0.8);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            z-index: 9999;
+        }
+
+        #loader {
+            border: 8px solid #f3f3f3;
+            border-top: 8px solid #3498db;
+            border-radius: 50%;
+            width: 50px;
+            height: 50px;
+            animation: spin 1s linear infinite;
+        }
+
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+
+        .tables {
+            display: none;
+        }
+    </style>
 </head>
 
 <body>
@@ -116,29 +149,27 @@
         </div>
     </header>
 
+
     <main>
-        <div class="loaderDiv">
-            <p>0%</p>
-            <div class="container">
-                <div class="loader"></div>
+        <div id="loader-wrapper">
+            <div id="loader"></div>
+        </div>
+    
+        <div class="tables">
+            <div hx-get="loaddata.php" hx-trigger="load delay:0.1s" hx-swap="outerHTML">
             </div>
-            <p>100%</p>
         </div>
 
-        <script defer>
-            document.addEventListener("DOMContentLoaded", function() {
-            // Sélectionnez l'image loader GIF après que le DOM soit chargé
-            var loader = document.querySelector('.loaderDiv');
+        <script>
+            document.addEventListener("htmx:afterRequest", function () {
+                // Hide the loader and show the content after each htmx request
+                const loaderWrapper = document.getElementById("loader-wrapper");
+                const tables = document.querySelector(".tables");
 
-            // Définissez un délai de 10 secondes pour masquer le loader
-            setTimeout(function() {
-                loader.style.display = 'none';
-            }, 15000);
+                loaderWrapper.style.display = "none";
+                tables.style.display = "block";
             });
         </script>
-
-        <div hx-get="loaddata.php" hx-trigger="load delay:0.1s" hx-swap="outerHTML">
-        </div>
     </main>
 
     <footer>
@@ -191,4 +222,4 @@
 
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/Les competitions/progressions/style.css b/Les competitions/progressions/style.css
index 01670f1..4e686eb 100644
--- a/Les competitions/progressions/style.css	
+++ b/Les competitions/progressions/style.css	
@@ -1,37 +1,42 @@
-@keyframes loader {
-  0% {
-    transform: translateX(-600px);
-  }
-
-  100% {
-    transform: translateX(0px);
-  }
-}
-
-.loaderDiv {
+/* loader */
+#loader-wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.8);
   display: flex;
   justify-content: center;
   align-items: center;
-  height: calc(100vh - (95px + 220px));
+  z-index: 9999;
+}
+
+#loader {
+  border: 8px solid #f3f3f3;
+  border-top: 8px solid #3498db;
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+  animation: spin 1s linear infinite;
 }
 
-.loaderDiv p {
-  margin: 0 10px;
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
 }
 
-.container {
-  width: 600px;
-  border: 2px solid black;
-  height: 25px;
-  overflow: hidden;
+#content {
+  display: none;
 }
 
-.loader {
-  width: 600px;
-  height: 21px;
-  background-color: green;
-  transform: translateX(-600px);
-  animation: loader 15s linear infinite;
+/* Table styles */
+.tables {
+  display: none;
 }
 
 .joueurs-table {
