minor improvements to UI loading

Author: Veikkosuhonen

src/client/App.tsx

@@ -1,15 +1,14 @@
-import { Box, Button, CssBaseline, Snackbar } from '@mui/material'
+import { Box, Button, CircularProgress, CssBaseline, Snackbar } from '@mui/material'
 import { ThemeProvider } from '@mui/material/styles'
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3'
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'
 import { fi } from 'date-fns/locale'
 import { SnackbarProvider } from 'notistack'
 import React, { useEffect, useRef } from 'react'
-import { Outlet, useLocation, useParams } from 'react-router-dom'
+import { Navigate, Outlet, useLocation, useParams } from 'react-router-dom'
 import { initShibbolethPinger } from 'unfuck-spa-shibboleth-session'
 import { PUBLIC_URL } from '../config'
 import { Feedback } from './components/Feedback'
-import Footer from './components/Footer'
 import NavBar from './components/NavBar'
 import { AppContext } from './contexts/AppContext'
 import { EmbeddedProvider, useIsEmbedded } from './contexts/EmbeddedContext'
@@ -75,23 +74,10 @@ const AdminLoggedInAsBanner = () => {
 const App = () => {
   useUpdateUrlLang()
   const theme = useTheme()
-  const { courseId } = useParams()
-  const location = useLocation()
-  const { user, isLoading } = useCurrentUser()
 
   useEffect(() => {
     initShibbolethPinger()
   }, [])
-  const onNoAccessPage = location.pathname.includes('/noaccess')
-
-  if (isLoading && !onNoAccessPage) return null
-
-  if (!onNoAccessPage && !hasAccess(user, courseId)) {
-    window.location.href = PUBLIC_URL + getRedirect(user)
-    return null
-  }
-
-  if (!user && !onNoAccessPage) return null
 
   return (
     <ThemeProvider theme={theme}>
@@ -127,7 +113,7 @@ const Layout = () => {
       >
         {!isEmbedded && <NavBar />}
         <Box sx={{ flex: 1 }}>
-          <Outlet />
+          <Content />
         </Box>
         <Feedback />
       </Box>
@@ -136,4 +122,26 @@ const Layout = () => {
   )
 }
 
+const Content = () => {
+  const { courseId } = useParams()
+  const location = useLocation()
+  const { user, isLoading } = useCurrentUser()
+
+  const onNoAccessPage = location.pathname.includes('/noaccess')
+
+  if (isLoading && !onNoAccessPage) return <CircularProgress sx={{ margin: 'auto' }} />
+
+  if (!onNoAccessPage && !hasAccess(user, courseId)) {
+    return <Navigate to={PUBLIC_URL + getRedirect(user)} />
+  }
+
+  if (!user && !onNoAccessPage) return null
+
+  return (
+    <Box sx={{ flex: 1 }}>
+      <Outlet />
+    </Box>
+  )
+}
+
 export default App

src/client/components/Feedback.tsx

@@ -7,7 +7,7 @@ import apiClient from '../util/apiClient'
 import { addJustInTimeFields, useAnalytics } from '../stores/analytics'
 import type { FeedbackPost } from '../../shared/feedback'
 import { useSnackbar } from 'notistack'
-import { BlueButton, OutlineButtonBlack, OutlineButtonBlue } from './ChatV2/general/Buttons'
+import { BlueButton, OutlineButtonBlack } from './ChatV2/general/Buttons'
 
 const useSubmitFeedbackMutation = () => {
   const analyticsMetadata = useAnalytics()

src/client/components/NavBar/index.tsx

@@ -37,17 +37,14 @@ const NavBar = () => {
   const isDesktopDevice = useMediaQuery(theme.breakpoints.up('lg'))
   const { language } = i18n
   const languages = ['fi', 'sv', 'en']
-  const { user, isLoading } = useCurrentUser()
+  const { user } = useCurrentUser()
   // will be changed to use url to change language and moved up to app since language is global
   const handleLanguageChange = (newLanguage: string) => {
     i18n.changeLanguage(newLanguage)
   }
   useEffect(() => {
     setNavPanelOpen(false)
   }, [isDesktopDevice])
-  if (isLoading) return null
-
-  if (!user) return null
 
   return (
     <>
@@ -116,14 +113,16 @@ const NavItems = ({ user, t, languages, handleLanguageChange, language, vertical
   const { pathname } = useLocation()
   const [openLanguageSelect, setOpenLanguageSelect] = useState(false)
 
+  if (!user) return null
+
   return (
     <>
-      {user?.preferences?.chatVersion !== 2 && (
+      {user.preferences?.chatVersion !== 2 && (
         <NavItemButton to="/v2" path="v2/*" current={pathname} icon={<GradeOutlined sx={styles.icon} />} vertical={vertical}>
           {t('tryNew')}
         </NavItemButton>
       )}
-      {user?.preferences?.chatVersion !== 1 && (
+      {user.preferences?.chatVersion !== 1 && (
         <NavItemButton to="/v1" path="v1/*" current={pathname} icon={<GradeOutlined sx={styles.icon} />} vertical={vertical}>
           {t('useOld')}
         </NavItemButton>