fix: ensure loadLottie is called after the component mounted

[Mini-ghost]

Resolved #502

Currently, loadLottie is invoked during the component's creation phase. However, this does not guarantee that the component will be mounted right away.

App.vue

<script setup lang="ts">
import { defineAsyncComponent } from 'vue';
const LazyDynamicComponent = defineAsyncComponent(() => import('./components/DynamicComponent.vue'));
</script>

<template>
    <Suspense>
      <LazyDynamicComponent />
    </Suspense>
</template>

components/DynamicComponent.vue

<template>
  <div>
    <Vue3Lottie :animationData="dog" :width="300" :height="300" />
  </div>
</template>

<script setup lang="ts">
import dog from '../assets/dog.json';

await new Promise(resolve => {
  setTimeout(() => {
    resolve(true);
  }, 3000);
});
</script>

Especially when we use async setup() with <Suspense>, the component will be created first but not mounted until the promise is resolved.

Therefore, it's essential to verify if the component has been mounted before calling loadLottie. We can do this by monitoring the lottieAnimationContainer value.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
vue3-lottie	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 5, 2024 10:24am

[sourcery-ai]

We have skipped reviewing this pull request. All of the files appear to be ones we're not sure how to review. We're working on it!