use SvelteUI Lottie over DotLottieSvelte

Author: JeremyGamer13

package-lock.json

@@ -11,7 +11,6 @@
 		"indexl10n": "node scripts/programatic-langs.js && node scripts/translation-index.js"
 	},
 	"dependencies": {
-		"@lottiefiles/dotlottie-svelte": "^0.10.6",
 		"penguinmod": "github:PenguinMod/PenguinMod-ApiModule",
 		"PenguinMod-MarkDown": "github:PenguinMod/PenguinMod-MarkDownNew",
 		"PenguinMod-SvelteUI": "github:PenguinMod/PenguinMod-SvelteUI"

package.json

@@ -1,10 +1,9 @@
 <script>
-    import { DotLottieSvelte } from '@lottiefiles/dotlottie-svelte';
+    // components
+    import { Lottie } from "PenguinMod-SvelteUI";
+    import Icon from "$lib/components/Icon/Component.svelte";
 </script>
 
-<h1>DotLottieSvelte</h1>
-<h2>@lottiefiles/dotlottie-svelte</h2>
-
 <h3>hoverdevice</h3>
 <p>
     <span><b>{"/asset/penguin/animated/lottie/hoverdevice.json"}</b></span>
@@ -13,11 +12,14 @@
 </p>
 <div class="row">
     <div class="card">
-        <DotLottieSvelte
+        <Lottie
             src="/asset/penguin/animated/lottie/hoverdevice.json"
-            autoplay={true}
-            loop={true}
-        />
+            autoplay
+        >
+            <div class="card-lottie-placeholder">
+                <Icon style="font-size:48px;">downloading</Icon>
+            </div>
+        </Lottie>
     </div>
     <div class="card">
         <img
@@ -26,6 +28,30 @@
         />
     </div>
 </div>
+<h3>test</h3>
+<p>
+    <span><b>{"/asset/penguin/animated/lottie/test.json"}</b></span>
+    <span>vs.</span>
+    <span><b>{"/asset/penguin/animated/svg/test.svg"}</b></span>
+</p>
+<div class="row">
+    <div class="card">
+        <Lottie
+            src="/asset/penguin/animated/lottie/test.json"
+            autoplay
+        >
+            <div class="card-lottie-placeholder">
+                <Icon style="font-size:48px;">downloading</Icon>
+            </div>
+        </Lottie>
+    </div>
+    <div class="card">
+        <img
+            src="/asset/penguin/animated/svg/test.svg"
+            alt="Penguin"
+        />
+    </div>
+</div>
 
 <style>
     .row {
@@ -39,11 +65,27 @@
         width: 480px;
         height: 480px;
     }
+    .card :global(div[data-penguinmodsvelteui-lottie-placeholder="true"]) {
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+    }
+    .card-lottie-placeholder {
+        width: 100%;
+        height: 100%;
 
-    img {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    }
+    .card :global(div[data-penguinmodsvelteui-lottie="true"]),
+    .card img {
         width: 100%;
         height: 100%;
-        
+    }
+    .card img {
         object-fit: contain;
     }
 </style>