MUI Loading Button

loading-button.tsx

import { Button, ButtonProps, CircularProgress } from '@mui/material';
import { useMemo } from 'react';

type LoadingButtonProps = ButtonProps & {
  isLoading?: boolean;
};

const LoadingButton = ({ isLoading = false, ...props }: LoadingButtonProps) => {
  const loadingProps = useMemo<ButtonProps>(() => {
    if (loading) {
      return {
        endIcon: <CircularProgress color="grey" size={18} />,
        disabled: true,
      };
    }

    return {};
  }, [loading]);

  return <Button {...props} {...loadingProps} />;
};

export default LoadingButton;