render arrow in slow devices

nimiq · Feb 11, 2022 · 908d487 · 908d487
1 parent e777de7
commit 908d487
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 9 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
@@ -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);
+            });
         }
 
         return {