From 889dfca36cd739c2a02241386ef46402b3e5ed4c Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Sat, 7 Mar 2026 07:43:00 -0600
Subject: [PATCH] Frontend fixes (#22309)

* prevent unnecessary reloads in useUserPersistence hook

* always render ProtectedRoute (handling undefined roles internally) and add Suspense fallback

* add missing i18n namespaces

react 19 enforces Suspense more strictly, so components using useTranslation() with unloaded namespaces would suspend, blanking the content behind the empty Suspense fallback

* add missing namespace

* remove unneeded

* remove modal from actions dropdown
---
 web/src/App.tsx                               | 29 +++++++------------
 web/src/components/auth/ProtectedRoute.tsx    |  9 +++++-
 .../components/overlay/ActionsDropdown.tsx    |  2 +-
 web/src/hooks/use-user-persistence.ts         |  5 ++++
 web/src/utils/i18n.ts                         | 18 ++++++++----
 5 files changed, 38 insertions(+), 25 deletions(-)

diff --git a/web/src/App.tsx b/web/src/App.tsx
index 21babc2b9..01c415de4 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -11,7 +11,6 @@ import { Redirect } from "./components/navigation/Redirect";
 import { cn } from "./lib/utils";
 import { isPWA } from "./utils/isPWA";
 import ProtectedRoute from "@/components/auth/ProtectedRoute";
-import { AuthProvider } from "@/context/auth-context";
 import useSWR from "swr";
 import { FrigateConfig } from "./types/frigateConfig";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
@@ -39,13 +38,11 @@ function App() {
 
   return (
     <Providers>
-      <AuthProvider>
-        <BrowserRouter basename={window.baseUrl}>
-          <Wrapper>
-            {config?.safe_mode ? <SafeAppView /> : <DefaultAppView />}
-          </Wrapper>
-        </BrowserRouter>
-      </AuthProvider>
+      <BrowserRouter basename={window.baseUrl}>
+        <Wrapper>
+          {config?.safe_mode ? <SafeAppView /> : <DefaultAppView />}
+        </Wrapper>
+      </BrowserRouter>
     </Providers>
   );
 }
@@ -85,17 +82,13 @@ function DefaultAppView() {
             : "bottom-8 left-[52px]",
         )}
       >
-        <Suspense>
+        <Suspense
+          fallback={
+            <ActivityIndicator className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
+          }
+        >
           <Routes>
-            <Route
-              element={
-                mainRouteRoles ? (
-                  <ProtectedRoute requiredRoles={mainRouteRoles} />
-                ) : (
-                  <ActivityIndicator className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
-                )
-              }
-            >
+            <Route element={<ProtectedRoute requiredRoles={mainRouteRoles} />}>
               <Route index element={<Live />} />
               <Route path="/review" element={<Events />} />
               <Route path="/explore" element={<Explore />} />
diff --git a/web/src/components/auth/ProtectedRoute.tsx b/web/src/components/auth/ProtectedRoute.tsx
index a7d1b3596..bcfa8fdf3 100644
--- a/web/src/components/auth/ProtectedRoute.tsx
+++ b/web/src/components/auth/ProtectedRoute.tsx
@@ -10,7 +10,7 @@ import {
 export default function ProtectedRoute({
   requiredRoles,
 }: {
-  requiredRoles: string[];
+  requiredRoles?: string[];
 }) {
   const { auth } = useContext(AuthContext);
 
@@ -36,6 +36,13 @@ export default function ProtectedRoute({
     );
   }
 
+  // Wait for config to provide required roles
+  if (!requiredRoles) {
+    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" />
diff --git a/web/src/components/overlay/ActionsDropdown.tsx b/web/src/components/overlay/ActionsDropdown.tsx
index d73ae71e3..9ddb0bd35 100644
--- a/web/src/components/overlay/ActionsDropdown.tsx
+++ b/web/src/components/overlay/ActionsDropdown.tsx
@@ -20,7 +20,7 @@ export default function ActionsDropdown({
   const { t } = useTranslation(["components/dialog", "views/replay", "common"]);
 
   return (
-    <DropdownMenu>
+    <DropdownMenu modal={false}>
       <DropdownMenuTrigger asChild>
         <Button
           className="flex items-center gap-2"
diff --git a/web/src/hooks/use-user-persistence.ts b/web/src/hooks/use-user-persistence.ts
index 519a8aa5a..15d819173 100644
--- a/web/src/hooks/use-user-persistence.ts
+++ b/web/src/hooks/use-user-persistence.ts
@@ -116,6 +116,11 @@ export function useUserPersistence<S>(
       return;
     }
 
+    // Skip reload if we're already loaded for this key
+    if (loadedKeyRef.current === namespacedKey) {
+      return;
+    }
+
     // Reset state when key changes - this prevents stale writes
     loadedKeyRef.current = null;
     migrationAttemptedRef.current = false;
diff --git a/web/src/utils/i18n.ts b/web/src/utils/i18n.ts
index 242e09e92..16de6dc40 100644
--- a/web/src/utils/i18n.ts
+++ b/web/src/utils/i18n.ts
@@ -40,23 +40,31 @@ i18n
       "common",
       "objects",
       "audio",
+      "components/auth",
       "components/camera",
       "components/dialog",
       "components/filter",
       "components/icons",
+      "components/input",
       "components/player",
-      "views/events",
       "views/chat",
+      "views/classificationModel",
+      "views/configEditor",
+      "views/events",
       "views/explore",
+      "views/exports",
+      "views/faceLibrary",
       "views/live",
+      "views/motionSearch",
+      "views/recording",
+      "views/replay",
+      "views/search",
       "views/settings",
       "views/system",
-      "views/exports",
-      "views/explore",
-      "config/global",
       "config/cameras",
-      "config/validation",
+      "config/global",
       "config/groups",
+      "config/validation",
     ],
     defaultNS: "common",