render arrow in slow devices

nimiq · Feb 11, 2022 · 7d2bc2b · 7d2bc2b
1 parent e777de7
commit 7d2bc2b
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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 });