Wait for config to load before evaluating route access

Fix race condition where custom role users are temporarily denied access after login while config is still loading. Defer route rendering in DefaultAppView until config is available so the complete role list is known before ProtectedRoute evaluates permissions

web/src/App.tsx

@@ -14,6 +14,7 @@ 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";
 
 const Live = lazy(() => import("@/pages/Live"));
 const Events = lazy(() => import("@/pages/Events"));
@@ -50,6 +51,13 @@ function DefaultAppView() {
   const { data: config } = useSWR<FrigateConfig>("config", {
     revalidateOnFocus: false,
   });
+
+  // Compute required roles for main routes, ensuring we have config first
+  // to prevent race condition where custom roles are temporarily unavailable
+  const mainRouteRoles = config?.auth?.roles
+    ? Object.keys(config.auth.roles)
+    : undefined;
+
   return (
     <div className="size-full overflow-hidden">
       {isDesktop && <Sidebar />}
@@ -68,13 +76,11 @@ function DefaultAppView() {
           <Routes>
             <Route
               element={
-                <ProtectedRoute
-                  requiredRoles={
-                    config?.auth.roles
-                      ? Object.keys(config.auth.roles)
-                      : ["admin", "viewer"]
-                  }
-                />
+                mainRouteRoles ? (
+                  <ProtectedRoute requiredRoles={mainRouteRoles} />
+                ) : (
+                  <ActivityIndicator className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
+                )
               }
             >
               <Route index element={<Live />} />