Use material-ui v5 LoadingButton

[goto-bus-stop]

For after #1287

We have a couple of places where we manually stick a CircularProgress in a Button when we're waiting for an HTTP request to finish. material-ui v5 has a LoadingButton component, which takes a pending prop for this purpose. It looks a bit better and it can also keep showing the button text while the operation is in progress.

These are the ones I found:

web/src/components/Dialogs/ConfirmDialog/index.js

Lines 87 to 89 in 1f15e25

	<Button disabled={busy} onClick={this.handleConfirm}>
	{busy ? <div className="Button-loading"><CircularProgress size="100%" /></div> : confirmLabel}
	</Button>

web/src/components/Dialogs/LoginDialog/LoginForm.js

Lines 98 to 107 in 1f15e25

	<Button
	className="LoginForm-submit"
	disabled={busy}
	>
	{busy ? (
	<div className="Button-loading">
	<CircularProgress size="100%" />
	</div>
	) : t('login.login')}
	</Button>

web/src/components/Dialogs/LoginDialog/SocialForm.js

Lines 142 to 149 in 1f15e25

	<Button
	className="RegisterForm-submit"
	disabled={isBusy || !agreed}
	>
	{isBusy
	? <div className="Button-loading"><CircularProgress size="100%" /></div>
	: t('login.register')}
	</Button>

web/src/components/Dialogs/PromptDialog/index.js

Lines 129 to 131 in 1f15e25

	<Button disabled={busy}>
	{busy ? <div className="Button-loading"><CircularProgress size="100%" /></div> : submitLabel}
	</Button>

web/src/components/Dialogs/LoginDialog/RegisterForm.js

Lines 171 to 178 in 1f15e25

	<Button
	className="RegisterForm-submit"
	disabled={busy || !agreed || !captchaOk}
	>
	{busy
	? <div className="Button-loading"><CircularProgress size="100%" /></div>
	: t('login.register')}
	</Button>

[Ananyatiwari19]

If no one has taken up this issue, I would like to pick it up