let timeoutId = 0 ; const DelayedPingAnimation = ( { isLoading : isLoading , } ) => { const [ showLoading , setShowLoading ] = React . useState ( false ) ; React . useEffect ( ( ) => { if ( ! isLoading && showLoading ) { setShowLoading ( isLoading ) ; clearTimeout ( timeoutId ) ; } else if ( isLoading && ! showLoading ) { timeoutId = setTimeout ( ( ) => { setShowLoading ( isLoading ) ; } , 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 pointer-events-none" > < div className = "h-16 w-16 bg-pink-600 rounded-full animate-ping" > < /div> < /div>); return null ; } ; export default DelayedPingAnimation ;