server rendering improvements

web/src/lib/components/nav_bar.svelte

@@ -2,6 +2,7 @@
     import { afterNavigate, goto } from "$app/navigation";
     import { page } from "$app/stores";
     import LogoText from "$lib/components/logo/logo_text.svelte";
+    import { pb } from "$lib/pocketbase";
     import { theme, toggleTheme } from "$lib/stores/theme_store";
     import { currentUser, logout } from "$lib/stores/user_store";
     import { getFileURL } from "$lib/util/file_util";
@@ -121,27 +122,30 @@
     </div>
     <hr class="my-6 border-input-border" />
     <div class="flex flex-col basis-full">
-        {#if $currentUser}
+        {#if pb.authStore.model}
             <a
-                class="btn-primary btn-large text-center mx-4"
+                class="btn-primary text-center mx-4"
                 href="/trail/edit/new"
                 ><i class="fa fa-plus mr-2"></i>{$_("new-trail")}</a
             >
             <div class="basis-full"></div>
             <hr class="border-input-border" />
             <div class="flex gap-4 items-center justify-between m-4">
-                <a href="/profile/{$currentUser.id}">
+                <a href="/profile/{pb.authStore.model.id}">
                     <img
                         class="rounded-full w-10 aspect-square"
-                        src={getFileURL($currentUser, $currentUser.avatar) ||
+                        src={getFileURL(
-                            `https://api.dicebear.com/7.x/initials/svg?seed=${$currentUser.username}&backgroundType=gradientLinear`}
+                            pb.authStore.model,
+                            pb.authStore.model.avatar,
+                        ) ||
+                            `https://api.dicebear.com/7.x/initials/svg?seed=${pb.authStore.model.username}&backgroundType=gradientLinear`}
                         alt="avatar"
                     />
                 </a>
-                <a href="/profile/{$currentUser.id}">
+                <a href="/profile/{pb.authStore.model.id}">
-                    <p class="text-sm">{$currentUser.username}</p>
+                    <p class="text-sm">{pb.authStore.model.username}</p>
                     <p class="text-sm text-gray-500">
-                        {$currentUser.email}
+                        {pb.authStore.model.email}
                     </p>
                 </a>
                 <button
@@ -182,7 +186,7 @@
                 data-sveltekit-preload-data="off">{item.text}</a
             >
         {/each}
-        {#if $currentUser}
+        {#if pb.authStore.model}
             <a
                 class="font-semibold z-10"
                 href="/lists"
@@ -191,7 +195,7 @@
             >
         {/if}
     </menu>
-    {#if $currentUser}
+    {#if pb.authStore.model}
         <div class="hidden lg:flex gap-6 items-center">
             <button
                 class="btn-icon fa-regular fa-{$theme === 'light'
@@ -218,10 +222,10 @@
                         <img
                             class="rounded-full w-full h-full"
                             src={getFileURL(
-                                $currentUser,
+                                pb.authStore.model,
-                                $currentUser.avatar,
+                                pb.authStore.model.avatar,
                             ) ||
-                                `https://api.dicebear.com/7.x/initials/svg?seed=${$currentUser.username}&backgroundType=gradientLinear`}
+                                `https://api.dicebear.com/7.x/initials/svg?seed=${pb.authStore.model.username}&backgroundType=gradientLinear`}
                             alt="avatar"
                         />
                     </button>

web/src/lib/components/trail/trail_info_panel.svelte

@@ -42,6 +42,7 @@
     import EmptyStatePhotos from "../empty_states/empty_state_photos.svelte";
     import EmptyStateWaypoint from "../empty_states/empty_state_waypoint.svelte";
     import EmptyStateDescription from "../empty_states/empty_state_description.svelte";
+    import { browser } from "$app/environment";
 
     export let trail: Trail;
     export let mode: "overview" | "map" | "list" = "map";
@@ -53,7 +54,7 @@
         $_("waypoints", { values: { n: 2 } }),
         $_("photos"),
         $_("summit-book"),
-        ...($currentUser ? [$_("comment", { values: { n: 2 } })] : []),
+        ...(pb.authStore.model ? [$_("comment", { values: { n: 2 } })] : []),
     ];
 
     const trailIsShared =
@@ -69,11 +70,11 @@
 
     let newComment: Comment = new Comment("", 0, "", trail.id ?? "");
 
-    let commentsLoading: boolean = false;
+    let commentsLoading: boolean = activeTab == 4;
     let commentCreateLoading: boolean = false;
     let commentDeleteLoading: boolean = false;
 
-    $: if (activeTab == 4) {
+    $: if (browser && activeTab == 4) {
         fetchComments();
     }
 
@@ -402,7 +403,9 @@
                             ></SkeletonNotificationCard>
                         {/each}
                     {:else if $comments.length == 0}
-                        <div class="my-4"><EmptyStateComment></EmptyStateComment></div>
+                        <div class="my-4">
+                            <EmptyStateComment></EmptyStateComment>
+                        </div>
                     {:else}
                         <ul class="space-y-4">
                             {#each $comments ?? [] as comment}

web/src/lib/stores/theme_store.ts

@@ -3,7 +3,22 @@ import { get, writable, type Writable } from "svelte/store";
 
 type Theme = "dark" | "light"
 
-export const theme: Writable<Theme> = writable(browser && localStorage.getItem("theme") as Theme || "light" );
+export const theme: Writable<Theme> = writable(getDefaultTheme());
+
+function getDefaultTheme(): Theme {
+    if (browser) {
+        if (localStorage.getItem("theme")) {
+            return localStorage.getItem("theme") as Theme;
+        } else if (document.documentElement.classList.contains("light")) {
+            return "light"
+        } else if (document.documentElement.classList.contains("dark")) {
+            return "dark";
+        }
+    }
+
+    return "light";
+
+}
 
 export function toggleTheme() {
     const currentTheme = get(theme);

web/src/routes/+layout.ts

@@ -3,6 +3,8 @@ import '$lib/i18n'
 import { waitLocale } from 'svelte-i18n'
 import type { LayoutLoad } from './$types'
 
-export const load: LayoutLoad = async () => {
+export const load: LayoutLoad = async ({ data }) => {
 	await waitLocale()
+
+	return data;
 }

web/src/routes/map/+page.svelte

@@ -39,7 +39,7 @@
 
     const MIN_ZOOM = 6;
 
-    let loading: boolean = false;
+    let loading: boolean = true;
 
     onMount(async () => {});
 

web/src/routes/trails/+page.svelte

@@ -10,7 +10,7 @@
 
     let filterExpanded: boolean = true;
 
-    let loading: boolean = false;
+    let loading: boolean = true;
 
     const filter: TrailFilter = $page.data.filter;
     const pagination: { page: number; totalPages: number } = {