Handle loading inside the login form itself.

src/LoginForm.tsx

@@ -4,7 +4,7 @@ import RaisedButton from 'material-ui/RaisedButton';
 import TextField from 'material-ui/TextField';
 import Toggle from 'material-ui/Toggle';
 
-import {  getPalette } from './App';
+import { getPalette } from './App';
 
 import * as C from './Constants';
 
@@ -28,6 +28,7 @@ class LoginForm extends React.Component {
 
   props: {
     onSubmit: (username: string, password: string, encryptionPassword: string, serviceApiUrl: string) => void;
+    loading?: boolean;
     error?: Error;
   };
 
@@ -77,8 +78,6 @@ class LoginForm extends React.Component {
       return;
     }
 
-    this.setState({password: '', encryptionPassword: ''});
-
     this.props.onSubmit(username, password, encryptionPassword, server);
   }
 
@@ -159,8 +158,14 @@ class LoginForm extends React.Component {
             onToggle={this.toggleAdvancedSettings}
           />
           {advancedSettings}
+
           <div style={styles.submit}>
-            <RaisedButton type="submit" label="Log In" secondary={true} />
+            <RaisedButton
+              type="submit"
+              label={this.props.loading ? 'Loading…' : 'Log In'}
+              secondary={true}
+              disabled={this.props.loading}
+            />
           </div>
         </form>
       </Fragment>

src/Root.tsx

@@ -5,7 +5,6 @@ import Paper from 'material-ui/Paper';
 
 import SyncGate from './SyncGate';
 import LoginForm from './LoginForm';
-import LoadingIndicator from './LoadingIndicator';
 
 import { store, StoreState, CredentialsType, fetchCredentials } from './store';
 
@@ -24,9 +23,7 @@ class Root extends React.Component {
   }
 
   render() {
-    if (this.props.credentials.fetching) {
-      return (<LoadingIndicator />);
-    } else if (this.props.credentials.value === null) {
+    if (this.props.credentials.value === null) {
       const style = {
         holder: {
           margin: 'auto',
@@ -37,7 +34,11 @@ class Root extends React.Component {
 
       return (
         <Paper zDepth={2} style={style.holder}>
-          <LoginForm onSubmit={this.onFormSubmit} error={this.props.credentials.error} />
+          <LoginForm
+            onSubmit={this.onFormSubmit}
+            error={this.props.credentials.error}
+            loading={this.props.credentials.fetching}
+          />
         </Paper>
       );
     }