feat(settings): block interactions while animation is happening

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

@@ -16,6 +16,8 @@ const BUTTON_STAGGER = 0.3;
 const SLIDE_OFFSET = 96;
 const SLIDE_DURATION = 0.25;
 
+const isAnimating = ref(true);
+
 const animation = reactive({
   _3dMode: { headerOffsetY: HEADER_HEIGHT * 3, opacity: 0 },
   _2dMode: { headerOffsetY: HEADER_HEIGHT * 3, opacity: 0 },
@@ -24,6 +26,7 @@ const animation = reactive({
 });
 
 const animateIntro = async () => {
+  isAnimating.value = true;
   await gsap
     .timeline()
     .to(
@@ -46,9 +49,11 @@ const animateIntro = async () => {
       },
       BUTTON_STAGGER,
     );
+  isAnimating.value = false;
 };
 
 const animateOutro = async () => {
+  isAnimating.value = true;
   await gsap
     .timeline()
     .to(
@@ -77,6 +82,7 @@ const { selected, selectorPosition } = useButtonNavigation({
     _3dMode: { down: "_2dMode" },
     _2dMode: { up: "_3dMode" },
   },
+  disabled: isAnimating,
   selectorAnimation: {
     ease: "none",
     duration: 0.065,
@@ -84,11 +90,13 @@ const { selected, selectorPosition } = useButtonNavigation({
 });
 
 const handleCancel = async () => {
+  if (isAnimating.value) return;
   await animateOutro();
   store.closeSubMenu();
 };
 
 const handleConfirm = () => {
+  if (isAnimating.value) return;
   const mode = selected.value === "_3dMode" ? "3d" : "2d";
   app.setRenderingMode(mode);