From c636268569fbc910b55201eaaa4ae82075353eba Mon Sep 17 00:00:00 2001
From: Pulse Monitor <pulse@pulse-monitor.dev>
Date: Sat, 16 Aug 2025 18:47:08 +0000
Subject: [PATCH] fix: add Suspense boundary for lazy-loaded FirstRunSetup
 component

Added proper Suspense wrapper around the lazy-loaded FirstRunSetup component to ensure it loads correctly in production builds. Also added debug logging to help diagnose auth flow issues during development.
---
 frontend-modern/src/App.tsx              |  3 +++
 frontend-modern/src/components/Login.tsx | 26 +++++++++++++++++++++---
 2 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/frontend-modern/src/App.tsx b/frontend-modern/src/App.tsx
index 7bd2bde81..ef9393a94 100644
--- a/frontend-modern/src/App.tsx
+++ b/frontend-modern/src/App.tsx
@@ -98,15 +98,18 @@ function App() {
   
   // Check auth on mount
   onMount(async () => {
+    console.log('[App] Starting auth check...');
     // First check security status to see if auth is configured
     try {
       const securityRes = await fetch('/api/security/status');
       const securityData = await securityRes.json();
+      console.log('[App] Security status:', securityData);
       const authConfigured = securityData.hasAuthentication || false;
       setHasAuth(authConfigured);
       
       // If no auth is configured, show FirstRunSetup
       if (!authConfigured) {
+        console.log('[App] No auth configured, showing Login/FirstRunSetup');
         setNeedsAuth(true); // This will show the Login component which shows FirstRunSetup
         setIsLoading(false);
         return;
diff --git a/frontend-modern/src/components/Login.tsx b/frontend-modern/src/components/Login.tsx
index 69a0168ef..600bfb374 100644
--- a/frontend-modern/src/components/Login.tsx
+++ b/frontend-modern/src/components/Login.tsx
@@ -1,4 +1,4 @@
-import { Component, createSignal, Show, onMount, lazy } from 'solid-js';
+import { Component, createSignal, Show, onMount, lazy, Suspense } from 'solid-js';
 import { setBasicAuth } from '@/utils/apiClient';
 
 // Force include FirstRunSetup with lazy loading
@@ -17,20 +17,25 @@ export const Login: Component<LoginProps> = (props) => {
   const [loadingAuth, setLoadingAuth] = createSignal(true);
   
   onMount(async () => {
+    console.log('[Login] Starting auth check...');
     try {
       const response = await fetch('/api/security/status');
+      console.log('[Login] Auth check response:', response.status);
       if (response.ok) {
         const data = await response.json();
+        console.log('[Login] Auth status data:', data);
         setAuthStatus(data);
       } else {
+        console.log('[Login] Auth check failed, assuming no auth');
         // On error, assume no auth configured
         setAuthStatus({ hasAuthentication: false });
       }
     } catch (err) {
-      console.error('Failed to check auth status:', err);
+      console.error('[Login] Failed to check auth status:', err);
       // On error, assume no auth configured
       setAuthStatus({ hasAuthentication: false });
     } finally {
+      console.log('[Login] Auth check complete, setting loading to false');
       setLoadingAuth(false);
     }
   });
@@ -70,6 +75,9 @@ export const Login: Component<LoginProps> = (props) => {
     }
   };
 
+  // Debug logging
+  console.log('[Login] Render - loadingAuth:', loadingAuth(), 'authStatus:', authStatus());
+  
   // Show loading state while checking auth status
   if (loadingAuth()) {
     return (
@@ -86,7 +94,19 @@ export const Login: Component<LoginProps> = (props) => {
   const status = authStatus();
   
   if (status && status.hasAuthentication === false) {
-    return <FirstRunSetup />;
+    console.log('[Login] Showing FirstRunSetup because hasAuthentication is false');
+    return (
+      <Suspense fallback={
+        <div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 via-white to-cyan-50 dark:from-gray-900 dark:via-gray-800 dark:to-blue-900">
+          <div class="text-center">
+            <div class="animate-spin h-12 w-12 border-4 border-blue-500 border-t-transparent rounded-full mx-auto mb-4"></div>
+            <p class="text-gray-600 dark:text-gray-400">Loading setup...</p>
+          </div>
+        </div>
+      }>
+        <FirstRunSetup />
+      </Suspense>
+    );
   }
 
   // Show login form if authentication is configured