fix: auto-retry loading servers after 15s timeout (max 5 attempts)

themes/lucentui/views/services/index.blade.php

@@ -1,4 +1,32 @@
-<div class="container mx-auto px-4 py-8 sm:px-6 lg:px-8">
+<div class="container mx-auto px-4 py-8 sm:px-6 lg:px-8"
+     x-data="{
+         retryTimer: null,
+         retrying: false,
+         attempts: 0,
+         maxAttempts: 5,
+         timeoutMs: 15000,
+         startTimer() {
+             this.clearTimer();
+             this.retryTimer = setTimeout(() => { this.retry(); }, this.timeoutMs);
+         },
+         clearTimer() {
+             if (this.retryTimer) { clearTimeout(this.retryTimer); this.retryTimer = null; }
+         },
+         retry() {
+             if (this.attempts >= this.maxAttempts) { this.retrying = false; return; }
+             this.attempts++;
+             this.retrying = true;
+             this.startTimer();
+             $wire.$refresh();
+         }
+     }"
+     x-init="
+         startTimer();
+         Livewire.hook('commit', ({ succeed }) => {
+             succeed(() => { clearTimer(); retrying = false; attempts = 0; });
+         });
+     "
+>
 
     <h1 class="text-3xl lg:text-4xl font-extrabold text-color-base mt-4 mb-8">
         {{ __('navigation.services') }}
@@ -47,6 +75,15 @@
             @endfor
         </div>
 
+        {{-- Retry indicator --}}
+        <div x-show="retrying" x-cloak class="flex items-center justify-center gap-3 py-4 text-sm text-color-muted">
+            <svg class="animate-spin size-5 text-primary" xmlns="http://www.w3.org/2000/svg" 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 12h4z"></path>
+            </svg>
+            <span>Loading took too long — retrying (attempt <span x-text="attempts"></span>/<span x-text="maxAttempts"></span>)...</span>
+        </div>
+
         @forelse ($services as $service)
             <a href="{{ route('services.show', $service) }}" wire:navigate class="block">
                 <div class="bg-gradient-to-br from-background-secondary/50 to-background-secondary/30 hover:bg-secondary/25 border border-neutral/50 p-6 rounded-xl shadow-lg