diff --git a/src/frontend/src/components/nav/Header.tsx b/src/frontend/src/components/nav/Header.tsx
index b11b76ccc2..4e3eece8bf 100644
--- a/src/frontend/src/components/nav/Header.tsx
+++ b/src/frontend/src/components/nav/Header.tsx
@@ -47,6 +47,10 @@ export function Header() {
queryKey: ['notification-count'],
enabled: isLoggedIn(),
queryFn: async () => {
+ if (!isLoggedIn()) {
+ return null;
+ }
+
try {
const params = {
params: {
@@ -62,7 +66,7 @@ export function Header() {
setNotificationCount(response?.data?.count ?? 0);
return response?.data ?? null;
} catch (error) {
- return error;
+ return null;
}
},
refetchInterval: 30000,
diff --git a/src/frontend/src/components/nav/InstanceDetail.tsx b/src/frontend/src/components/nav/InstanceDetail.tsx
index 3ee9a1cf51..1baeb669a5 100644
--- a/src/frontend/src/components/nav/InstanceDetail.tsx
+++ b/src/frontend/src/components/nav/InstanceDetail.tsx
@@ -1,5 +1,6 @@
import { LoadingOverlay } from '@mantine/core';
+import { useUserState } from '../../states/UserState';
import ClientError from '../errors/ClientError';
import ServerError from '../errors/ServerError';
@@ -12,7 +13,9 @@ export default function InstanceDetail({
loading: boolean;
children: React.ReactNode;
}) {
- if (loading) {
+ const user = useUserState();
+
+ if (loading || !user.isLoggedIn()) {
return ;
}
diff --git a/src/frontend/src/pages/Index/Settings/AdminCenter/Index.tsx b/src/frontend/src/pages/Index/Settings/AdminCenter/Index.tsx
index db032db503..fc0ad6ad7b 100644
--- a/src/frontend/src/pages/Index/Settings/AdminCenter/Index.tsx
+++ b/src/frontend/src/pages/Index/Settings/AdminCenter/Index.tsx
@@ -1,5 +1,13 @@
import { Trans, t } from '@lingui/macro';
-import { Divider, Paper, SimpleGrid, Stack, Text, Title } from '@mantine/core';
+import {
+ Divider,
+ Paper,
+ SimpleGrid,
+ Skeleton,
+ Stack,
+ Text,
+ Title
+} from '@mantine/core';
import {
IconCoins,
IconCpu,
@@ -201,6 +209,10 @@ export default function AdminCenter() {
);
+ if (!user.isLoggedIn()) {
+ return ;
+ }
+
return (
<>
{user.isStaff() ? (
diff --git a/src/frontend/src/pages/Index/Settings/SystemSettings.tsx b/src/frontend/src/pages/Index/Settings/SystemSettings.tsx
index 14f96f2495..a9efa01aad 100644
--- a/src/frontend/src/pages/Index/Settings/SystemSettings.tsx
+++ b/src/frontend/src/pages/Index/Settings/SystemSettings.tsx
@@ -1,5 +1,5 @@
import { Trans, t } from '@lingui/macro';
-import { Stack } from '@mantine/core';
+import { Skeleton, Stack } from '@mantine/core';
import {
IconBellCog,
IconCategory,
@@ -306,6 +306,10 @@ export default function SystemSettings() {
const [server] = useServerApiState((state) => [state.server]);
+ if (!user.isLoggedIn()) {
+ return ;
+ }
+
return (
<>
{user.isStaff() ? (
diff --git a/src/frontend/src/pages/Index/Settings/UserSettings.tsx b/src/frontend/src/pages/Index/Settings/UserSettings.tsx
index f585000d5d..03c6b66e9f 100644
--- a/src/frontend/src/pages/Index/Settings/UserSettings.tsx
+++ b/src/frontend/src/pages/Index/Settings/UserSettings.tsx
@@ -1,5 +1,5 @@
import { Trans, t } from '@lingui/macro';
-import { Stack } from '@mantine/core';
+import { Skeleton, Stack } from '@mantine/core';
import {
IconBellCog,
IconDeviceDesktop,
@@ -23,6 +23,11 @@ import { AccountContent } from './AccountSettings/UserPanel';
* User settings page
*/
export default function UserSettings() {
+ const [user, isLoggedIn] = useUserState((state) => [
+ state.user,
+ state.isLoggedIn
+ ]);
+
const userSettingsPanels: PanelType[] = useMemo(() => {
return [
{
@@ -109,7 +114,10 @@ export default function UserSettings() {
}
];
}, []);
- const [user] = useUserState((state) => [state.user]);
+
+ if (!isLoggedIn()) {
+ return ;
+ }
return (
<>
diff --git a/src/frontend/src/pages/part/PartDetail.tsx b/src/frontend/src/pages/part/PartDetail.tsx
index c569cd414d..41a51ef9e5 100644
--- a/src/frontend/src/pages/part/PartDetail.tsx
+++ b/src/frontend/src/pages/part/PartDetail.tsx
@@ -23,7 +23,7 @@ import {
IconVersions
} from '@tabler/icons-react';
import { useSuspenseQuery } from '@tanstack/react-query';
-import { ReactNode, useEffect, useMemo, useState } from 'react';
+import { ReactNode, useMemo, useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { api } from '../../App';