perf: make health check non-blocking for faster page load

Remove isCheckingHealth from the blocking condition so pages render
immediately after auth. Health check now runs in background and shows
a dismissable banner if API is unhealthy instead of full-page spinner.

Author: iamjr15

frontend/src/app/(home)/layout.tsx

@@ -11,8 +11,8 @@ import { DeleteOperationProvider } from '@/contexts/DeleteOperationContext';
 import { BillingProvider } from '@/contexts/BillingContext';
 import { useAccounts } from '@/hooks/use-accounts';
 import { Loader2 } from 'lucide-react';
-import { MaintenancePage } from '@/components/maintenance/maintenance-page';
 import { StatusOverlay } from '@/components/ui/status-overlay';
+import { ApiHealthBanner } from '@/components/ui/api-health-banner';
 import type { IMaintenanceNotice } from '@/lib/edge-flags';
 import { MaintenanceNotice } from './_components/maintenance-notice';
 import { MaintenanceBanner } from './_components/maintenance-banner';
@@ -37,6 +37,7 @@ export default function HomeLayout({
   const { user, isLoaded } = useUser();
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const [isClient, setIsClient] = useState(false);
+  const [showHealthBanner, setShowHealthBanner] = useState(true);
   const pathname = usePathname();
 
   // TODO: Implement maintenance notice fetching from API or server component
@@ -97,27 +98,28 @@ export default function HomeLayout({
     );
   }
 
-  // Enhanced: Show loading state while checking auth or health
-  if (!isClient || !isLoaded || isCheckingHealth) {
+  // Health banner shown when API is unhealthy (non-blocking)
+  const healthBanner = !isApiHealthy && !isCheckingHealth && showHealthBanner ? (
+    <ApiHealthBanner onDismiss={() => setShowHealthBanner(false)} />
+  ) : null;
+
+  // Show loading state while checking auth (health check runs in background)
+  if (!isClient || !isLoaded) {
     return (
       <div className="flex items-center justify-center min-h-screen">
         <Loader2 className="h-8 w-8 animate-spin text-primary" />
       </div>
     );
   }
 
-  // Enhanced: Show maintenance page if API is not healthy
-  if (!isApiHealthy) {
-    return <MaintenancePage />;
-  }
-
   // Enhanced: Graceful degradation - Don't render anything if not authenticated
   // Note: BillingProvider removed from unauthenticated branch - billing is only needed for authenticated users
   if (!user) {
     return (
       <div
         className={`w-full relative min-h-screen ${!isThreadPage ? 'gradient-home-bg' : 'bg-thread-panel'}`}
       >
+        {healthBanner}
         {!isThreadPage && <Navbar sidebarOpen={false} />}
         <div className={isThreadPage ? "pt-0" : "pt-6"}>
           <Suspense fallback={<PageLoadingFallback />}>
@@ -142,6 +144,8 @@ export default function HomeLayout({
         <SidebarInset>
           {/* Enhanced: Maintenance banner */}
           {maintenanceBanner}
+          {/* Health banner when API is unhealthy */}
+          {healthBanner}
 
           <div
             className={`w-full relative min-h-screen ${!isThreadPage ? 'gradient-home-bg' : 'bg-thread-panel'}`}

frontend/src/components/ui/api-health-banner.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import { AlertTriangle, X, RefreshCw } from 'lucide-react';
+import { useApiHealth } from '@/hooks/react-query/usage/use-health';
+import { Button } from '@/components/ui/button';
+
+interface ApiHealthBannerProps {
+  onDismiss: () => void;
+}
+
+export function ApiHealthBanner({ onDismiss }: ApiHealthBannerProps) {
+  const { refetch, isLoading } = useApiHealth();
+
+  return (
+    <div className="bg-yellow-500/10 border-b border-yellow-500/20 px-4 py-3">
+      <div className="max-w-7xl mx-auto flex items-center justify-between gap-4">
+        <div className="flex items-center gap-3">
+          <AlertTriangle className="h-5 w-5 text-yellow-500 flex-shrink-0" />
+          <p className="text-sm text-yellow-200">
+            Some features may be unavailable. We&apos;re working on it.
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => refetch()}
+            disabled={isLoading}
+            className="text-yellow-200 hover:text-yellow-100"
+          >
+            <RefreshCw className={`h-4 w-4 mr-1 ${isLoading ? 'animate-spin' : ''}`} />
+            Retry
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={onDismiss}
+            className="text-yellow-200 hover:text-yellow-100"
+          >
+            <X className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/hooks/react-query/usage/use-health.ts

@@ -11,6 +11,6 @@ export const useApiHealth = createQueryHook(
     staleTime: 5 * 60 * 1000, // 5 minutes - API health doesn't change frequently
     refetchInterval: false, // No wasteful background polling
     refetchOnWindowFocus: true, // Smart: check when user returns to tab
-    retry: 3,
+    retry: 1, // Reduced from 3 to 1 for faster failure (health check is non-blocking now)
   }
 );