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

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

@@ -19,6 +19,9 @@ const ROW_COUNT = 2;
 
 const isAnimating = ref(true);
 
+const bLabel = ref($t("common.goBack"));
+const aLabel = ref($t("common.select"));
+
 const animation = reactive({
   rowOffsetY: new Array<number>(ROW_COUNT).fill(SLIDE_OFFSET),
   rowOpacity: new Array<number>(ROW_COUNT).fill(0),
@@ -26,7 +29,11 @@ const animation = reactive({
 
 const animateIntro = async () => {
   isAnimating.value = true;
-  const timeline = gsap.timeline();
+  const timeline = gsap.timeline({
+    onComplete: () => {
+      isAnimating.value = false;
+    },
+  });
   for (let i = 0; i < ROW_COUNT; i++) {
     timeline
       .to(
@@ -40,13 +47,24 @@ const animateIntro = async () => {
         i * ROW_STAGGER,
       );
   }
+  timeline.call(
+    () => {
+      bLabel.value = $t("common.cancel");
+      aLabel.value = $t("common.confirm");
+    },
+    [],
+    SUBMENU_LABEL_CHANGE_DELAY,
+  );
   await timeline;
-  isAnimating.value = false;
 };
 
 const animateOutro = async () => {
   isAnimating.value = true;
-  const timeline = gsap.timeline();
+  const timeline = gsap.timeline({
+    onComplete: () => {
+      isAnimating.value = false;
+    },
+  });
   for (let i = 0; i < ROW_COUNT; i++) {
     timeline
       .to(
@@ -128,8 +146,8 @@ defineOptions({ render: () => null });
 <template>
   <CommonButtons
     :y-offset="store.submenuButtonsOffsetY"
-    :b-label="$t('common.cancel')"
-    :a-label="$t('common.confirm')"
+    :b-label="bLabel"
+    :a-label="aLabel"
     @activate-b="handleActivateB"
     @activate-a="handleActivateA"
   />