33 lines
866 B
TypeScript
33 lines
866 B
TypeScript
let timeoutId = 0
|
|
const DelayedPingAnimation = ({
|
|
isLoading: isLoading,
|
|
}: {
|
|
isLoading: boolean
|
|
}) => {
|
|
const [showLoading, setShowLoading] = React.useState(false)
|
|
React.useEffect(() => {
|
|
if (!isLoading && showLoading) {
|
|
setShowLoading(isLoading)
|
|
clearTimeout(timeoutId)
|
|
} else if (isLoading && !showLoading) {
|
|
timeoutId = setTimeout(() => {
|
|
setShowLoading(isLoading)
|
|
console.log('setloading')
|
|
}, 300) as unknown as number
|
|
} else if (!isLoading) {
|
|
setShowLoading(isLoading)
|
|
clearTimeout(timeoutId)
|
|
}
|
|
}, [isLoading])
|
|
|
|
if (showLoading && isLoading)
|
|
return (
|
|
<div className="inset-0 absolute flex items-center justify-center">
|
|
<div className="h-16 w-16 bg-pink-600 rounded-full animate-ping"></div>
|
|
</div>
|
|
)
|
|
return null
|
|
}
|
|
|
|
export default DelayedPingAnimation
|