feat: Implements MsAnimation; Remove lottie

Author: NicoTuxx

lib/assets/spinner.json

@@ -18,6 +18,9 @@ export * from '@lib/components/ms-input';
 // ** ms-modal ** //
 export * from '@lib/components/ms-modal';
 
+// ** ms-animation ** //
+export * from '@lib/components/ms-animation';
+
 // ** ms-sorter ** //
 export * from '@lib/components/ms-sorter';
 

lib/assets/spinner.riv

@@ -0,0 +1,47 @@
+<!-- Parsec Cloud (https://parsec.cloud) Copyright (c) BUSL-1.1 2016-present Scille SAS -->
+
+<template>
+  <canvas
+    ref="canvas"
+    :height="height || 24"
+    :width="width || 24"
+    :speed="speed || 1"
+  />
+</template>
+
+<script setup lang="ts">
+import { Rive } from '@rive-app/canvas';
+import { onMounted, onUnmounted, ref } from 'vue';
+
+const canvas = ref();
+let riveInstance: Rive | null = null;
+
+const props = defineProps<{
+  height?: number;
+  width?: number;
+  speed?: number;
+  src: string;
+}>();
+
+onMounted(() => {
+  if (canvas.value) {
+    fetch(props.src)
+      .then((response) => response.arrayBuffer())
+      .then((buffer) => {
+        riveInstance = new Rive({
+          canvas: canvas.value,
+          buffer: buffer,
+          autoplay: true,
+        });
+      });
+  }
+});
+
+onUnmounted(() => {
+  if (riveInstance) {
+    riveInstance.cleanup();
+  }
+});
+</script>
+
+<style scoped lang="scss"></style>

lib/components/index.ts

@@ -0,0 +1,4 @@
+// Parsec Cloud (https://parsec.cloud) Copyright (c) BUSL-1.1 2016-present Scille SAS
+import MsAnimation from '@lib/components/ms-animation/MsAnimation.vue';
+
+export { MsAnimation };

lib/components/ms-animation/MsAnimation.vue

@@ -8,19 +8,18 @@
     >
       {{ $msTranslate(title) }}
     </ion-text>
-    <vue3-lottie
+    <ms-animation
       class="container-spinner"
-      :animation-data="SpinnerJSON"
+      src="/lib/assets/spinner.riv"
       :height="height || 24"
       :width="width || 24"
       :speed="speed || 1"
-      :loop="true"
     />
   </div>
 </template>
 
 <script setup lang="ts">
-import SpinnerJSON from '@lib/assets/spinner.json';
+import MsAnimation from '@lib/components/ms-animation/MsAnimation.vue';
 import { Translatable } from '@lib/services/translation';
 import { IonText } from '@ionic/vue';
 

lib/components/ms-animation/index.ts

@@ -2,11 +2,9 @@
 
 import { TranslationPlugin } from '@lib/services';
 import { App } from 'vue';
-import Vue3Lottie from 'vue3-lottie';
 
 export const MegaSharkPlugin = {
   install: (app: App<any>): void => {
     app.use(TranslationPlugin);
-    app.use(Vue3Lottie);
   },
 };

lib/components/ms-spinner/MsSpinner.vue

@@ -20,7 +20,6 @@ http://ionicframework.com/docs/theming/ */
 @import 'components/cards';
 @import 'components/inputs';
 @import 'components/list';
-@import 'components/lottie';
 @import 'components/modals';
 @import 'components/notifications';
 @import 'components/toasts';