57 lines
1.3 KiB
JavaScript
57 lines
1.3 KiB
JavaScript
import { useState, useEffect } from 'react'
|
|
import { Flex, Card, Alert } from 'antd'
|
|
import { LoadingOutlined } from '@ant-design/icons'
|
|
import AuthParticles from './AppParticles'
|
|
import FarmControlLogo from '../Logos/FarmControlLogo'
|
|
|
|
const AppLoading = () => {
|
|
const [isVisible, setIsVisible] = useState(false)
|
|
|
|
useEffect(() => {
|
|
const timer = setTimeout(() => {
|
|
setIsVisible(true)
|
|
}, 1000)
|
|
|
|
return () => clearTimeout(timer)
|
|
}, [])
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
backgroundColor: 'black'
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
backgroundColor: 'black',
|
|
minHeight: '100vh',
|
|
transition: 'opacity 0.5s ease-in-out',
|
|
opacity: isVisible ? 1 : 0
|
|
}}
|
|
>
|
|
<AuthParticles />
|
|
<Flex
|
|
align='center'
|
|
justify='center'
|
|
vertical
|
|
style={{ height: '100vh' }}
|
|
gap={'large'}
|
|
>
|
|
<Card style={{ borderRadius: 20 }}>
|
|
<Flex vertical align='center'>
|
|
<FarmControlLogo style={{ fontSize: '500px', height: '40px' }} />
|
|
</Flex>
|
|
</Card>
|
|
<Alert
|
|
message='Loading Farm Control please wait...'
|
|
icon={<LoadingOutlined />}
|
|
showIcon
|
|
/>
|
|
</Flex>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default AppLoading
|