From a43dd01b7e98683f6572fa87442c403ee7547961 Mon Sep 17 00:00:00 2001
From: Khalid MOUTAOUAKIL <khalid.moutaouakil@sanef.fr>
Date: Mon, 6 Apr 2026 23:13:33 +0200
Subject: [PATCH] =?UTF-8?q?Loading=20spinner=20sur=20vulns=20et=20d=C3=A9t?=
 =?UTF-8?q?ail=20asset=20(HTMX),=20masqu=C3=A9=20apr=C3=A8s=20r=C3=A9ponse?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 app/templates/qualys_search.html | 25 +++++++++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/app/templates/qualys_search.html b/app/templates/qualys_search.html
index 3225040..ba5ac27 100644
--- a/app/templates/qualys_search.html
+++ b/app/templates/qualys_search.html
@@ -49,10 +49,19 @@
 {% endif %}
 
 <!-- Panel détail -->
+<div id="detail-loading" class="card mb-4 p-6 flex items-center justify-center gap-3" style="display:none;">
+    <div style="width:20px;height:20px;border:2px solid #22c55e;border-top-color:transparent;border-radius:50%;animation:spin 0.8s linear infinite;"></div>
+    <span class="text-sm text-gray-400">Chargement détail asset...</span>
+</div>
 <div id="qualys-detail" class="card mb-4 p-5" style="display:none"></div>
 
 <!-- Panel vulnérabilités -->
+<div id="vuln-loading" class="card mb-4 p-6 flex items-center justify-center gap-3" style="display:none;">
+    <div style="width:20px;height:20px;border:2px solid #ef4444;border-top-color:transparent;border-radius:50%;animation:spin 0.8s linear infinite;"></div>
+    <span class="text-sm text-gray-400">Chargement vulnérabilités (API VMDR + KB)...</span>
+</div>
 <div id="vuln-detail" class="card mb-4" style="display:none"></div>
+<style>@keyframes spin{to{transform:rotate(360deg)}}</style>
 
 <!-- Résultats -->
 {% if assets %}
@@ -179,7 +188,8 @@ function updateBulkTag() {
                 {% set vc = vuln_map.get(ip|string, {}) if vuln_map else {} %}
                 {% if vc and vc.total > 0 %}
                 <button class="hover:opacity-80" hx-get="/qualys/vulns/{{ ip }}" hx-target="#vuln-detail" hx-swap="innerHTML"
-                    onclick="document.getElementById('vuln-detail').style.display='block'; window.scrollTo({top:0,behavior:'smooth'})"
+                    hx-indicator="#vuln-loading"
+                    onclick="document.getElementById('vuln-detail').style.display='block'; document.getElementById('vuln-loading').style.display='flex'; window.scrollTo({top:0,behavior:'smooth'})"
                     title="S3:{{ vc.severity3 }} S4:{{ vc.severity4 }} S5:{{ vc.severity5 }} | Confirmed:{{ vc.confirmed }} Potential:{{ vc.potential }}">
                     {% if vc.severity5 > 0 %}<span class="badge badge-red">{{ vc.severity5 }} crit</span> {% endif %}
                     {% if vc.severity4 > 0 %}<span class="badge badge-yellow">{{ vc.severity4 }} high</span> {% endif %}
@@ -193,7 +203,8 @@ function updateBulkTag() {
                 {% if qid %}
                 <button class="btn-sm bg-cyber-border text-cyber-accent"
                     hx-get="/qualys/asset/{{ qid }}" hx-target="#qualys-detail" hx-swap="innerHTML"
-                    onclick="document.getElementById('qualys-detail').style.display='block'; window.scrollTo({top:0,behavior:'smooth'})">Détail</button>
+                    hx-indicator="#detail-loading"
+                    onclick="document.getElementById('qualys-detail').style.display='block'; document.getElementById('detail-loading').style.display='flex'; window.scrollTo({top:0,behavior:'smooth'})">Détail</button>
                 {% endif %}
             </td>
         </tr>
@@ -202,4 +213,14 @@ function updateBulkTag() {
     </table>
 </div>
 {% endif %}
+<script>
+document.body.addEventListener('htmx:afterSwap', function(e) {
+    if (e.detail.target.id === 'vuln-detail') {
+        document.getElementById('vuln-loading').style.display = 'none';
+    }
+    if (e.detail.target.id === 'qualys-detail') {
+        document.getElementById('detail-loading').style.display = 'none';
+    }
+});
+</script>
 {% endblock %}