From cdd36e712bd22f2fe0c1ac365b4e6925cccfacbd Mon Sep 17 00:00:00 2001
From: slopggobblercobbler81
 <336610228+slopggobblercobbler81@users.noreply.github.com>
Date: Tue, 20 Oct 2026 01:32:28 +0200
Subject: [PATCH] feat(ui): add loading skeleton indicator for HTMX requests in
 explore page

---
 core/templates/core/explore.html | 19 ++++++++++++++++++-
 static/css/app.css               | 27 +++++++++++++++++++++++++++
 2 files changed, 45 insertions(+), 1 deletion(-)

diff --git a/core/templates/core/explore.html b/core/templates/core/explore.html
index c81edd1..10e59a0 100644
--- a/core/templates/core/explore.html
+++ b/core/templates/core/explore.html
@@ -10,7 +10,9 @@ <h1 class="font-display font-semibold text-3xl lg:text-4xl text-on-surface track
     </div>
 
     <form id="filters" hx-get="{% url 'explore' %}" hx-target="#issue-list" hx-swap="innerHTML"
-          hx-push-url="true" hx-indicator="#list-loader"
+          hx-push-url="true" hx-indicator="#list-loader, #skeleton-loader"
+          hx-on::before-request="document.getElementById('issue-list').style.opacity='0.3'"
+          hx-on::after-swap="document.getElementById('issue-list').style.opacity='1'"
           hx-trigger="change, keyup changed delay:400ms, search"
           class="bg-surface-container-lowest border border-outline-variant/40 rounded-2xl p-4 lg:p-5 shadow-card mb-6">
         <!-- Search + sort -->
@@ -78,6 +80,19 @@ <h1 class="font-display font-semibold text-3xl lg:text-4xl text-on-surface track
         <span id="list-status" class="sr-only" role="status" aria-live="polite"></span>
     </div>
 
+    <div id="skeleton-loader" class="htmx-indicator grid md:grid-cols-1 gap-4 mb-4" aria-hidden="true">
+        {% for i in "123" %}
+        <div class="border border-outline-variant/50 rounded-xl p-5 space-y-3">
+            <div class="flex items-center gap-2.5">
+                <div class="w-8 h-8 rounded-lg skeleton"></div>
+                <div class="flex-1 h-4 skeleton" style="width: 60%;"></div>
+            </div>
+            <div class="h-5 skeleton" style="width: 80%;"></div>
+            <div class="h-4 skeleton" style="width: 90%;"></div>
+        </div>
+        {% endfor %}
+    </div>
+
     <div id="issue-list">
         {% include "core/_issue_list.html" %}
     </div>
@@ -98,6 +113,8 @@ <h1 class="font-display font-semibold text-3xl lg:text-4xl text-on-surface track
         document.body.addEventListener('htmx:afterRequest', function (event) {
             if (event.detail.elt && event.detail.elt.id === 'filters' && !event.detail.successful) {
                 status.textContent = 'Le chargement a échoué';
+                const list = document.getElementById('issue-list');
+                if (list) list.style.opacity = '1';
             }
         });
     })();
diff --git a/static/css/app.css b/static/css/app.css
index ab5705c..11a7d76 100644
--- a/static/css/app.css
+++ b/static/css/app.css
@@ -173,3 +173,30 @@ body {
 .htmx-request.htmx-indicator,
 .htmx-request .htmx-indicator { opacity: 1; }
 .htmx-indicator { opacity: 0; transition: opacity 0.2s; }
+
+#skeleton-loader:not(.htmx-request) {
+  display: none;
+}
+
+.skeleton {
+  background: linear-gradient(90deg, 
+    rgb(var(--surface-container)) 25%, 
+    rgb(var(--surface-container-low)) 50%, 
+    rgb(var(--surface-container)) 75%
+  );
+  background-size: 200% 100%;
+  animation: skeleton-shimmer 1.5s infinite;
+  border-radius: 0.5rem;
+}
+
+@keyframes skeleton-shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .skeleton {
+    animation: none;
+  }
+}
+