aboutsummaryrefslogtreecommitdiffstats
path: root/src/views/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/views/components')
-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