From 1526d2514446fafba5fcb3feb0adf1c53e494789 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Br=C3=BCckner?= <j.brueckner@airitsystems.de>
Date: Mon, 8 Jun 2026 13:59:03 +0200
Subject: [PATCH] fix(caddy): decouple status check from routes fetch, use
 useEffect for load trigger

Routes now load immediately from DB without waiting for the Caddy Admin API
status check (which can take up to 2s timeout). A dedicated useEffect on
caddyEnabled replaces the unreliable fire-and-forget call inside loadSettings.
---
 src/components/Settings.tsx | 37 ++++++++++++++++---------------------
 1 file changed, 16 insertions(+), 21 deletions(-)

diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx
index 886cd53..4aa9b5c 100644
--- a/src/components/Settings.tsx
+++ b/src/components/Settings.tsx
@@ -223,6 +223,10 @@ export default function Settings({ currentUser: _currentUser }: SettingsProps) {
       .catch(() => {});
   }, []);
 
+  useEffect(() => {
+    if (caddyEnabled) loadCaddyRoutes();
+  }, [caddyEnabled]);
+
   async function loadSettings() {
     setLoading(true);
     setError('');
@@ -255,7 +259,6 @@ export default function Settings({ currentUser: _currentUser }: SettingsProps) {
       setSemaphoreProjectId(data.semaphore_project_id || '');
       setCaddyEnabled(data.caddy_enabled === 'true');
       setCaddyAdminUrl(data.caddy_admin_url || 'http://localhost:2019');
-      if (data.caddy_enabled === 'true') loadCaddyRoutes();
     } catch {
       setError('Network error loading settings.');
     } finally {
@@ -357,25 +360,17 @@ export default function Settings({ currentUser: _currentUser }: SettingsProps) {
   }
 
   async function loadCaddyRoutes() {
-    const [statusResult, routesResult] = await Promise.allSettled([
-      authFetch('/api/caddy/status'),
-      authFetch('/api/caddy/routes'),
-    ]);
-    if (statusResult.status === 'fulfilled' && statusResult.value.ok) {
-      try {
-        const s = await statusResult.value.json();
-        setCaddyStatus(s.available ? 'available' : 'unavailable');
-      } catch {
-        setCaddyStatus('unavailable');
-      }
-    } else {
-      setCaddyStatus('unavailable');
-    }
-    if (routesResult.status === 'fulfilled' && routesResult.value.ok) {
-      try {
-        setCaddyRoutes(await routesResult.value.json());
-      } catch {}
-    }
+    // Status check is background — never blocks route display
+    authFetch('/api/caddy/status')
+      .then(res => res.ok ? res.json() : null)
+      .then(s => setCaddyStatus(s?.available ? 'available' : 'unavailable'))
+      .catch(() => setCaddyStatus('unavailable'));
+
+    // Routes load immediately from DB
+    try {
+      const res = await authFetch('/api/caddy/routes');
+      if (res.ok) setCaddyRoutes(await res.json());
+    } catch {}
   }
 
   async function handleAddRoute() {
@@ -918,7 +913,7 @@ export default function Settings({ currentUser: _currentUser }: SettingsProps) {
             </span>
             <button
               type="button"
-              onClick={() => { setCaddyEnabled(v => !v); if (!caddyEnabled) loadCaddyRoutes(); }}
+              onClick={() => setCaddyEnabled((v: boolean) => !v)}
               className={`relative w-10 h-5 rounded-full transition-all duration-200 focus:outline-none ${caddyEnabled ? 'bg-sky-600 shadow-[0_0_10px_rgba(2,132,199,0.4)]' : 'bg-slate-800 border border-slate-700'}`}
             >
               <span className={`absolute top-0.5 w-4 h-4 bg-white rounded-full shadow transition-all duration-200 ${caddyEnabled ? 'left-5' : 'left-0.5'}`} />