Tweak checks for error messages (#7598)

* Tweak checks for error messages

- Ensure user is logged in before checking permissions

* Fix <InstanceDetail/>

* Tweak notification check

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,

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 <LoadingOverlay />;
   }
 

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() {
     </Stack>
   );
 
+  if (!user.isLoggedIn()) {
+    return <Skeleton />;
+  }
+
   return (
     <>
       {user.isStaff() ? (

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 <Skeleton />;
+  }
+
   return (
     <>
       {user.isStaff() ? (

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 <Skeleton />;
+  }
 
   return (
     <>

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';