improve loading ux

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@yusurko/vigil",
 	"private": true,
-	"version": "0.1.0-dev50",
+	"version": "0.1.0-dev51",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",

src/lib/globals.svelte.ts

@@ -4,14 +4,16 @@ import { RiListOrdered } from "svelte-remixicon";
 
 let health : {
     app_name: string, version: string, post_count: number,
-    user_count: number, me: null | UserEntry, color_theme: number
+    user_count: number, me: null | UserEntry, color_theme: number,
+    loaded: boolean
 } = $state({
-    app_name: 'app_name',
+    app_name: 'Freak',
     version: "?.?",
     post_count: NaN,
     user_count: NaN,
     me: null,
-    color_theme: 0
+    color_theme: 0,
+    loaded: false
 });
 
 
@@ -21,6 +23,7 @@ export function setHealth ({ name, version, post_count, user_count, color_theme
     health.post_count = post_count;
     health.user_count = user_count;
     health.color_theme = color_theme;
+    health.loaded = true;
 }
 
 export function setMe (me: UserEntry | null) {
@@ -61,3 +64,7 @@ export function randomChoice<T>(list: T[]): T {
 export function getColorThemeCode (): number {
     return health.color_theme;
 }
+
+export function isLoaded(): boolean {
+    return health.loaded;
+}

src/routes/+layout.svelte

@@ -27,7 +27,7 @@ let colorThemeCls = $derived(`color-scheme-${colorScheme} color-theme-${colorThe
 </script>
 
 <svelte:head>
-  <meta name="og:site_name" content="app_name" />
+  <meta name="og:site_name" content="Freak" />
   {#if data}
   <meta name="generator" content={`Freak (frontend ${version} + Svelte 5, backend ${bkVersion()}); https://nekode.yusur.moe/yusur/freak`} />
   {/if}

src/routes/+page.svelte

@@ -3,7 +3,7 @@
   import type { GuildEntry, PostEntry } from "$lib/backend";
   import Centered from "$lib/Centered.svelte";
   import Feed from "$lib/Feed.svelte";
-  import { activePostCount, activeUserCount, appName, getMe } from "$lib/globals.svelte";
+  import { activePostCount, activeUserCount, appName, getMe, isLoaded } from "$lib/globals.svelte";
   import HomeMenu from "$lib/HomeMenu.svelte";
   import SLayout from "$lib/SLayout.svelte";
 
@@ -46,6 +46,10 @@
     {/if}
   {/snippet}
 </SLayout>
+{:else if !isLoaded()}
+<Centered>
+  <p>{appName()} is now loading…</p>
+</Centered>
 {:else}
 <Centered>
   <p>{appName()} is a social media platform made by people like you.<br />