diff --git a/web/account/log-in-form.css b/web/account/log-in-form.css --- a/web/account/log-in-form.css +++ b/web/account/log-in-form.css @@ -36,10 +36,19 @@ } div.form_footer > button:disabled { - min-height: 48px; opacity: 0.5; } +div.loadingIndicator { + position: absolute; +} +div.hiddenLoadingIndicator { + display: none; +} +div.invisibleButtonText { + visibility: hidden; +} + div.modal_form_error { font-size: 14px; color: var(--error); diff --git a/web/account/traditional-login-form.react.js b/web/account/traditional-login-form.react.js --- a/web/account/traditional-login-form.react.js +++ b/web/account/traditional-login-form.react.js @@ -186,12 +186,23 @@ ], ); - const loginButtonContent = React.useMemo(() => { - if (inputDisabled) { - return ; - } - return 'Sign in'; - }, [inputDisabled]); + const loadingIndicatorClassName = inputDisabled + ? css.loadingIndicator + : css.hiddenLoadingIndicator; + const buttonTextClassName = inputDisabled + ? css.invisibleButtonText + : undefined; + const loginButtonContent = React.useMemo( + () => ( + <> +
+ +
+
Sign in
+ + ), + [loadingIndicatorClassName, buttonTextClassName], + ); const signInButtonColor = React.useMemo( () => ({ backgroundColor: '#6A20E3' }),