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

app/components/Settings/BottomScreen/Menus/User/Snake.vue

@@ -20,6 +20,16 @@ const SCORE_OFFSET = -20;
 const SCORE_DURATION = 0.167;
 
 const isAnimating = ref(true);
+const state = ref<"waiting" | "alive" | "pause" | "dead">("waiting");
+
+const labelsReady = ref(false);
+const bLabel = computed(() =>
+  labelsReady.value ? $t("common.quit") : $t("common.goBack"),
+);
+const aLabel = computed(() => {
+  if (!labelsReady.value) return $t("common.select");
+  return state.value === "waiting" ? $t("common.start") : $t("common.restart");
+});
 
 const intro = reactive({
   boardOffsetY: BOARD_SLIDE_OFFSET,
@@ -31,7 +41,11 @@ const intro = reactive({
 const animateIntro = async () => {
   isAnimating.value = true;
   await gsap
-    .timeline()
+    .timeline({
+      onComplete: () => {
+        isAnimating.value = false;
+      },
+    })
     .to(
       intro,
       { boardOffsetY: 0, duration: BOARD_SLIDE_DURATION, ease: "none" },
@@ -51,14 +65,24 @@ const animateIntro = async () => {
       intro,
       { scoreOffsetY: 0, duration: SCORE_DURATION, ease: "none" },
       BOARD_SLIDE_DURATION + TEXT_FADE_DURATION,
+    )
+    .call(
+      () => {
+        labelsReady.value = true;
+      },
+      [],
+      SUBMENU_LABEL_CHANGE_DELAY,
     );
-  isAnimating.value = false;
 };
 
 const animateOutro = async () => {
   isAnimating.value = true;
   await gsap
-    .timeline()
+    .timeline({
+      onComplete: () => {
+        isAnimating.value = false;
+      },
+    })
     .to(
       intro,
       {
@@ -160,7 +184,6 @@ const tail: THREE.Vector2[] = [];
 const food = new THREE.Vector2();
 
 let score = 0;
-const state = ref<"waiting" | "alive" | "pause" | "dead">("waiting");
 
 const randomFoodPos = (): THREE.Vector2 => {
   // can't spawn on the head or tail
@@ -337,8 +360,8 @@ defineOptions({ render: () => null });
 <template>
   <CommonButtons
     :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"
   />