import { Box, Typography } from '@material-ui/core' import { ReactElement, useContext, useEffect, useState } from 'react' import { useNavigate } from 'react-router' import { Loading } from '../../components/Loading' import { Context } from '../../providers/Bee' import { ROUTES } from '../../routes' export default function Settings(): ReactElement { const [waited, setWaited] = useState(false) const { apiHealth } = useContext(Context) const navigate = useNavigate() useEffect(() => { if (waited) { return } const timeout = setTimeout(() => setWaited(true), 5_000) return () => clearTimeout(timeout) }, [waited]) useEffect(() => { if (!waited) { return } if (apiHealth) { navigate(ROUTES.INFO) } }, [navigate, waited, apiHealth]) return ( <> <Box mb={4}> <Loading /> </Box> <Typography>You will be redirected automatically once your node is up and running.</Typography> </> ) }