fix(settings): synchronize button animation with arrows of number input

app/components/Settings/BottomScreen/Menus/TouchScreen/TapTap.vue

@@ -68,6 +68,17 @@ let isNewBest = false;
 
 const isAnimating = ref(true);
 
+const labelsReady = ref(false);
+const bLabel = $t("common.quit");
+const aLabel = computed(() => {
+  if (!labelsReady.value) return $t("common.select");
+  return state.value === "waiting" ? $t("common.start") : $t("common.restart");
+});
+
+const buttonsRef = useTemplateRef<{ forceAnimateBLabel: () => void }>(
+  "buttons",
+);
+
 const AREA_FADE_DURATION = 0.2;
 const SCORE_OFFSET = -20;
 const SCORE_DURATION = 0.167;
@@ -81,7 +92,11 @@ const animation = reactive({
 const animateIntro = async () => {
   isAnimating.value = true;
   await gsap
-    .timeline()
+    .timeline({
+      onComplete: () => {
+        isAnimating.value = false;
+      },
+    })
     .to(
       animation,
       { areaOpacity: 1, duration: AREA_FADE_DURATION, ease: "none" },
@@ -91,8 +106,15 @@ const animateIntro = async () => {
       animation,
       { scoreOffsetY: 0, duration: SCORE_DURATION, ease: "none" },
       AREA_FADE_DURATION,
+    )
+    .call(
+      () => {
+        labelsReady.value = true;
+        buttonsRef.value?.forceAnimateBLabel();
+      },
+      [],
+      SUBMENU_LABEL_CHANGE_DELAY,
     );
-  isAnimating.value = false;
 };
 
 const animateOutro = async () => {
@@ -101,7 +123,11 @@ const animateOutro = async () => {
   targetY = LOGICAL_HEIGHT * 2 - 20;
 
   await gsap
-    .timeline()
+    .timeline({
+      onComplete: () => {
+        isAnimating.value = false;
+      },
+    })
     .to(
       animation,
       { areaOpacity: 0, duration: AREA_FADE_DURATION, ease: "none" },
@@ -418,9 +444,10 @@ defineOptions({ render: () => null });
 
 <template>
   <CommonButtons
+    ref="buttons"
     :y-offset="confirmationModal.buttonsYOffset + store.submenuButtonsOffsetY"
-    :b-label="$t('common.quit')"
-    :a-label="state === 'waiting' ? $t('common.start') : $t('common.restart')"
+    :b-label="bLabel"
+    :a-label="aLabel"
     @activate-b="handleActivateB"
     @activate-a="handleActivateA"
   />