From 7d2bc2be4afaf62b5d28e0e4aa9f856f019101b1 Mon Sep 17 00:00:00 2001
From: onmax <maximogarciamtnez@gmail.com>
Date: Fri, 11 Feb 2022 10:36:02 +0100
Subject: [PATCH] render arrow in slow devices

---
 src/App.vue                      |  1 -
 src/components/Tour.vue          | 22 +++++++++++++---------
 src/lib/tour/onboarding/index.ts |  5 +----
 3 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 987537c7c..a63c5de5b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,5 @@
 <template>
     <div id="app" :class="{'value-masked': amountsHidden}">
-        <!-- (?) This could be moved to Groundfloor.vue -->
         <transition v-if="showTour" name="delay">
             <Tour/>
         </transition>
diff --git a/src/components/Tour.vue b/src/components/Tour.vue
index bce7f3419..223aac394 100644
--- a/src/components/Tour.vue
+++ b/src/components/Tour.vue
@@ -92,7 +92,7 @@
                                     {{ tour.steps[tour.currentStep].button.text }}
                                 </button>
                                 <button
-                                    v-else-if="isLargeScreen && !disableNextStep && !isLoading"
+                                    v-else-if="isLargeScreen && !isLoading"
                                     class="right"
                                     @click="goToNextStep()"
                                     tabindex="0"
@@ -600,14 +600,18 @@ export default defineComponent({
             <path d="M3.3 7.2A4 4 0 0 1 0 9h18a4 4 0 0 1-3.3-1.8L10.3.8c-.6-.9-1.9-.9-2.5 0L3.3 7.2z"/>
         </svg>`;
         function _changeArrowAppearance(stepIndex: TourStepIndex) {
-            setTimeout(() => {
-                const arrow = $(
-                    `[data-step="${stepIndex}"] [data-popper-arrow]`) as HTMLDivElement;
-                if (!arrow) return;
-                arrow.innerHTML = arrowSvg;
-                arrow.style.visibility = 'initial';
-                arrow.style.width = '2rem';
-            }, 100);
+            // It has been detected that some slower devices are not able to render the arrow
+            // in time, therefore we need to wait until the arrow is rendered and try a few times
+            Array.from({ length: 10 }).forEach((_, i) => {
+                setTimeout(() => {
+                    const arrow = $(
+                        `[data-step="${stepIndex}"] [data-popper-arrow]`) as HTMLDivElement;
+                    if (!arrow) return;
+                    arrow.innerHTML = arrowSvg;
+                    arrow.style.visibility = 'initial';
+                    arrow.style.width = '2rem';
+                }, 100 * (i + 1));
+            });
         }
 
         return {
diff --git a/src/lib/tour/onboarding/index.ts b/src/lib/tour/onboarding/index.ts
index 9750f71af..5e276c144 100644
--- a/src/lib/tour/onboarding/index.ts
+++ b/src/lib/tour/onboarding/index.ts
@@ -29,10 +29,7 @@ export function getOnboardingTourSteps({ root }: SetupContext, screenTypes: Scre
     // Returns the length of the transaction list for the current active account and active address
     // Easier to access component transaction-list which has already been mounted and has the list
     // of valid transactions for the current active account and active address
-    const txsLen = computed<number>(() => {
-        const txs = (searchComponentByName(root, 'transactions-list') as any).txsForActiveAddress || [];
-        return txs.length || 0;
-    });
+    const txsLen = computed<number>(() => (searchComponentByName(root, 'transactions-list') as any).txCount || 0);
 
     const { state, activeAccountInfo } = useAccountStore();
     const { startedFrom } = (state.tour as { startedFrom: ITourOrigin });