45 lines
985 B
JavaScript
45 lines
985 B
JavaScript
import { useState, useEffect } from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import Link from 'next/link'
|
|
|
|
const About = (props) => {
|
|
const [loaded, setLoaded] = useState(false)
|
|
const { pageTransitionReadyToEnter } = props
|
|
|
|
useEffect(() => {
|
|
const timeoutId = setTimeout(() => {
|
|
pageTransitionReadyToEnter()
|
|
setLoaded(true)
|
|
}, 2000)
|
|
return () => {
|
|
clearTimeout(timeoutId)
|
|
}
|
|
}, [pageTransitionReadyToEnter])
|
|
|
|
if (!loaded) return null
|
|
|
|
return (
|
|
<div className="container bg-success page">
|
|
<h1>About us</h1>
|
|
<p>
|
|
Notice how a loading spinner showed up while my content was "loading"?
|
|
Pretty neat, huh?
|
|
</p>
|
|
<Link href="/" className="btn btn-light">
|
|
Go back home
|
|
</Link>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
About.propTypes = {
|
|
pageTransitionReadyToEnter: PropTypes.func,
|
|
}
|
|
|
|
About.defaultProps = {
|
|
pageTransitionReadyToEnter: () => {},
|
|
}
|
|
|
|
About.pageTransitionDelayEnter = true
|
|
|
|
export default About
|