feat: added in loading animation when restoring an account

ts/components/registration/stages/RestoreAccount.tsx

@@ -1,42 +1,82 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
+import { useDispatch } from 'react-redux';
+import {
+  AccountRestoration,
+  setAccountRestorationStep,
+} from '../../../state/onboarding/ducks/registration';
+import { useOnboardAccountRestorationStep } from '../../../state/onboarding/selectors/registration';
 import { Flex } from '../../basic/Flex';
 import { SessionButton, SessionButtonColor } from '../../basic/SessionButton';
 import { SpacerLG, SpacerSM } from '../../basic/Text';
 import { SessionIcon } from '../../icon';
 import { SessionInput } from '../../inputs';
+import { SessionProgressBar } from '../../loading';
 import { signInWithLinking } from '../RegistrationStages';
 import { OnboardContainer, OnboardDescription, OnboardHeading } from '../components';
 import { BackButtonWithininContainer } from '../components/BackButton';
 
 export const RestoreAccount = () => {
-  // const step = useOnboardAccountRestorationStep();
+  const step = useOnboardAccountRestorationStep();
 
   const [recoveryPhrase, setRecoveryPhrase] = useState('');
   const [recoveryPhraseError, setRecoveryPhraseError] = useState(undefined as string | undefined);
-  const [loading, setIsLoading] = useState(false);
+  const [progress, setProgress] = useState(0);
+
+  const dispatch = useDispatch();
 
   // Seed is mandatory no matter which mode
   const seedOK = !!recoveryPhrase && !recoveryPhraseError;
 
-  const activateContinueButton = seedOK && !loading;
+  const activateContinueButton = seedOK && !(step === AccountRestoration.Loading);
 
-  const continueYourSession = () => {
+  const continueYourSession = async () => {
-    // if (isRecovery) {
+    dispatch(setAccountRestorationStep(AccountRestoration.Loading));
-    //   void signInWithRecovery({
+    await signInWithLinking({
-    //     displayName,
-    //     userRecoveryPhrase: recoveryPhrase,
-    //   });
-    // }
-    setIsLoading(true);
-    void signInWithLinking({
       userRecoveryPhrase: recoveryPhrase,
       errorCallback: setRecoveryPhraseError,
     });
-    setIsLoading(false);
+    dispatch(setAccountRestorationStep(AccountRestoration.Complete));
   };
 
+  useEffect(() => {
+    let interval: NodeJS.Timeout;
+    if (step === AccountRestoration.Loading) {
+      interval = setInterval(() => {
+        setProgress(oldProgress => {
+          if (oldProgress === 100) {
+            clearInterval(interval);
+            return 100;
+          }
+          // Increment by 100 / 15 = 6.67 each second to complete in 15 seconds
+          return Math.min(oldProgress + 100 / 15, 100);
+        });
+      }, 1000);
+    }
+
+    return () => clearInterval(interval);
+  }, [step]);
+
   return (
     <OnboardContainer>
+      {step === AccountRestoration.Loading ? (
+        <Flex
+          container={true}
+          flexDirection="column"
+          justifyContent="center"
+          alignItems="center"
+          // TODO update dataTestId
+          dataTestId="three-dot-loading-animation"
+        >
+          <SessionProgressBar
+            progress={progress}
+            width={'320px'}
+            margin={'var(--margins-lg) auto'}
+            title={window.i18n('waitOneMoment')}
+            subtitle={window.i18n('loadAccountProgressMessage')}
+            showPercentage={true}
+          />
+        </Flex>
+      ) : (
         <BackButtonWithininContainer margin={'2px 0 0 -36px'}>
           <Flex
             container={true}
@@ -80,27 +120,8 @@ export const RestoreAccount = () => {
               dataTestId="continue-session-button"
             />
           </Flex>
-        {/* TODO[epic=898] Replace with new Session Progress Loader */}
-        {/* {loading && (
-        <Flex
-          container={true}
-          justifyContent="center"
-          alignItems="center"
-          style={{
-            position: 'absolute',
-            top: 0,
-            bottom: 0,
-            left: 0,
-            right: 0,
-            pointerEvents: 'all',
-            backgroundColor: 'var(--background-primary-color)',
-          }}
-          dataTestId="three-dot-loading-animation"
-        >
-          <SessionSpinner loading={true} />
-        </Flex>
-      )} */}
         </BackButtonWithininContainer>
+      )}
     </OnboardContainer>
   );
 };