aboutsummaryrefslogtreecommitdiffstats
path: root/src/views/components
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--src/views/components/Loading.jsx51
-rw-r--r--src/views/components/NavBar.jsx10
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'