From 413579e08db25e0bbb79dadeb7bbd08fe68e3811 Mon Sep 17 00:00:00 2001
From: Damillora <developer@damillora.com>
Date: Sat, 22 Feb 2025 15:02:10 +0000
Subject: [PATCH] feat: use loading skeletons for images

---
 .../src/lib/components/ui/PostGallery.svelte  |  3 ++-
 .../lib/components/ui/ShiorikoImage.svelte    | 23 +++++++++++++++++++
 web/app/src/routes/+page.svelte               |  2 +-
 web/app/src/routes/post/[id]/+page.svelte     | 13 +++++++----
 4 files changed, 35 insertions(+), 6 deletions(-)
 create mode 100644 web/app/src/lib/components/ui/ShiorikoImage.svelte

diff --git a/web/app/src/lib/components/ui/PostGallery.svelte b/web/app/src/lib/components/ui/PostGallery.svelte
index 2ab348d..6169b57 100644
--- a/web/app/src/lib/components/ui/PostGallery.svelte
+++ b/web/app/src/lib/components/ui/PostGallery.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import { onMount } from "svelte";
+    import ShiorikoImage from "./ShiorikoImage.svelte";
 
     let { posts = [] } = $props();
 </script>
@@ -12,7 +13,7 @@
                     <div class="card-image">
                         <figure class="image">
                             <a href="/post/{post.id}">
-                                <img alt={post.id} src={post.thumbnail_path} />
+                                <ShiorikoImage alt={post.id} src={post.thumbnail_path} />
                             </a>
                         </figure>
                     </div>
diff --git a/web/app/src/lib/components/ui/ShiorikoImage.svelte b/web/app/src/lib/components/ui/ShiorikoImage.svelte
new file mode 100644
index 0000000..12f0419
--- /dev/null
+++ b/web/app/src/lib/components/ui/ShiorikoImage.svelte
@@ -0,0 +1,23 @@
+<script>
+    import { onMount } from "svelte";
+
+    let { alt, src } = $props();
+    let loading = $state(false);
+
+	onMount(() => {
+			const img = new Image();
+			img.src = src;
+			loading = true;
+
+			img.onload = () => {
+					loading = false;
+			};
+			img.onerror = () => {
+					loading = true;
+			};
+	})
+</script>
+
+<figure class:is-skeleton="{loading}">
+	<img {src} {alt} />
+</figure>
diff --git a/web/app/src/routes/+page.svelte b/web/app/src/routes/+page.svelte
index 50e9341..50d576e 100644
--- a/web/app/src/routes/+page.svelte
+++ b/web/app/src/routes/+page.svelte
@@ -69,7 +69,7 @@
               </form>
             </div>
             {#if postCountLoaded}
-              <p class="block">serving <span class="is-primary"><strong>{postCount}</strong></span> images</p>
+            <p class="block">serving <span class="is-primary"><strong>{postCount}</strong></span> images</p>
             {:else}
             <p class="block">serving <span class="is-primary"><strong>...</strong></span> images</p>
             {/if}
diff --git a/web/app/src/routes/post/[id]/+page.svelte b/web/app/src/routes/post/[id]/+page.svelte
index 73f2aa9..b885ec7 100644
--- a/web/app/src/routes/post/[id]/+page.svelte
+++ b/web/app/src/routes/post/[id]/+page.svelte
@@ -6,6 +6,7 @@
     import ViewPostPanel from "$lib/components/panels/ViewPostPanel.svelte";
 
     import { page } from "$app/stores";
+    import ShiorikoImage from "$lib/components/ui/ShiorikoImage.svelte";
     const { id } = $page.params;
 
     let post: any = $state();
@@ -14,6 +15,7 @@
         post = data;
         imagePercentage = ((1000 * 100) / post.width).toFixed(0) + "%";
     };
+    let isOriginal = $state(false);
 
     const trimUrl = (str: string) => {
         if (str.length > 30) {
@@ -88,19 +90,22 @@
                     {/if}
                 </div>
                 <div class="column box">
-                    {#if post.width > 1000}
+                    {#if post.width > 1000 && isOriginal == false}
                         <div class="notification is-info">
                             Resized to {imagePercentage} of the original image.
-                            <a href={post.image_path} target="_blank"
+                            <a onclick="{() => { isOriginal = true; }}"
                                 >View original</a
                             >
                         </div>
                         <figure class="image">
-                            <img alt={post.id} src={post.preview_path} />
+                            <ShiorikoImage alt={post.id} src={post.preview_path} />
                         </figure>
                     {:else}
+                    <div class="notification is-primary">
+                        Currently viewing original image.
+                    </div>
                         <figure class="image">
-                            <img alt={post.id} src={post.image_path} />
+                            <ShiorikoImage alt={post.id} src={post.image_path} />
                         </figure>
                     {/if}
                 </div>