Loading indicator on sign in.

client/src/components/sign-in-form/sign-in-form.component.jsx

@@ -13,6 +13,7 @@ import {
 } from "../../redux/user/user.actions";
 import {
   selectCurrentUser,
+  selectLoginLoading,
   selectSignInError,
 } from "../../redux/user/user.selectors";
 import AlertComponent from "../alert/alert.component";
@@ -21,6 +22,7 @@ import "./sign-in-form.styles.scss";
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
   signInError: selectSignInError,
+  loginLoading: selectLoginLoading,
 });
 
 const mapDispatchToProps = (dispatch) => ({
@@ -34,6 +36,7 @@ export function SignInComponent({
   currentUser,
   signInError,
   sendPasswordReset,
+  loginLoading,
 }) {
   const { redirect } = queryString.parse(useLocation().search);
 
@@ -80,7 +83,12 @@ export function SignInComponent({
         {signInError ? (
           <AlertComponent type="error" message={signInError.message} />
         ) : null}
-        <Button className="login-btn" type="primary" htmlType="submit">
+        <Button
+          className="login-btn"
+          type="primary"
+          htmlType="submit"
+          loading={loginLoading}
+        >
           {t("general.actions.login")}
         </Button>
       </Form>