add upvote count, fix loading issues

src/lib/FullPost.svelte

@@ -10,6 +10,7 @@
     import PostMeta from "./PostMeta.svelte";
     import GuildMenu from "./GuildMenu.svelte";
     import { SvelteShowdown } from "svelte-showdown";
+    import VoteButton from "./VoteButton.svelte";
 
 
 
@@ -32,6 +33,7 @@ let { title, created_at, id, content = '', to } = post;
         </div><!-- .post-body -->
         <div class="message-stats">
           <!-- upvotes / downvotes -->
+          <VoteButton />
         </div>
         <ul class="message-options row">
         </ul>
@@ -56,7 +58,23 @@ let { title, created_at, id, content = '', to } = post;
 </SLayout>
 
 <style>
+  .post-frame {
+    position: relative;
+  }
   .post-content {
     overflow-x: auto;
   }
+  .post-body {
+    margin-inline-start: 3em;
+  }
+  .message-stats {
+    position: absolute;
+    inset-inline-start: 0;
+    top: 0;
+    width: 3em;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+  }
 </style>

src/lib/VoteButton.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+    import { RiHeartFill, RiHeartLine, RiThumbDownFill, RiThumbDownLine } from "svelte-remixicon";
+
+
+let vote = $state(0);
+let { score } : { score?: number | null } = $props();
+
+</script>
+
+<div class="upvote-button">
+  {#if vote > 0}
+  <button class="inline">
+    <RiHeartFill />
+  </button>
+  {:else}
+  <button class="inline">
+    <RiHeartLine />
+  </button>
+  {/if}
+
+  <strong>{score ?? '-'}</strong>
+
+  {#if vote > 0}
+  <button class="inline">
+    <RiThumbDownFill />
+  </button>
+  {:else}
+  <button class="inline">
+    <RiThumbDownLine />
+  </button>
+  {/if}
+</div>
+
+<style>
+  .upvote-button {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+</style>
+

src/lib/globals.svelte.ts

@@ -47,3 +47,6 @@ export function activeUserCount (): number{
     return health.user_count || 0;
 }
 
+export async function sleep (ms: number): Promise<void> {
+    return new Promise(resolve => setTimeout(resolve, ms));
+}

src/routes/+page.ts

@@ -1,7 +1,8 @@
 import { backend, type GuildEntry, type PostEntry } from '$lib/backend.js';
-import { getMe } from '$lib/globals.svelte.js';
+import { getMe, sleep } from '$lib/globals.svelte.js';
 import type { LoadEvent } from '@sveltejs/kit';
 
+let isFirstLoad = false;
 
 async function loadFeed (event: LoadEvent): Promise<PostEntry[] | null> {
     const resp = await backend.withEvent(event).fetch('home/feed');
@@ -40,6 +41,12 @@ async function loadTopGuilds (event: LoadEvent): Promise<GuildEntry[] | null> {
 }
 
 export async function load(event): Promise<{feed: PostEntry[] | null, top_guilds?: GuildEntry[] | null}> {
+    // delay loading after layout
+    if (!isFirstLoad) {
+        await sleep(2000);
+        isFirstLoad = true;
+    }
+
     let feed = null;
     let me = getMe();
     let top_guilds = null;