fixes trail flashing on home nav

web/src/lib/stores/trail_store.ts

@@ -15,7 +15,7 @@ export const trail: Writable<Trail> = writable(new Trail(""));
 
 export const editTrail: Writable<Trail> = writable(new Trail(""));
 
-export async function trails_index(perPage: number = 21, random: boolean = false, f: (url: RequestInfo | URL, config?: RequestInit) => Promise<Response> = fetch) {
+export async function trails_index(perPage: number = 21, random: boolean = false, setStore: boolean = true, f: (url: RequestInfo | URL, config?: RequestInit) => Promise<Response> = fetch) {
     const r = await f('/api/v1/trail?' + new URLSearchParams({
         "per-page": perPage.toString(),
         expand: "category,waypoints,summit_logs",
@@ -26,7 +26,9 @@ export async function trails_index(perPage: number = 21, random: boolean = false
     const response = await r.json()
 
     if (r.ok) {
+        if(setStore) {
             trails.set(response.items);
+        }
         return response.items;
     } else {
         throw new ClientResponseError(response)

web/src/routes/+page.svelte

@@ -13,6 +13,8 @@
     import { Canvas } from "@threlte/core";
     import { _ } from "svelte-i18n";
 
+    export let data;
+
     let searchDropdownItems: SearchItem[] = [];
 
     async function search(q: string) {
@@ -108,7 +110,7 @@
         id="trails"
         class="flex flex-wrap justify-items-center gap-8 py-8 order-1 md:order-none"
     >
-        {#if $trails.length == 0}
+        {#if data.trails.length == 0}
             <div>
                 <img
                     style="max-width: min(450px, 100%)"
@@ -118,14 +120,14 @@
                 />
             </div>
         {/if}
-        {#each { length: Math.min($trails.length, 4) } as _, i}
-            <a href="/trail/view/{$trails[i].id}">
-                <TrailCard trail={$trails[i]}></TrailCard></a
+        {#each { length: Math.min(data.trails.length, 4) } as _, i}
+            <a href="/trail/view/{data.trails[i].id}">
+                <TrailCard trail={data.trails[i]}></TrailCard></a
             >
         {/each}
     </div>
     <div class="max-w-md md:mx-auto space-y-8">
-        {#if $trails.length == 0}
+        {#if data.trails.length == 0}
             <h2 class="text-4xl md:text-5xl font-bold">
                 {$_("hero_section_1_heading")}
             </h2>

web/src/routes/+page.ts

@@ -1,8 +1,11 @@
+import type { Trail } from "$lib/models/trail";
 import { categories_index } from "$lib/stores/category_store";
 import { trails_index } from "$lib/stores/trail_store";
 import type { ServerLoad } from "@sveltejs/kit";
 
 export const load: ServerLoad = async ({ params, locals, fetch }) => {
-    await trails_index(20, true, fetch)
+    const trails: Trail[] = await trails_index(20, true, false, fetch)
     await categories_index(fetch)
+
+    return {trails}
 };