From d6790e9b440e26567b17a966a5371c1131ec4708 Mon Sep 17 00:00:00 2001
From: jeremy bayse <jeremy.bayse@gmail.com>
Date: Wed, 24 Jun 2026 07:02:30 +0200
Subject: [PATCH] feat: add spinner loading animations and disable state to
 indexation buttons

---
 .../views/livewire/admin-dashboard.blade.php  | 56 +++++++++++++------
 1 file changed, 40 insertions(+), 16 deletions(-)

diff --git a/resources/views/livewire/admin-dashboard.blade.php b/resources/views/livewire/admin-dashboard.blade.php
index 2c45670..19ba928 100644
--- a/resources/views/livewire/admin-dashboard.blade.php
+++ b/resources/views/livewire/admin-dashboard.blade.php
@@ -75,19 +75,33 @@
             </div>
             <button 
                 type="submit" 
-                class="w-full bg-slate-900 hover:bg-slate-800 border border-slate-800 hover:border-slate-700 text-slate-200 font-medium py-2 px-3 rounded-lg transition text-xs flex items-center justify-center gap-1.5"
+                wire:loading.attr="disabled"
+                class="w-full bg-slate-900 hover:bg-slate-800 border border-slate-800 hover:border-slate-700 text-slate-200 font-medium py-2 px-3 rounded-lg transition text-xs flex items-center justify-center gap-1.5 disabled:opacity-50 disabled:cursor-not-allowed"
             >
-                @if($crawlEntireSite)
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 1121.21 7.89L21 8" />
+                <span wire:loading.remove wire:target="ingestUrl" class="flex items-center justify-center gap-1.5">
+                    @if($crawlEntireSite)
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 1121.21 7.89L21 8" />
+                        </svg>
+                        Explorer et indexer le site
+                    @else
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
+                        </svg>
+                        Indexer la page
+                    @endif
+                </span>
+                <span wire:loading wire:target="ingestUrl" class="flex items-center justify-center gap-1.5">
+                    <svg class="animate-spin h-3.5 w-3.5 text-slate-400" fill="none" viewBox="0 0 24 24">
+                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                     </svg>
-                    Explorer et indexer le site
-                @else
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
-                    </svg>
-                    Indexer la page
-                @endif
+                    @if($crawlEntireSite)
+                        Exploration & indexation...
+                    @else
+                        Indexation...
+                    @endif
+                </span>
             </button>
         </form>
 
@@ -122,12 +136,22 @@
             </div>
             <button 
                 type="submit" 
-                class="w-full bg-slate-900 hover:bg-slate-800 border border-slate-800 hover:border-slate-700 text-slate-200 font-medium py-2 px-3 rounded-lg transition text-xs flex items-center justify-center gap-1.5"
+                wire:loading.attr="disabled"
+                class="w-full bg-slate-900 hover:bg-slate-800 border border-slate-800 hover:border-slate-700 text-slate-200 font-medium py-2 px-3 rounded-lg transition text-xs flex items-center justify-center gap-1.5 disabled:opacity-50 disabled:cursor-not-allowed"
             >
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
-                </svg>
-                Indexer le document
+                <span wire:loading.remove wire:target="ingestPdf" class="flex items-center justify-center gap-1.5">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+                    </svg>
+                    Indexer le document
+                </span>
+                <span wire:loading wire:target="ingestPdf" class="flex items-center justify-center gap-1.5">
+                    <svg class="animate-spin h-3.5 w-3.5 text-slate-400" fill="none" viewBox="0 0 24 24">
+                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                    </svg>
+                    Indexation du PDF...
+                </span>
             </button>
         </form>
     </div>