From a568190ebb55e815c52d884441f3b99dbc34a583 Mon Sep 17 00:00:00 2001
From: Patrick Fic <>
Date: Thu, 6 May 2021 15:33:36 -0700
Subject: [PATCH] Loading indicator on sign in.

---
 .../components/sign-in-form/sign-in-form.component.jsx | 10 +++++++++-
 client/src/redux/user/user.reducer.js                  |  5 +++++
 client/src/redux/user/user.selectors.js                |  5 +++++
 3 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/client/src/components/sign-in-form/sign-in-form.component.jsx b/client/src/components/sign-in-form/sign-in-form.component.jsx
index 1e393d1b6..ef66395b0 100644
--- a/client/src/components/sign-in-form/sign-in-form.component.jsx
+++ b/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>
diff --git a/client/src/redux/user/user.reducer.js b/client/src/redux/user/user.reducer.js
index 398d61aab..5f316d9e8 100644
--- a/client/src/redux/user/user.reducer.js
+++ b/client/src/redux/user/user.reducer.js
@@ -6,6 +6,7 @@ const INITIAL_STATE = {
     //language: "en-US"
   },
   bodyshop: null,
+  loginLoading: false,
   fingerprint: null,
   error: null,
   conflict: false,
@@ -26,6 +27,8 @@ const userReducer = (state = INITIAL_STATE, action) => {
       return { ...state, conflict: false };
     case UserActionTypes.SET_INSTANCE_CONFLICT:
       return { ...state, conflict: true };
+    case UserActionTypes.EMAIL_SIGN_IN_START:
+      return { ...state, loginLoading: true };
     case UserActionTypes.VALIDATE_PASSWORD_RESET_START:
     case UserActionTypes.SEND_PASSWORD_RESET_EMAIL_START:
       return {
@@ -63,6 +66,7 @@ const userReducer = (state = INITIAL_STATE, action) => {
     case UserActionTypes.SIGN_IN_SUCCESS:
       return {
         ...state,
+        loginLoading: false,
         currentUser: action.payload,
         error: null,
       };
@@ -99,6 +103,7 @@ const userReducer = (state = INITIAL_STATE, action) => {
     case UserActionTypes.EMAIL_SIGN_UP_FAILURE:
       return {
         ...state,
+        loginLoading: false,
         error: action.payload,
       };
     case UserActionTypes.SET_AUTH_LEVEL:
diff --git a/client/src/redux/user/user.selectors.js b/client/src/redux/user/user.selectors.js
index 7ec6b8473..ba02c677b 100644
--- a/client/src/redux/user/user.selectors.js
+++ b/client/src/redux/user/user.selectors.js
@@ -31,3 +31,8 @@ export const selectAuthLevel = createSelector(
   [selectUser],
   (user) => user.authLevel
 );
+
+export const selectLoginLoading = createSelector(
+  [selectUser],
+  (user) => user.loginLoading
+);