feat: add loading states

web/app/src/lib/components/ui/ShiorikoImage.svelte

@@ -3,6 +3,7 @@
 
     let { alt, src } = $props();
     let loading = $state(false);
+	let failed = $state(false);
 
 	onMount(() => {
 			const img = new Image();
@@ -11,13 +12,22 @@
 
 			img.onload = () => {
 					loading = false;
+					failed = false;
 			};
 			img.onerror = () => {
 					loading = true;
+					failed = true;
 			};
 	})
 </script>
 
+{#if !failed}
+
 <figure class:is-skeleton="{loading}">
 	<img {src} {alt} />
 </figure>
+{:else}
+<div class="notification is-danger is-light">
+	There was an error loading this image.
+</div>
+{/if}

web/app/src/lib/components/ui/TagLinkNumbered.svelte

@@ -9,7 +9,9 @@
 </script>
 
 <a href="/posts?tags={tagName}">
+    <span>
         {tagDisplay}
+    </span>
     <TagTypeIndicator tagType={tagType}></TagTypeIndicator>
     <span class="is-pulled-right">{num}</span>
 </a>

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

@@ -15,6 +15,7 @@
         post = data;
         imagePercentage = ((1000 * 100) / post.width).toFixed(0) + "%";
     };
+    let loading = $state(false);
     let isOriginal = $state(false);
 
     const trimUrl = (str: string) => {
@@ -53,11 +54,11 @@
     let imagePercentage = $state("0%");
 </script>
 
-{#if post}
 <div class="container">
     <section class="section">
         <div class="columns">
             <div class="column is-one-third">
+                {#if post}
                     {#if editMenuShown == false && deleteMenuShown == false}
                         <ViewPostPanel
                             {post}
@@ -88,8 +89,14 @@
                             </div>
                         </div>
                     {/if}
+                {:else}
+                    <div class="skeleton-block">
+
+                    </div>
+                {/if}
             </div>
             <div class="column box">
+                {#if post}
                     {#if post.width > 1000 && isOriginal == false}
                         <div class="notification is-info">
                             Resized to {imagePercentage} of the original image.
@@ -108,8 +115,12 @@
                             <ShiorikoImage alt={post.id} src={post.image_path} />
                         </figure>
                     {/if}
+                {:else}
+                    <div class="skeleton-block">
+
+                    </div>
+                {/if}
             </div>
         </div>
     </section>
 </div>
-{/if}

web/app/src/routes/posts/+page.svelte

@@ -23,6 +23,7 @@
     let tags = $state([]);
     let tagInfo = $state(null);
     let categorizedTags = {};
+    let loading = $state(false);
 
     const getData = async () => {
         const data = await getPosts({ page, q: searchTerms.join("+") });
@@ -49,6 +50,7 @@
         if (searchTerms.filter((x) => !x.startsWith("-")).length == 1) {
             tagInfo = await getTag({ tag: searchTerms[0] });
         }
+        loading = false;
     };
     let tagQuery = $state();
 
@@ -62,6 +64,7 @@
     };
 
     afterNavigate(() => {
+        loading = true;
         tagQuery = url.searchParams.get("tags");
         if (tagQuery) {
             searchTerms = tagQuery.split(" ");
@@ -99,7 +102,7 @@
                 </div>
                 <div class="column is-one-third">
                     <div class="panel is-primary">
-                        <div class="panel-heading">Tags</div>
+                        <div class="panel-heading">Menu</div>
                         <div class="panel-block column">
                             <form onsubmit={onSearch}>
                                 <div class="field">
@@ -128,6 +131,11 @@
                             </form>
                         </div>
                         <div class="panel-block column">
+                            {#if !loading}
+                                <div class="row">
+                                    <strong>Tags:</strong>
+                                </div>
+                                <div class="row">
                                     <div class="menu">
                                         <ul class="menu-list">
                                             {#each tags as tag (tag)}
@@ -144,6 +152,10 @@
                                         </ul>
                                     </div>
                                 </div>
+                            {:else}
+                                <div class="skeleton-block"></div>
+                            {/if}
+                        </div>
                     </div>
                     {#if tagInfo}
                         <div class="panel is-info">
@@ -169,6 +181,7 @@
                 </div>
                 <div class="column is-two-thirds">
                     <div class="columns is-multiline">
+                        {#if !loading}
                             <div class="column is-full">
                                 <PostGallery {posts} />
                             </div>
@@ -182,7 +195,8 @@
                                         href={null}
                                         onclick={() => changePage(page - 1)}
                                         class="pagination-previous"
-                                    class:is-disabled={page == 1}>Previous</a
+                                        class:is-disabled={page == 1}
+                                        >Previous</a
                                     >
                                     <a
                                         href={null}
@@ -205,7 +219,9 @@
                                                     <a
                                                         href={null}
                                                         onclick={() =>
-                                                        changePage(pageEntry)}
+                                                            changePage(
+                                                                pageEntry,
+                                                            )}
                                                         class="pagination-link"
                                                         class:is-current={page ==
                                                             pageEntry}
@@ -218,6 +234,11 @@
                                     </ul>
                                 </nav>
                             </div>
+                        {:else}
+                            <div class="column">
+                                <div class="skeleton-block"></div>
+                            </div>
+                        {/if}
                     </div>
                 </div>
             </div>

web/app/src/routes/tags/+page.svelte

@@ -6,13 +6,16 @@
     import TagTypeIndicator from '$lib/components/ui/TagTypeIndicator.svelte';
 
     let tags = $state([]);
+    let loading = $state(false);
 
     const getData = async () => {
         const data = await getTags();
         tags = data;
+        loading = false;
     };
     
     afterNavigate(() => {
+        loading = true;
         getData();
     })
 </script>
@@ -21,6 +24,7 @@
 <section class="section">
     <div class="container">
         <h1 class="title">Tag List</h1>
+        {#if !loading}
         <table class="table is-fullwidth">
             <thead>
                 <tr>
@@ -41,5 +45,8 @@
                 {/each}
             </tbody>
         </table>
+        {:else}
+        <div class="skeleton-block"></div>
+        {/if}
     </div>
 </section>

web/app/src/routes/tags/[tag]/+page.svelte

@@ -8,7 +8,6 @@
     import EditTagPanel from "$lib/components/panels/EditTagPanel.svelte";
     import PostGallery from "$lib/components/ui/PostGallery.svelte";
 
-
     import { page } from "$app/stores";
     let { tag } = $state($page.params);
 
@@ -51,9 +50,9 @@
 
 <section class="section">
     <div class="container">
-        {#if data}
         <div class="columns">
             <div class="column is-one-third">
+                {#if data}
                     {#if renameMenuShown}
                         <EditTagPanel
                             {tag}
@@ -64,8 +63,12 @@
                     {:else}
                         <ViewTagPanel {tag} {data} {toggleRenameMenu} />
                     {/if}
+                {:else}
+                    <div class="skeleton-block"></div>
+                {/if}
             </div>
             <div class="column is-two-thirds">
+                {#if data}
                     {#if editMenuShown}
                         <EditTagNotesPanel
                             {tag}
@@ -78,8 +81,10 @@
                     {/if}
                     <h1 class="title">Posts</h1>
                     <PostGallery {posts} />
-                </div>
+                {:else}
-            </div>
+                    <div class="skeleton-block"></div>
                 {/if}
             </div>
+        </div>
+    </div>
 </section>