Bugfix: LLD big lag when ending the onboarding (#1336)

* Add loading state in continue button at the end of the onboarding

* changeset

* Fix loading state

* cleanup useEffect

* fix test e2e

* revert fix test e2e

* update screenshots (ubuntu-latest)

* update screenshots (ubuntu-latest)

* update screenshots (macos-latest)

* update screenshots (windows-latest)

* fix e2e by disabling the onboarding carousel during playwright run

* update screenshots (ubuntu-latest)

* update screenshots (windows-latest)

* update screenshots (macos-latest)

Co-authored-by: Pierre-Louis Crescitz <[email protected]>
Co-authored-by: Team Live <[email protected]>

.changeset/red-peas-whisper.md

@@ -0,0 +1,5 @@
+---
+"ledger-live-desktop": patch
+---
+
+Add a loading state in the "continue" button at the end of the onboarding in case of lag

apps/ledger-live-desktop/src/renderer/components/Onboarding/Screens/Tutorial/index.tsx

@@ -1,5 +1,15 @@
-import { Flex, Aside, Logos, Button, Icons, ProgressBar, Drawer, Popin } from "@ledgerhq/react-ui";
-import React, { useCallback, useMemo, useState } from "react";
+import {
+  Flex,
+  Aside,
+  Logos,
+  Button,
+  Icons,
+  ProgressBar,
+  Drawer,
+  Popin,
+  InfiniteLoader,
+} from "@ledgerhq/react-ui";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { openURL } from "~/renderer/linking";
 import { urls } from "~/config/urls";
 import { Switch, Route, useHistory, useLocation } from "react-router-dom";
@@ -65,8 +75,9 @@ type FlowStepperProps = {
   AsideFooter?: React.ElementType;
   ProgressBar?: React.ReactNode;
   continueLabel?: string;
+  continueLoading?: boolean;
+  continueDisabled?: boolean;
   backLabel?: string;
-  disableContinue?: boolean;
   disableBack?: boolean;
   children: React.ReactNode;
   handleBack: () => void;
@@ -85,7 +96,8 @@ const FlowStepper: React.FC<FlowStepperProps> = ({
   AsideFooter,
   continueLabel,
   backLabel,
-  disableContinue,
+  continueLoading,
+  continueDisabled,
   disableBack,
   ProgressBar,
   children,
@@ -138,9 +150,10 @@ const FlowStepper: React.FC<FlowStepperProps> = ({
             <Button
               data-test-id="v3-tutorial-continue"
               onClick={handleContinue}
-              disabled={disableContinue}
+              disabled={continueLoading || continueDisabled}
               variant="main"
-              Icon={() => <Icons.ArrowRightMedium size={18} />}
+              iconSize={18}
+              Icon={continueLoading ? InfiniteLoader : Icons.ArrowRightMedium}
             >
               {continueLabel || t("common.continue")}
             </Button>
@@ -216,6 +229,8 @@ export default function Tutorial({ useCase }: Props) {
 
   const [connectedDevice, setConnectedDevice] = useState(null);
 
+  const [onboardingDone, setOnboardingDone] = useState(false);
+
   const [helpPinCode, setHelpPinCode] = useState(false);
   const [helpRecoveryPhrase, setHelpRecoveryPhrase] = useState(false);
   const [helpHideRecoveryPhrase, setHelpHideRecoveryPhrase] = useState(false);
@@ -468,13 +483,41 @@ export default function Tutorial({ useCase }: Props) {
           setConnectedDevice,
         },
         canContinue: !!connectedDevice,
-        next: () => history.push("/"),
+        next: () => {
+          setOnboardingDone(true);
+        },
         previous: () => history.push(`${path}/${ScreenId.pairMyNano}`),
       },
     ],
-    [connectedDevice, history, path, useCase, userChosePinCodeHimself, userUnderstandConsequences],
+    [
+      connectedDevice,
+      history,
+      path,
+      useCase,
+      userChosePinCodeHimself,
+      userUnderstandConsequences,
+      setOnboardingDone,
+    ],
   );
 
+  useEffect(() => {
+    if (onboardingDone) {
+      /**
+       * There is a lag if we call history.push("/") directly.
+       * To improve the UX in that situation, we have to first commit a "loading"
+       * state and then when that state is rendered (which will be when this
+       * block is executed), on the following commit we can call
+       * history.push("/").
+       */
+      const timeout = setTimeout(() => {
+        if (history.location.pathname !== "/") history.push("/");
+      }, 0);
+      return () => {
+        clearTimeout(timeout);
+      };
+    }
+  }, [history, onboardingDone]);
+
   const steps = useMemo(() => {
     const stepList = [
       {
@@ -635,7 +678,7 @@ export default function Tutorial({ useCase }: Props) {
       <FlowStepper
         illustration={CurrentScreen.Illustration}
         AsideFooter={CurrentScreen.Footer}
-        disableContinue={canContinue === false}
+        continueDisabled={canContinue === false}
         ProgressBar={
           useCase !== UseCase.connectDevice ? (
             <ProgressBar steps={progressSteps} currentIndex={screenStepIndex} />
@@ -644,6 +687,7 @@ export default function Tutorial({ useCase }: Props) {
           )
         }
         continueLabel={CurrentScreen.continueLabel}
+        continueLoading={onboardingDone}
         handleContinue={next}
         handleBack={previous}
       >

apps/ledger-live-desktop/src/renderer/components/Onboarding/Screens/Welcome/Carousel.tsx

@@ -148,7 +148,9 @@ const Carousel = ({ timeout = DEFAULT_TIMEOUT, queue }: Props): React.ReactEleme
     // Override passed timeout if lower than 1000ms
     const _timeout = timeout < 1000 ? DEFAULT_TIMEOUT : timeout;
     if (intervalRef.current) clearInterval(intervalRef.current);
-    if (!paused) intervalRef.current = setInterval(onSlide, _timeout);
+    if (!paused && !process.env.PLAYWRIGHT_RUN) {
+      intervalRef.current = setInterval(onSlide, _timeout);
+    }
   }, [onSlide, paused, timeout]);
 
   if (!queue?.length) return null;