aboutsummaryrefslogtreecommitdiffstats
path: root/src/views/components
diff options
context:
space:
mode:
authorLibravatar Mo Tarbin <mhed.t91@gmail.com>2024-07-16 19:37:18 -0400
committerLibravatar Mo Tarbin <mhed.t91@gmail.com>2024-07-16 19:37:18 -0400
commit7f4e5928492a71135f6817874461c80a0ecc155c (patch)
tree1527356c61e0bc11e4fbc3d3d19bdf17d11596c9 /src/views/components
parent93512eb6665e7d35660db133319be54ed1c09232 (diff)
downloaddonetick-frontend-7f4e5928492a71135f6817874461c80a0ecc155c.tar.gz
donetick-frontend-7f4e5928492a71135f6817874461c80a0ecc155c.tar.bz2
donetick-frontend-7f4e5928492a71135f6817874461c80a0ecc155c.zip
Add SkipChore function to Fetcher utility module, Update Loading Comp
Diffstat (limited to '')
-rw-r--r--src/views/components/Loading.jsx51
1 files changed, 51 insertions, 0 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