fix delay in generating words

Author: NadAlaba

frontend/src/ts/test/caret.ts

@@ -116,9 +116,8 @@ function getTargetPositionLeft(
         if (letterOuterWidth > 0) lastPositiveLetterWidth = letterOuterWidth;
       }
       // if current letter has zero width move the caret to previous positive width letter
-      if ($(currentWordNodeList[inputLen] as Element).outerWidth(true) === 0) {
+      if ($(currentWordNodeList[inputLen] as Element).outerWidth(true) === 0)
         currentWordWidth -= lastPositiveLetterWidth;
-      }
       if (isLanguageRightToLeft) currentWordWidth *= -1;
       result += currentWordWidth;
     }

frontend/src/ts/test/test-ui.ts

@@ -938,7 +938,7 @@ export async function scrollTape(): Promise<void> {
     document.getElementById("wordsWrapper") as HTMLElement
   ).offsetWidth;
   const words = document.getElementById("words") as HTMLElement;
-  const wordElements = words.querySelectorAll(".word");
+  const wordElements = words.getElementsByClassName("word");
 
   let fullWordsWidth = 0;
   let widthToHide = 0;
@@ -958,13 +958,22 @@ export async function scrollTape(): Promise<void> {
       widthToHide += wordOuterWidth;
     }
   }
+  if (toHide.length > 0) {
+    currentWordElementIndex -= toHide.length;
+    toHide.forEach((e) => e.remove());
+    fullWordsWidth -= widthToHide;
+    if (isLanguageRTL) widthToHide *= -1;
+    const currentMargin = parseInt($(words).css("margin-left"), 10);
+    words.style.marginLeft = `${currentMargin + widthToHide}px`;
+  }
+  const inputLength = TestInput.input.current.length;
   let currentWordWidth = 0;
-  if (Config.tapeMode === "letter" && TestInput.input.current.length > 0) {
+  if (Config.tapeMode === "letter" && inputLength > 0) {
     const letters =
       wordElements[currentWordElementIndex]?.querySelectorAll("letter");
     if (!letters) return;
     let lastPositiveLetterWidth = 0;
-    for (let i = 0; i < TestInput.input.current.length; i++) {
+    for (let i = 0; i < inputLength; i++) {
       const letter = letters[i] as HTMLElement;
       if (
         (Config.blindMode || Config.hideExtraLetters) &&
@@ -977,10 +986,7 @@ export async function scrollTape(): Promise<void> {
       if (letterOuterWidth > 0) lastPositiveLetterWidth = letterOuterWidth;
     }
     // if current letter has zero width move the tape to previous positive width letter
-    if (
-      $(letters[TestInput.input.current.length] as Element).outerWidth(true) ===
-      0
-    )
+    if ($(letters[inputLength] as Element).outerWidth(true) === 0)
       currentWordWidth -= lastPositiveLetterWidth;
   }
 
@@ -1000,17 +1006,7 @@ export async function scrollTape(): Promise<void> {
         {
           marginLeft: newMargin,
         },
-        {
-          duration: SlowTimer.get() ? 0 : 125,
-          complete: () => {
-            if (!toHide.length) return;
-            currentWordElementIndex -= toHide.length;
-            toHide.forEach((e) => e.remove());
-            fullWordsWidth -= widthToHide;
-            if (isLanguageRTL) widthToHide *= -1;
-            words.style.marginLeft = `${newMargin + widthToHide}px`;
-          },
-        }
+        SlowTimer.get() ? 0 : 125
       );
   } else {
     words.style.marginLeft = `${newMargin}px`;