From 4bab55934494ef6ff25db7d97a1ea71f41dc2e0e Mon Sep 17 00:00:00 2001
From: Simran Singh <ss.simransingh26@hmail.com>
Date: Tue, 20 Oct 2026 20:54:01 +0530
Subject: [PATCH] feat: add loading skeleton for issue cards during HTMX
 requests

---
 core/templates/core/_issue_list.html |  8 ++++----
 core/templates/core/explore.html     | 15 ++++++++++++++-
 static/css/app.css                   | 25 +++++++++++++++++++++++++
 3 files changed, 43 insertions(+), 5 deletions(-)

diff --git a/core/templates/core/_issue_list.html b/core/templates/core/_issue_list.html
index 85b249b..0da4826 100644
--- a/core/templates/core/_issue_list.html
+++ b/core/templates/core/_issue_list.html
@@ -16,7 +16,7 @@
 <nav class="flex items-center justify-center gap-1.5 mt-10" aria-label="Pagination">
     {% if page_obj.has_previous %}
     <a hx-get="{% url 'explore' %}?{{ qs }}{% if qs %}&{% endif %}page={{ page_obj.previous_page_number }}"
-       hx-target="#issue-list" hx-swap="innerHTML show:window:top" hx-push-url="true" hx-indicator="#list-loader"
+       hx-target="#issue-list" hx-swap="innerHTML show:window:top" hx-push-url="true" hx-indicator="#list-loader, #skeleton-loader"
        href="?{{ qs }}{% if qs %}&{% endif %}page={{ page_obj.previous_page_number }}"
        class="w-10 h-10 grid place-items-center rounded-lg border border-outline-variant/60 text-on-surface-variant hover:bg-surface-container transition-colors">
         <span class="material-symbols-outlined text-[20px]">chevron_left</span>
@@ -28,12 +28,12 @@
         <span class="min-w-10 h-10 px-3 grid place-items-center rounded-lg bg-primary text-on-primary font-semibold">{{ num }}</span>
         {% elif num >= page_obj.number|add:-2 and num <= page_obj.number|add:2 %}
         <a hx-get="{% url 'explore' %}?{{ qs }}{% if qs %}&{% endif %}page={{ num }}"
-           hx-target="#issue-list" hx-swap="innerHTML show:window:top" hx-push-url="true" hx-indicator="#list-loader"
+           hx-target="#issue-list" hx-swap="innerHTML show:window:top" hx-push-url="true" hx-indicator="#list-loader, #skeleton-loader"
            href="?{{ qs }}{% if qs %}&{% endif %}page={{ num }}"
            class="min-w-10 h-10 px-3 grid place-items-center rounded-lg border border-outline-variant/60 text-on-surface-variant hover:bg-surface-container transition-colors">{{ num }}</a>
         {% elif num == 1 or num == page_obj.paginator.num_pages %}
         <a hx-get="{% url 'explore' %}?{{ qs }}{% if qs %}&{% endif %}page={{ num }}"
-           hx-target="#issue-list" hx-swap="innerHTML show:window:top" hx-push-url="true" hx-indicator="#list-loader"
+           hx-target="#issue-list" hx-swap="innerHTML show:window:top" hx-push-url="true" hx-indicator="#list-loader, #skeleton-loader"
            href="?{{ qs }}{% if qs %}&{% endif %}page={{ num }}"
            class="min-w-10 h-10 px-3 grid place-items-center rounded-lg border border-outline-variant/60 text-on-surface-variant hover:bg-surface-container transition-colors">{{ num }}</a>
         {% elif num == page_obj.number|add:-3 or num == page_obj.number|add:3 %}
@@ -43,7 +43,7 @@
 
     {% if page_obj.has_next %}
     <a hx-get="{% url 'explore' %}?{{ qs }}{% if qs %}&{% endif %}page={{ page_obj.next_page_number }}"
-       hx-target="#issue-list" hx-swap="innerHTML show:window:top" hx-push-url="true" hx-indicator="#list-loader"
+       hx-target="#issue-list" hx-swap="innerHTML show:window:top" hx-push-url="true" hx-indicator="#list-loader, #skeleton-loader"
        href="?{{ qs }}{% if qs %}&{% endif %}page={{ page_obj.next_page_number }}"
        class="w-10 h-10 grid place-items-center rounded-lg border border-outline-variant/60 text-on-surface-variant hover:bg-surface-container transition-colors">
         <span class="material-symbols-outlined text-[20px]">chevron_right</span>
diff --git a/core/templates/core/explore.html b/core/templates/core/explore.html
index c81edd1..27a8afa 100644
--- a/core/templates/core/explore.html
+++ b/core/templates/core/explore.html
@@ -10,7 +10,7 @@ <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-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 +78,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" aria-hidden="true" class="gap-4 sm:grid-cols-2 xl:grid-cols-3">
+        {% for i in "123" %}
+        <div class="bg-surface-container-lowest 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 shrink-0"></div>
+                <div class="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 class="h-4 skeleton" style="width: 40%;"></div>
+        </div>
+        {% endfor %}
+    </div>
     <div id="issue-list">
         {% include "core/_issue_list.html" %}
     </div>
diff --git a/static/css/app.css b/static/css/app.css
index ab5705c..a23d433 100644
--- a/static/css/app.css
+++ b/static/css/app.css
@@ -173,3 +173,28 @@ body {
 .htmx-request.htmx-indicator,
 .htmx-request .htmx-indicator { opacity: 1; }
 .htmx-indicator { opacity: 0; transition: opacity 0.2s; }
+
+
+/* ---- Loading skeleton (Explore) ---------------------------------------- */
+.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; }
+}
+
+/* Hidden (no layout space) until HTMX starts a request */
+#skeleton-loader { display: none; }
+#skeleton-loader.htmx-request { display: grid; }
+/* Swap the real list out while the skeleton is showing */
+body:has(#skeleton-loader.htmx-request) #issue-list { display: none; }
\ No newline at end of file