From 495ee0161b3e0b6f91d0f14e665beaa71808885a Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Fri, 9 Jan 2026 06:46:20 -0600
Subject: [PATCH] prevent react Suspense crash during auth redirect

add redirect-check guards to stop rendering lazy routes while navigation is pending (fixes some users seeing React error #426 when auth expires)
---
 web/src/App.tsx                            | 11 +++++++++++
 web/src/components/auth/ProtectedRoute.tsx |  8 ++++++++
 2 files changed, 19 insertions(+)

diff --git a/web/src/App.tsx b/web/src/App.tsx
index b458d9ec3..d7a9ec3e9 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -15,6 +15,7 @@ import { AuthProvider } from "@/context/auth-context";
 import useSWR from "swr";
 import { FrigateConfig } from "./types/frigateConfig";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
+import { isRedirectingToLogin } from "@/api/auth-redirect";
 
 const Live = lazy(() => import("@/pages/Live"));
 const Events = lazy(() => import("@/pages/Events"));
@@ -58,6 +59,16 @@ function DefaultAppView() {
     ? Object.keys(config.auth.roles)
     : undefined;
 
+  // Show loading indicator during redirect to prevent React from attempting to render
+  // lazy components, which would cause error #426 (suspension during synchronous navigation)
+  if (isRedirectingToLogin()) {
+    return (
+      <div className="size-full overflow-hidden">
+        <ActivityIndicator className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
+      </div>
+    );
+  }
+
   return (
     <div className="size-full overflow-hidden">
       {isDesktop && <Sidebar />}
diff --git a/web/src/components/auth/ProtectedRoute.tsx b/web/src/components/auth/ProtectedRoute.tsx
index 55edc60bd..cedf5a15a 100644
--- a/web/src/components/auth/ProtectedRoute.tsx
+++ b/web/src/components/auth/ProtectedRoute.tsx
@@ -28,6 +28,14 @@ export default function ProtectedRoute({
     }
   }, [auth.isLoading, auth.isAuthenticated, auth.user]);
 
+  // Show loading indicator during redirect to prevent React from attempting to render
+  // lazy components, which would cause error #426 (suspension during synchronous navigation)
+  if (isRedirectingToLogin()) {
+    return (
+      <ActivityIndicator className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
+    );
+  }
+
   if (auth.isLoading) {
     return (
       <ActivityIndicator className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />