feat(settings): block interactions while animation is happening

app/components/Settings/BottomScreen/Menus/Options/Language.vue

@@ -26,6 +26,8 @@ const BUTTON_POSITIONS = [
   [143, 128],
 ] as const;
 
+const isAnimating = ref(true);
+
 const { selected, selectorPosition } = useButtonNavigation({
   buttons: {
     english: [10, 27, 106, 41],
@@ -66,6 +68,7 @@ const { selected, selectorPosition } = useButtonNavigation({
       left: "italian",
     },
   },
+  disabled: isAnimating,
   selectorAnimation: {
     duration: 0.1,
     ease: "power2.out",
@@ -90,6 +93,7 @@ const animation = reactive({
 });
 
 const animateIntro = async () => {
+  isAnimating.value = true;
   const timeline = gsap.timeline();
   for (let i = 0; i < ROW_COUNT; i++) {
     timeline
@@ -105,9 +109,11 @@ const animateIntro = async () => {
       );
   }
   await timeline;
+  isAnimating.value = false;
 };
 
 const animateOutro = async () => {
+  isAnimating.value = true;
   const timeline = gsap.timeline();
   for (let i = 0; i < ROW_COUNT; i++) {
     timeline
@@ -130,11 +136,13 @@ onMounted(() => {
 });
 
 const handleCancel = async () => {
+  if (isAnimating.value) return;
   await animateOutro();
   store.closeSubMenu();
 };
 
 const handleConfirm = () => {
+  if (isAnimating.value) return;
   const selectedLocale = locales.value[BUTTON_KEYS.indexOf(selected.value)]!;
 
   setLocale(selectedLocale.code);