From 675f12935c660ded708bd6b3b09f9c89d67636ab Mon Sep 17 00:00:00 2001
From: Damillora <developer@damillora.com>
Date: Sat, 22 Feb 2025 14:37:20 +0000
Subject: [PATCH] feat: add post count to homepage

---
 web/app/src/routes/+layout.svelte |  2 +-
 web/app/src/routes/+page.svelte   | 12 ++++++++----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/web/app/src/routes/+layout.svelte b/web/app/src/routes/+layout.svelte
index 95ac25a..3e09f57 100644
--- a/web/app/src/routes/+layout.svelte
+++ b/web/app/src/routes/+layout.svelte
@@ -21,7 +21,7 @@
 <footer class="footer">
     <div class="content has-text-centered">
       <p>
-        <strong><a href="https://github.com/Damillora/Shioriko">Shioriko</a></strong>: a booru-style image gallery written in Go and Svelte
+        <strong><a href="https://github.com/Damillora/Shioriko">shioriko</a></strong>: a booru-style image gallery written in Go and Svelte
       </p>
     </div>
   </footer>
\ No newline at end of file
diff --git a/web/app/src/routes/+page.svelte b/web/app/src/routes/+page.svelte
index 6884781..50e9341 100644
--- a/web/app/src/routes/+page.svelte
+++ b/web/app/src/routes/+page.svelte
@@ -8,6 +8,7 @@
 
   let searchTerms: string[] = $state([]);
   let postCount: number = $state(0);
+  let postCountLoaded: boolean = $state(false);
 
   const onTagChange = (value) => {
     searchTerms = value.detail.tags;
@@ -30,6 +31,7 @@
   const getCounts = async () => {
     const response = await getPostCount();
     postCount = response.postCount;
+    postCountLoaded = true;
   };
   onMount(() => {
     getCounts();
@@ -42,8 +44,8 @@
       <div class="columns is-centered">
         <div class="column is-12-tablet is-8-desktop is-8-widescreen">
           <div class="box has-text-centered">
-            <p class="title">Shioriko</p>
-            <p class="subtitle">Booru-style gallery written in Go and Svelte</p>
+            <p class="title">shioriko</p>
+            <p class="subtitle">a booru-style gallery written in Go and Svelte</p>
             <div class="block">
               <form onsubmit={onSearch}>
                 <div class="field">
@@ -66,8 +68,10 @@
                 </div>
               </form>
             </div>
-            {#if postCount > 0}
-              <p class="block">Serving <strong>{postCount}</strong> images</p>
+            {#if postCountLoaded}
+              <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}
           </div>
         </div>