fix: dont fade animation between loading states

ts/components/registration/RegistrationStages.tsx

@@ -72,7 +72,12 @@ export const RegistrationStages = () => {
           <SpacerLG />
           <OnboardContainer
             key={`${Onboarding[step]}-${step === Onboarding.CreateAccount ? AccountCreation[creationStep] : AccountRestoration[restorationStep]}`}
-            animate={step !== Onboarding.Start}
+            animate={
+              step !== Onboarding.Start &&
+              restorationStep !== AccountRestoration.Finishing &&
+              restorationStep !== AccountRestoration.Finished &&
+              restorationStep !== AccountRestoration.Complete
+            }
           >
             {step === Onboarding.Start ? <Start /> : null}
             {step === Onboarding.CreateAccount ? <CreateAccount /> : null}

ts/components/registration/hooks/index.tsx

@@ -31,6 +31,7 @@ type UseRecoveryProgressEffectProps = {
  */
 export const useRecoveryProgressEffect = (props: UseRecoveryProgressEffectProps) => {
   const { step, progress, setProgress, ourPubkey, displayName } = props;
+  const totalProgress = 100;
 
   const dispatch = useDispatch();
 
@@ -38,18 +39,22 @@ export const useRecoveryProgressEffect = (props: UseRecoveryProgressEffectProps)
     await setSignWithRecoveryPhrase(true);
     await registrationDone(ourPubkey, displayName);
 
-    window.log.debug(`WIP: [onboarding] restore account: loggin in for ${displayName}`);
+    window.log.debug(`WIP: [onboarding] restore account: logging in for ${displayName}`);
     trigger('openInbox');
   }, [displayName, ourPubkey]);
 
   useEffect(() => {
     if (step === AccountRestoration.Loading) {
       interval = setInterval(() => {
-        if (progress < 100) {
+        window.log.debug(
+          `WIP: [onboarding] restore account: progress ${progress} state ${AccountRestoration[step]}`
+        );
+
+        if (progress < totalProgress) {
           dispatch(setProgress(progress + 1));
         }
 
-        if (progress >= 100) {
+        if (progress >= totalProgress) {
           clearInterval(interval);
           // if we didn't get the display name in time, we need to enter it manually
           window.log.debug(
@@ -57,20 +62,20 @@ export const useRecoveryProgressEffect = (props: UseRecoveryProgressEffectProps)
           );
           dispatch(setAccountRestorationStep(AccountRestoration.DisplayName));
         }
-      }, ONBOARDING_TIMES.RECOVERY_TIMEOUT / 100);
+      }, ONBOARDING_TIMES.RECOVERY_TIMEOUT / totalProgress);
     }
 
     if (step === AccountRestoration.Finishing) {
       interval = setInterval(() => {
-        if (progress < 100) {
+        if (progress < totalProgress) {
           dispatch(setProgress(progress + 1));
         }
 
-        if (progress >= 100) {
+        if (progress >= totalProgress) {
           clearInterval(interval);
           dispatch(setAccountRestorationStep(AccountRestoration.Finished));
         }
-      }, ONBOARDING_TIMES.RECOVERY_FINISHING / 100);
+      }, ONBOARDING_TIMES.RECOVERY_FINISHING / totalProgress);
     }
 
     if (step === AccountRestoration.Finished) {

ts/components/registration/stages/CreateAccount.tsx

@@ -103,8 +103,8 @@ export const CreateAccount = () => {
       window.log.debug(
         `WIP: [onboarding] create account: creation failed! Error: ${e.message || e}`
       );
-      dispatch(setDisplayNameError(e.message || String(e)));
       dispatch(setAccountCreationStep(AccountCreation.DisplayName));
+      dispatch(setDisplayNameError(e.message || String(e)));
     }
   };
 

ts/components/registration/stages/RestoreAccount.tsx

@@ -182,6 +182,7 @@ export const RestoreAccount = () => {
       window.log.debug(
         `WIP: [onboarding] restore account: recoverAndEnterDisplayName() is starting recoveryPassword: ${recoveryPassword} displayName: ${displayName}`
       );
+      dispatch(setProgress(0));
       await signInWithNewDisplayName({
         displayName,
         recoveryPassword,
@@ -191,8 +192,8 @@ export const RestoreAccount = () => {
       window.log.debug(
         `WIP: [onboarding] restore account: restoration with new display name failed! Error: ${e.message || e}`
       );
-      dispatch(setDisplayNameError(e.message || String(e)));
       dispatch(setAccountRestorationStep(AccountRestoration.DisplayName));
+      dispatch(setDisplayNameError(e.message || String(e)));
     }
   };