From a3841d1210da7abb50a3882681e1cb7d21706df1 Mon Sep 17 00:00:00 2001
From: William Grant <willmgrant@gmail.com>
Date: Wed, 27 Mar 2024 22:12:39 +1100
Subject: [PATCH] fix: dont fade animation between loading states

---
 .../registration/RegistrationStages.tsx       |  7 ++++++-
 ts/components/registration/hooks/index.tsx    | 19 ++++++++++++-------
 .../registration/stages/CreateAccount.tsx     |  2 +-
 .../registration/stages/RestoreAccount.tsx    |  3 ++-
 4 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/ts/components/registration/RegistrationStages.tsx b/ts/components/registration/RegistrationStages.tsx
index 0031f11a4..cfde41466 100644
--- a/ts/components/registration/RegistrationStages.tsx
+++ b/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}
diff --git a/ts/components/registration/hooks/index.tsx b/ts/components/registration/hooks/index.tsx
index 55e9d89ee..e6479d74e 100644
--- a/ts/components/registration/hooks/index.tsx
+++ b/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) {
diff --git a/ts/components/registration/stages/CreateAccount.tsx b/ts/components/registration/stages/CreateAccount.tsx
index 58bb0514f..cb720218f 100644
--- a/ts/components/registration/stages/CreateAccount.tsx
+++ b/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)));
     }
   };
 
diff --git a/ts/components/registration/stages/RestoreAccount.tsx b/ts/components/registration/stages/RestoreAccount.tsx
index 22205ae94..5bcf33acd 100644
--- a/ts/components/registration/stages/RestoreAccount.tsx
+++ b/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)));
     }
   };