Material-UI progress/spinner

Question

So I'm trying to put a spinner on a button

My first setup works but it distorts the button when the spinner appears.

Here is the first setup

    <Button
        ....
        disabled={isSubmitting}
        startIcon={isSubmitting ? <CircularProgress size="1rem" /> : undefined}
    >
        {isLastStep ? "Submit" : "Next"}
    </Button>

As I said, the spinner elongate the button.

Now what I'm trying to do is to replace the "Submit" text with the spinner when isSubmitting is true.

Here some of the variations I tried but none is working for me

<Button
    ....
    disabled={isSubmitting}
    // startIcon={isSubmitting ? <CircularProgress size="1rem" /> : undefined}
>
    {/* {!isLastStep && "Next"} */}
    {/* {isLastStep ? "Submit" : isSubmitting && <CircularProgress size={14} />} */}
    {/* {!isSubmitting && "Click Me"} */}
    {/* {isSubmitting ? <CircularProgress size={14} /> : "Submit"} */}
    {/* {isLastStep ? "Submit" && isSubmitting && <CircularProgress size={14} /> : "Next"} */}
    {/* {isLastStep ? "Submit" && isSubmitting && <CircularProgress size={14} /> : "Next"} */}
    {/* {isSubmitting && <CircularProgress size={14} />} */}
    {!isLastStep ? "Next" : (!isSubmitting && "Submit")(isSubmitting && <CircularProgress size={14} />)}
</Button>

Anyone had this problem before?

Answer 1

Try this {isSubmitting ? <CircularProgress size={14} /> : !isLastStep ? "Next" : "Submit"}