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
@@ -27,6 +27,11 @@
   margin-top: 16px;
 }
 
+div.form-footer > button:disabled {
+  min-height: 48px;
+  opacity: 0.5;
+}
+
 div.modal-form-error {
   margin-top: 16px;
   font-size: 14px;
diff --git a/web/account/log-in-form.react.js b/web/account/log-in-form.react.js
--- a/web/account/log-in-form.react.js
+++ b/web/account/log-in-form.react.js
@@ -19,6 +19,7 @@
 } from 'lib/utils/action-utils';
 
 import Button from '../components/button.react';
+import LoadingIndicator from '../loading-indicator.react';
 import Input from '../modals/input.react';
 import { useModalContext } from '../modals/modal-provider.react';
 import { useSelector } from '../redux/redux-utils';
@@ -112,6 +113,13 @@
     [dispatchActionPromise, logInAction, loginExtraInfo, username],
   );
 
+  const loginButtonContent = () => {
+    if (inputDisabled) {
+      return <LoadingIndicator status="loading" />;
+    }
+    return 'Log in';
+  };
+
   return (
     <div className={css['modal-body']}>
       <form method="POST">
@@ -143,7 +151,7 @@
         </div>
         <div className={css['form-footer']}>
           <Button type="submit" disabled={inputDisabled} onClick={onSubmit}>
-            Log in
+            {loginButtonContent()}
           </Button>
           <div className={css['modal-form-error']}>{errorMessage}</div>
         </div>