From 5dbaeecc493d9aa35fbe1e00ec7fd972261a8f1f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vi=CC=81ctor=20CG?= <victorcg@empathy.co>
Date: Wed, 31 Jul 2024 11:14:14 +0200
Subject: [PATCH] refactor(animation-factory): await animation to load

---
 .../animations/test-animation-factory.vue           | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/_vue3-migration-test/src/components/animations/test-animation-factory.vue b/packages/_vue3-migration-test/src/components/animations/test-animation-factory.vue
index 68f3a9a694..e27e830812 100644
--- a/packages/_vue3-migration-test/src/components/animations/test-animation-factory.vue
+++ b/packages/_vue3-migration-test/src/components/animations/test-animation-factory.vue
@@ -19,7 +19,7 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, shallowRef } from 'vue';
+  import { nextTick, ref, shallowRef } from 'vue';
   import BaseModal from '../../../../x-components/src/components/modals/base-modal.vue';
   import { animateClipPath } from '../../../../x-components/src/components/animations/animate-clip-path/animate-clip-path.factory';
   import { animateScale } from '../../../../x-components/src/components/animations/animate-scale/animate-scale.factory';
@@ -29,24 +29,27 @@
   const scaleAnimation = animateScale('bottom');
   const translateAnimation = animateTranslate('right');
 
-  const currentAnimation = shallowRef(clipPathAnimation);
+  const currentAnimation = shallowRef(scaleAnimation);
   const open = ref(false);
 
   /** Open modal with ClipPath animation. */
-  function openWithClipPath() {
+  async function openWithClipPath() {
     currentAnimation.value = clipPathAnimation;
+    await nextTick();
     open.value = true;
   }
 
   /** Open modal with Scale animation. */
-  function openWithScale() {
+  async function openWithScale() {
     currentAnimation.value = scaleAnimation;
+    await nextTick();
     open.value = true;
   }
 
   /** Open modal with Translate animation. */
-  function openWithTranslate() {
+  async function openWithTranslate() {
     currentAnimation.value = translateAnimation;
+    await nextTick();
     open.value = true;
   }
 </script>