feat(neuron-ui): update loading style of submit button for importing/creating wallets

Author: Keith-CY

packages/neuron-ui/src/components/ImportKeystore/index.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useCallback, useMemo, useEffect } from 'react'
 import { RouteComponentProps } from 'react-router-dom'
-import { Stack, DefaultButton, PrimaryButton, TextField } from 'office-ui-fabric-react'
+import { Stack, DefaultButton, PrimaryButton, TextField, Spinner } from 'office-ui-fabric-react'
 import { useTranslation } from 'react-i18next'
 import { showOpenDialog } from 'services/remote'
 import { importWalletWithKeystore } from 'states/stateProvider/actionCreators'
@@ -124,12 +124,15 @@ const ImportKeystore = (props: React.PropsWithoutRef<StateWithDispatch & RouteCo
       </Stack>
       <Stack horizontal horizontalAlign="end" tokens={{ childrenGap: 15 }}>
         <DefaultButton onClick={goBack}>{t('import-keystore.button.back')}</DefaultButton>
-        <PrimaryButton
-          disabled={loading || !(fields.name && fields.path && fields.password && !isNameUsed)}
-          onClick={onSubmit}
-        >
-          {t('import-keystore.button.submit')}
-        </PrimaryButton>
+        {loading ? (
+          <PrimaryButton disabled>
+            <Spinner />
+          </PrimaryButton>
+        ) : (
+          <PrimaryButton disabled={!(fields.name && fields.path && fields.password && !isNameUsed)} onClick={onSubmit}>
+            {t('import-keystore.button.submit')}
+          </PrimaryButton>
+        )}
       </Stack>
     </Stack>
   )

packages/neuron-ui/src/components/WalletWizard/index.tsx

@@ -10,6 +10,7 @@ import {
   DefaultButton,
   TextField,
   FontSizes,
+  Spinner,
 } from 'office-ui-fabric-react'
 
 import withWizard, { WizardElementProps, WithWizardState } from 'components/withWizard'
@@ -283,7 +284,7 @@ const Submission = ({
   const isNameUnused = useMemo(() => name && !wallets.find(w => w.name === name), [name, wallets])
   const isPwdComplex = useMemo(() => verifyPasswordComplexity(password) === true, [password])
   const isPwdSame = useMemo(() => password && password === confirmPassword, [password, confirmPassword])
-  const disableNext = loading || !(isNameUnused && isPwdComplex && isPwdSame)
+  const disableNext = !(isNameUnused && isPwdComplex && isPwdSame)
 
   return (
     <Stack verticalFill verticalAlign="center" horizontalAlign="stretch" tokens={{ childrenGap: 15 }}>
@@ -320,7 +321,13 @@ const Submission = ({
 
       <Stack horizontal horizontalAlign="end" tokens={{ childrenGap: 10 }}>
         <DefaultButton onClick={history.goBack} text={t('wizard.back')} />
-        <PrimaryButton type="submit" onClick={onNext} disabled={disableNext} text={t('wizard.next')} />
+        {loading ? (
+          <PrimaryButton disabled>
+            <Spinner />
+          </PrimaryButton>
+        ) : (
+          <PrimaryButton type="submit" onClick={onNext} disabled={disableNext} text={t('wizard.next')} />
+        )}
       </Stack>
     </Stack>
   )