import React from 'react'
import {
    Spinner,
    Container,
    Center,
    useColorMode
} from '@chakra-ui/react'

export const PageLoader = () => {
    const { colorMode } = useColorMode();
    
    return (
        <Container maxW="container.xl">
            <Center h="300px">
                <Spinner
                    thickness="4px"
                    speed="0.65s"
                    emptyColor={colorMode === 'light' ? 'gray.200' : 'gray.600'}
                    color={colorMode === 'light' ? 'blue.500' : 'blue.300'}
                    size="xl"
                />
            </Center>
        </Container>
    )
}
