import { useState } from 'react' ; const Spinner = ( ) => { return ( < div className = "spinner-container" > < div className = "spinner-dot" / > < div className = "spinner-dot" / > < div className = "spinner-dot" / > < /div>); } ; const LoadingButton = ( { onClick , children , ... props } ) => { const [ isLoading , setLoading ] = useState ( false ) ; const onPressHandler = async ( e ) => { if ( isLoading ) return ; setLoading ( true ) ; if ( onClick ) { await onClick ( e ) ; } setLoading ( false ) ; } ; return ( < div onClick = { onPressHandler } { ... props } > { isLoading ? < Spinner / > : children } < /div>); } ; export default LoadingButton ;