feat(app-general): move loading into button in forms

eficode · Feb 3, 2021 · ae72740 · ae72740
1 parent cba2362
commit ae72740
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 7 deletions.
diff --git a/packages/game-app/src/createGame/components/CreateGameView/CreateGameView.tsx b/packages/game-app/src/createGame/components/CreateGameView/CreateGameView.tsx
@@ -96,8 +96,7 @@ const CreateGameView: React.FC<Props> = () => {
                 />
               </Box>
               <Box textAlign="center" mt={4}>
-                <Button label={t('createGame.createButtonText')} onClick={submit} />
-                {loading && <span>Loading...</span>}
+                <Button label={t('createGame.createButtonText')} loading={loading} onClick={submit} />
                 {translatedError && <ErrorMessage message={translatedError} />}
               </Box>
               <Box textAlign="center" mt={2}>

diff --git a/packages/game-app/src/login/components/Login/Login.tsx b/packages/game-app/src/login/components/Login/Login.tsx
@@ -43,10 +43,9 @@ const Login: React.FC<Props> = () => {
                 <FormTextField CustomInput={PasswordInput} name="password" label={t('login.form.passwordLabel')} />
               </Box>
               <Box textAlign="center" mt={5}>
-                <Button label={t('login.form.buttonText')} onClick={submit} />
+                <Button label={t('login.form.buttonText')} loading={loginLoading} onClick={submit} />
               </Box>
               {loginTranslateError ? <ErrorMessage message={loginTranslateError} /> : null}
-              {loginLoading ? <span>Loading</span> : null}
               <Box display="flex" flexDirection="row" justifyContent="center" mt={4}>
                 <span>{t('login.notYetAccount')}</span>&nbsp;
                 <Link onClick={goToSignUp}>{t('login.goToSignup')}</Link>

diff --git a/...es/game-app/src/signup/components/EmailVerificationRequired/EmailVerificationRequired.tsx b/...es/game-app/src/signup/components/EmailVerificationRequired/EmailVerificationRequired.tsx
@@ -15,7 +15,12 @@ const EmailVerificationRequired: React.FC<Props> = () => {
     <div className="content">
       <div className="card text-center">
         <h2>{t('signup.verificationRequired.message')}</h2>
-        <Button label={t('signup.verificationRequired.resend')} disabled={loading} onClick={resendEmail} />
+        <Button
+          label={t('signup.verificationRequired.resend')}
+          disabled={loading}
+          loading={loading}
+          onClick={resendEmail}
+        />
         &nbsp;
         <Link onClick={executeLogout}>{t('auth.logout')}</Link>
         {success ? t('signup.verificationRequired.resendSuccess') : null}

diff --git a/packages/game-app/src/signup/components/Signup/Signup.tsx b/packages/game-app/src/signup/components/Signup/Signup.tsx
@@ -95,10 +95,14 @@ const Signup: React.FC<Props> = () => {
                   <FormSelect name="devOpsMaturity" label={t('signup.form.maturityLabel')} options={devOpsMaturities} />
                 </Box>
                 <Box mt={5} textAlign="center">
-                  <Button id="signup-button" label={t('signup.form.buttonText')} onClick={submit} />
+                  <Button
+                    id="signup-button"
+                    label={t('signup.form.buttonText')}
+                    loading={signupLoading}
+                    onClick={submit}
+                  />
                 </Box>
 
-                {signupLoading ? <span>Loading</span> : null}
                 {signupTranslateError ? <ErrorMessage message={signupTranslateError} /> : null}
                 {signupSuccess ? <span>Success</span> : null}
                 <Box mt={4} display="flex" flexDirection="row" justifyContent="center">