Implement dirty skeleton image system

+ Image now does not load from top down, it is either skeleton component from DaisyUI or fully loaded image. Just makes it look cleaner overall.
2024-04-25 23:42:43 +10:00
parent 54f2d87594
commit e7018c9539
2 changed files with 24 additions and 5 deletions
@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  export let src: string;
+  export let altText: string = "";
+
+  let loaded = false;
+
+  onMount(() => {
+    const img = new Image();
+    img.src = src;
+
+    img.onload = () => {
+      loaded = true;
+    };
+  });
+</script>
+
+{#if loaded}
+  <img {src} class="w-48 h-64 shadow-2xl max-w-sm rounded-2xl" alt={altText} />
+{:else}
+  <div class="skeleton w-48 h-64 shadow-2xl max-w-sm rounded-2xl" />
+{/if}