Login: make it visible that it's loading.

src/LoginGate.tsx

@@ -22,16 +22,20 @@ import LoadingIndicator from "./widgets/LoadingIndicator";
 export default function LoginGate() {
   const credentials = useCredentials();
   const dispatch = useDispatch();
+  const [loading, setLoading] = React.useState(false);
   const [fetchError, setFetchError] = React.useState<Error>();
 
   async function onFormSubmit(username: string, password: string, serviceApiUrl?: string) {
     try {
+      setLoading(true);
       setFetchError(undefined);
       const ret = login(username, password, serviceApiUrl);
       await ret.payload;
       dispatch(ret);
     } catch (e) {
       setFetchError(e);
+    } finally {
+      setLoading(false);
     }
   }
 
@@ -56,6 +60,7 @@ export default function LoginGate() {
         <h2>Please Log In</h2>
         <LoginForm
           onSubmit={onFormSubmit}
+          loading={loading}
           error={fetchError}
         />
         <hr style={style.divider} />

src/components/LoginForm.tsx

@@ -11,6 +11,7 @@ import Switch from "@material-ui/core/Switch";
 import ExternalLink from "../widgets/ExternalLink";
 
 import * as C from "../constants";
+import LoadingIndicator from "../widgets/LoadingIndicator";
 
 interface FormErrors {
   errorEmail?: string;
@@ -128,6 +129,15 @@ class LoginForm extends React.PureComponent {
       );
     }
 
+    if (this.props.loading) {
+      return (
+        <div style={{ textAlign: "center" }}>
+          <LoadingIndicator />
+          <p>Deriving encryption data...</p>
+        </div>
+      );
+    }
+
     return (
       <React.Fragment>
         {(this.props.error) && (<div>Error! {this.props.error.message}</div>)}

src/store/actions.ts

@@ -6,6 +6,7 @@ import { createAction as origCreateAction, ActionMeta } from "redux-actions";
 import * as Etebase from "etebase";
 
 import { SettingsType } from "./";
+import { startTask } from "../helpers";
 
 type FunctionAny = (...args: any[]) => any;
 
@@ -34,8 +35,10 @@ export const logout = createAction(
 export const login = createAction(
   "LOGIN",
   async (username: string, password: string, server: string | undefined) => {
+    return startTask((async () => {
       const etebase = await Etebase.Account.login(username, password, server);
       return etebase.save();
+    }));
   }
 );