import { LoadingOutlined } from '@ant-design/icons'
import { CSSProperties, memo } from 'react'

import { Flex } from '@components/Grid'

export type SuspenseFallbackProps = {
    style?: CSSProperties
}

export const SuspenseFallback = memo<SuspenseFallbackProps>(({ style }) => (
    <Flex style={{ justifyContent: 'center', alignItems: 'center', minHeight: '400px', ...style }}>
        <LoadingOutlined />
        <div style={{ marginLeft: '10px' }}>Страница загружается, пожалуйста, подождите...</div>
    </Flex>
))

export default SuspenseFallback