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

This commit is contained in:
Josh Hawkins 2026-03-06 22:57:38 -06:00
parent 22056c3fc1
commit df59442cd0
2 changed files with 19 additions and 19 deletions

View File

@ -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 />} />

View File

@ -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" />