feat(settings): block interactions while animation is happening

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

@@ -8,19 +8,24 @@ const BIRTHDAY_DAY = 25;
 const BIRTHDAY_MONTH = 4;
 const BIRTHDAY_YEAR = 2002;
 
+const isAnimating = ref(true);
+
 const monthRef = useTemplateRef<InstanceType<typeof NumberInput>>("month");
 const dayRef = useTemplateRef<InstanceType<typeof NumberInput>>("day");
 const yearRef = useTemplateRef<InstanceType<typeof NumberInput>>("year");
 
 const animateIntro = async () => {
+  isAnimating.value = true;
   await Promise.all([
     monthRef.value?.animateIntro(),
     dayRef.value?.animateIntro(),
     yearRef.value?.animateIntro(),
   ]);
+  isAnimating.value = false;
 };
 
 const animateOutro = async () => {
+  isAnimating.value = true;
   await Promise.all([
     monthRef.value?.animateOutro(),
     dayRef.value?.animateOutro(),
@@ -33,11 +38,13 @@ onMounted(() => {
 });
 
 const handleActivateB = async () => {
+  if (isAnimating.value) return;
   await animateOutro();
   store.closeSubMenu();
 };
 
 const handleActivateA = () => {
+  if (isAnimating.value) return;
   const today = new Date();
   const currentYear = today.getFullYear();
 

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

@@ -19,6 +19,8 @@ const TEXT_FADE_DURATION = 0.15;
 const SCORE_OFFSET = -20;
 const SCORE_DURATION = 0.15;
 
+const isAnimating = ref(true);
+
 const intro = reactive({
   boardOffsetY: BOARD_SLIDE_OFFSET,
   boardOpacity: 0,
@@ -27,6 +29,7 @@ const intro = reactive({
 });
 
 const animateIntro = async () => {
+  isAnimating.value = true;
   await gsap
     .timeline()
     .to(
@@ -49,9 +52,11 @@ const animateIntro = async () => {
       { scoreOffsetY: 0, duration: SCORE_DURATION, ease: "none" },
       BOARD_SLIDE_DURATION + TEXT_FADE_DURATION,
     );
+  isAnimating.value = false;
 };
 
 const animateOutro = async () => {
+  isAnimating.value = true;
   await gsap
     .timeline()
     .to(
@@ -80,6 +85,7 @@ onMounted(() => {
 });
 
 const handleCancel = async () => {
+  if (isAnimating.value) return;
   switch (state.value) {
     case "alive": {
       state.value = "pause";
@@ -109,6 +115,7 @@ const handleCancel = async () => {
 };
 
 const handleConfirm = () => {
+  if (isAnimating.value) return;
   switch (state.value) {
     case "alive": {
       state.value = "pause";

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

@@ -17,12 +17,15 @@ const OUTRO_DURATION = 0.25;
 const ROW_STAGGER = SLIDE_DURATION + 0.075;
 const ROW_COUNT = 2;
 
+const isAnimating = ref(true);
+
 const animation = reactive({
   rowOffsetY: new Array<number>(ROW_COUNT).fill(SLIDE_OFFSET),
   rowOpacity: new Array<number>(ROW_COUNT).fill(0),
 });
 
 const animateIntro = async () => {
+  isAnimating.value = true;
   const timeline = gsap.timeline();
   for (let i = 0; i < ROW_COUNT; i++) {
     timeline
@@ -38,9 +41,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
@@ -63,11 +68,13 @@ onMounted(() => {
 });
 
 const handleCancel = async () => {
+  if (isAnimating.value) return;
   await animateOutro();
   store.closeSubMenu();
 };
 
 const handleConfirm = async () => {
+  if (isAnimating.value) return;
   await animateOutro();
   store.closeSubMenu();
 };