2 files changed, 59 insertions, 2 deletions
diff --git a/src/views/components/Loading.jsx b/src/views/components/Loading.jsx
new file mode 100644
index 0000000..a31cf20
--- /dev/null
+++ b/src/views/components/Loading.jsx
@@ -0,0 +1,51 @@
+import { Box, CircularProgress, Container } from '@mui/joy'
+import { Typography } from '@mui/material'
+import { useEffect, useState } from 'react'
+import Logo from '../../Logo'
+
+const LoadingComponent = () => {
+  const [message, setMessage] = useState('Loading...')
+  const [subMessage, setSubMessage] = useState('')
+  useEffect(() => {
+    // if loading took more than 5 seconds update submessage to mention there might be an error:
+    const timeout = setTimeout(() => {
+      setSubMessage(
+        'This is taking longer than usual. There might be an issue.',
+      )
+    }, 5000)
+    return () => clearTimeout(timeout)
+  }, [])
+
+  return (
+    <Container className='flex h-full items-center justify-center'>
+      <Box
+        className='flex flex-col items-center justify-center'
+        sx={{
+          minHeight: '80vh',
+        }}
+      >
+        <CircularProgress
+          color='success'
+          sx={{ '--CircularProgress-size': '200px' }}
+        >
+          <Logo />
+        </CircularProgress>
+        <Box
+          className='flex items-center gap-2'
+          sx={{
+            fontWeight: 700,
+            fontSize: 24,
+            mt: 2,
+          }}
+        >
+          {message}
+        </Box>
+        <Typography level='h2' fontWeight={500} textAlign={'center'}>
+          {subMessage}
+        </Typography>
+      </Box>
+    </Container>
+  )
+}
+
+export default LoadingComponent
diff --git a/src/views/components/NavBar.jsx b/src/views/components/NavBar.jsx
index 2da09f5..d3708ae 100644
--- a/src/views/components/NavBar.jsx
+++ b/src/views/components/NavBar.jsx
@@ -21,7 +21,7 @@ import {
   Typography,
 } from '@mui/joy'
 import { useState } from 'react'
-import { useLocation } from 'react-router-dom'
+import { useLocation, useNavigate } from 'react-router-dom'
 import { version } from '../../../package.json'
 import NavBarLink from './NavBarLink'
 const links = [
@@ -63,6 +63,7 @@ const links = [
 ]
 
 const NavBar = () => {
+  const navigate = useNavigate()
   const [drawerOpen, setDrawerOpen] = useState(false)
   const [openDrawer, closeDrawer] = [
     () => setDrawerOpen(true),
@@ -89,7 +90,12 @@ const NavBar = () => {
       <IconButton size='sm' variant='plain' onClick={() => setDrawerOpen(true)}>
         <MenuRounded />
       </IconButton>
-      <Box className='flex items-center gap-2'>
+      <Box
+        className='flex items-center gap-2'
+        onClick={() => {
+          navigate('/my/chores')
+        }}
+      >
         <img component='img' src={Logo} width='34' />
         <Typography
           level='title-lg'