Damillora/Shioriko
1
0
Fork 0
mirror of https://github.com/Damillora/Shioriko.git synced 2025-02-23 09:23:38 +00:00
Code Issues Projects Releases Wiki Activity

feat: use loading skeletons for images

Browse Source
This commit is contained in:
Damillora 2025-02-22 15:02:10 +00:00
parent 4d11c9c5fe
commit 413579e08d
4 changed files with 35 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
web/app/src/lib/components/ui/PostGallery.svelte
View File

@ -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>

23
web/app/src/lib/components/ui/ShiorikoImage.svelte Normal file
View File

@ -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>

2
web/app/src/routes/+page.svelte
View File

@ -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}

13
web/app/src/routes/post/[id]/+page.svelte
View File

@ -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>