import type { LoadingButtonProps } from '@mui/lab/LoadingButton' ; import LoadingButton from '@mui/lab/LoadingButton' ; import { memo , useCallback , useState , forwardRef } from 'react' ; import { CircularProgress } from '@mui/material' ; interface MaskLoadingButtonProps extends Exclude < LoadingButtonProps , 'loading' | 'component' > { onClick ( event ) : Promise < unknown > ; soloLoading ? : boolean ; } export const MaskLoadingButton = memo ( forwardRef < HTMLButtonElement , MaskLoadingButtonProps > ( ( props , ref ) => { const { onClick , children , soloLoading , variant , ... rest } = props ; const isSoloLoading = soloLoading && ! props . startIcon && ! props . endIcon && ! props . loadingPosition ; const [ loading , setLoading ] = useState ( false ) ; const handleClick = useCallback ( async ( event ) => { setLoading ( true ) ; try { await onClick ( event ) ; setLoading ( false ) ; } catch ( error ) { setLoading ( false ) ; if ( typeof error === 'string' ) { throw new Error ( error ) ; } } } , [ onClick ] ) ; return ( < LoadingButton loadingPosition = { rest . startIcon ? 'start' : rest . endIcon ? 'end' : undefined } loading = { loading } loadingIndicator = { isSoloLoading ? < CircularProgress color = "primary" size = { 16 } / > : undefined } { ... rest } onClick = { handleClick } variant = { isSoloLoading && loading ? 'text' : variant } component = "button" ref = { ref } children = { children } / > ) ; } ) ) ;