import React, { ReactElement } from 'react';
import { Container, Box, CircularProgress, Typography } from '@mui/material';

const DashboardLoading = (): ReactElement => {
  return (
    <Container maxWidth="md" sx={{ mt: 8, mb: 4, textAlign: 'center' }}>
      <Box
        display="flex"
        flexDirection="column"
        alignItems="center"
        justifyContent="center"
        minHeight="60vh" // Give it some vertical height
      >
        <CircularProgress size={60} sx={{ mb: 3 }} />
        <Typography variant="h5" color="text.secondary">
          Loading your dashboard...
        </Typography>
        <Typography variant="body1" color="text.secondary" sx={{ mt: 1 }}>
          Please wait while we fetch the latest data.
        </Typography>
      </Box>
    </Container>
  );
};

export default DashboardLoading;
