@redseed/redseed-ui-vue3 2.8.0 → 2.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redseed/redseed-ui-vue3",
-  "version": "2.8.0",
+  "version": "2.9.0",
   "description": "RedSeed UI Vue 3 components",
   "main": "index.js",
   "scripts": {

package/src/components/Loader/Loader.vue

@@ -1,7 +1,7 @@
 <script setup>
-import { ref, computed, onMounted } from 'vue'
-import lottie from 'lottie-web'
+import { ref, computed } from 'vue'
 import LottieCubes from './LottieCubes.json'
+import { useLottie } from '../../helpers/Lottie'
 
 const props = defineProps({
     primary: {
@@ -41,21 +41,7 @@ const loaderClass = computed(() => [
 
 const loaderElement = ref(null)
 
-function load() {
-    if (!lottie) return
-    if (!LottieCubes) return
-    if (!loaderElement.value) return
-
-    lottie.loadAnimation({
-        container: loaderElement.value,
-        renderer: 'svg',
-        loop: true,
-        autoplay: true,
-        animationData: LottieCubes
-    })
-}
-
-onMounted(load)
+useLottie(loaderElement, LottieCubes)
 </script>
 <template>
 <div ref="loaderElement"

package/src/helpers/Lottie.js

@@ -0,0 +1,32 @@
+import { ref, watchEffect } from 'vue'
+import Lottie from 'lottie-web'
+
+export function useLottie(elementRef, animationData = null) {
+
+    const lottieAnimation = ref(null)
+
+    watchEffect(() => {
+        if (!elementRef.value) return
+        if (!animationData) return
+
+        loadLottie()
+    })
+
+    function loadLottie() {
+        if (!elementRef.value) return
+        if (!animationData) return
+
+        if (lottieAnimation.value) {
+            lottieAnimation.value.destroy()
+            lottieAnimation.value = null
+        }
+
+        lottieAnimation.value = Lottie.loadAnimation({
+            container: elementRef.value,
+            renderer: 'svg',
+            loop: true,
+            autoplay: true,
+            animationData: animationData
+        })
+    }
+}