Render Button as Loading Sign in React - reactjs

Question

Description:
I have a button in a form. When the button is clicked, the form is submitted to a backend. While the request is in flight, I'd like the button to show a loading signal instead of the usual text. When the request is done, I'd like the form to disappear.
I can do this with useState for the different button forms, but my issue is that just before the form disappears, the text shows again. This is a small issue but it looks unpolished.
Issue:
When the button is clicked, the loading animation appears as intended. When the request finishes, I can see the text re-appear for a split second before the dialog disappears. I don't want the text to reappear until I reopen the dialog.
What I tried:
I currently change the loading state back to false after I call (and wait on) closing the dialog. I tried NOT doing that, but this causes the loading button to be there when I reopen the dialog, which is worse.
To correct that, I tried setting the value of the loading state to false on startup, as follows:
useEffect(() => {
setLoading(false);
}, []);
this had no effect, which leads me to believe that the component only gets mounted once, and that when I close it it doesn't actually get unmounted.
I tried using the LoadingButton component from material-ui/lab, but for a variety of typescript/react reasons it was just throwing errors left and right. Since it's an experimental package I decided to stay away from it.
Code:
Here is my component:
export const NewClientDialog = (props: INewClientDialogProps) => {
// open is a boolean that's true when the dialog is open, close is a function that closes the form dialog
const {open, close} = props;
const [fn, setFn] = useState("");
const [ln, setLn] = useState("");
const [email, setEmail] = useState("");
const [pn, setPn] = useState("");
const [newUser, setNewUser] = useState<INewClientProps>();
const [loading, setLoading] = useState(false);
// this is not optimal, but not the point of this post. It sets the object from the form inputs for the network request
useEffect(() => {
const newClient: INewClientProps = {
firstName: fn,
lastName: ln,
email: email,
phoneNumber: pn
}
setNewUser(newClient)
}, [fn, ln, email, pn])
// this gets triggered when a button is clicked
const onAddClient = () => {
// set the loading animation
setLoading(true)
// this calls the network API and returns a promise
createNewClient(newUser)
// once the promise is completed, close the dialog
.then(() => close())
// then set the loading back to false
.then(() => setLoading(false))
}
// this the button, if loading is true then it is a circular loading icon otherwise it's text
const AddClientButton = () => {
const contents = loading ? ><CircularProgress /> : <div>Create new client</div>
return (
<Button onClick={() => onAddClient()}>
{contents}
</Button>
);
}
return (
<div>
<Dialog onClose={close} open={open}>
<TextField label="First name" onChange={(value) => setFn(value.target.value)}/>
<TextField label="Last name" onChange={(value) => setLn(value.target.value)}/>
<TextField label="Email address" onChange={(value) => setEmail(value.target.value)}/>
<TextField label="Phone number" onChange={(value) => setPn(value.target.value)}/>
<AddClientButton />
</Dialog>
</div>
)
}

Answer 1

Just after writing it, I had an epiphany:
useEffect(() => {
setLoading(false);
}, [open]);
this does exactly what I want it to do - when the dialog is open, set loading to false. I removed the setLoading(false) call in onAddClient.
I will leave this up, hopefully it helps anyone who wants to create dynamic buttons in Material UI.