fix(client): add loader for email sign up (#45560)

Add a loader for the buttons.

Co-authored-by: Oliver Eyton-Williams ojeytonwilliams@gmail.com

client/src/pages/email-sign-up.test.js

@@ -20,7 +20,18 @@ describe('<EmailSignUp />', () => {
 
   describe('Non-Authenticated user "not accepted terms and condition"', () => {
     beforeEach(() => {
-      const initialState = { app: { appUsername: '', user: {} } };
+      const initialState = {
+        app: {
+          appUsername: '',
+          user: {},
+          userFetchState: {
+            pending: false,
+            complete: true,
+            errored: false,
+            error: null
+          }
+        }
+      };
 
       const store = mockStore(initialState);
       const container = renderer.create(
@@ -57,6 +68,12 @@ describe('<EmailSignUp />', () => {
               acceptedPrivacyTerms: true,
               name: 'John Doe'
             }
+          },
+          userFetchState: {
+            pending: false,
+            complete: true,
+            errored: false,
+            error: null
           }
         }
       };

client/src/pages/email-sign-up.tsx

@@ -8,10 +8,15 @@ import type { Dispatch } from 'redux';
 import { createSelector } from 'reselect';
 import IntroDescription from '../components/Intro/components/IntroDescription';
 import createRedirect from '../components/create-redirect';
-import { ButtonSpacer, Spacer } from '../components/helpers';
+import { ButtonSpacer, Spacer, Loader } from '../components/helpers';
 import { apiLocation } from '../../../config/env.json';
 
-import { acceptTerms, userSelector, isSignedInSelector } from '../redux';
+import {
+  acceptTerms,
+  userSelector,
+  isSignedInSelector,
+  signInLoadingSelector
+} from '../redux';
 
 import './email-sign-up.css';
 interface AcceptPrivacyTermsProps {
@@ -19,17 +24,21 @@ interface AcceptPrivacyTermsProps {
   acceptedPrivacyTerms: boolean;
   isSignedIn: boolean;
   t: TFunction;
+  showLoading: boolean;
 }
 
 const mapStateToProps = createSelector(
   userSelector,
   isSignedInSelector,
+  signInLoadingSelector,
   (
     { acceptedPrivacyTerms }: { acceptedPrivacyTerms: boolean },
-    isSignedIn: boolean
+    isSignedIn: boolean,
+    showLoading: boolean
   ) => ({
     acceptedPrivacyTerms,
-    isSignedIn
+    isSignedIn,
+    showLoading
   })
 );
 const mapDispatchToProps = (dispatch: Dispatch) =>
@@ -40,7 +49,8 @@ function AcceptPrivacyTerms({
   acceptTerms,
   acceptedPrivacyTerms,
   isSignedIn,
-  t
+  t,
+  showLoading
 }: AcceptPrivacyTermsProps) {
   const acceptedPrivacyRef = useRef(acceptedPrivacyTerms);
   const acceptTermsRef = useRef(acceptTerms);
@@ -67,7 +77,10 @@ function AcceptPrivacyTerms({
     acceptTerms(isWeeklyEmailAccepted);
   }
 
-  function renderEmailListOptin(isSignedIn: boolean) {
+  function renderEmailListOptin(isSignedIn: boolean, showLoading: boolean) {
+    if (showLoading) {
+      return <Loader fullScreen={true} />;
+    }
     if (isSignedIn) {
       return (
         <Row>
@@ -138,7 +151,7 @@ function AcceptPrivacyTerms({
             <p>{t('misc.email-blast')}</p>
             <Spacer />
           </Col>
-          {renderEmailListOptin(isSignedIn)}
+          {renderEmailListOptin(isSignedIn, showLoading)}
           <Col xs={12}>
             <Spacer />
           </Col>