Skeleton: Fetch RaceResults asynchronously in root layout

src/routes/+layout.ts

@@ -3,7 +3,7 @@ import { pb, pbUser } from "$lib/pocketbase";
 // This makes the page client-side rendered
 export const ssr = false;
 
-import type { Driver, Graphic, Race, Substitution, Team } from "$lib/schema";
+import type { Driver, Graphic, Race, RaceResult, Substitution, Team } from "$lib/schema";
 import type { LayoutLoad } from "./$types";
 
 // On each page load (every route), this function runs serverside.
@@ -76,16 +76,27 @@ export const load: LayoutLoad = () => {
     return substitutions;
   };
 
+  const fetch_raceresults = async (): Promise<RaceResult[]> => {
+    const raceresults: RaceResult[] = await pb
+      .collection("raceresultsdesc")
+      .getFullList({ fetch: fetch });
+
+    return raceresults;
+  };
+
   return {
-    // User information
+    // User information (synchronous)
     user: pbUser,
     admin: pbUser?.admin ?? false,
 
-    // Return static data asynchronously
+    // Return static data
     graphics: fetch_graphics(),
     teams: fetch_teams(),
     drivers: fetch_drivers(),
     races: fetch_races(),
     substitutions: fetch_substitutions(),
+
+    // Return other data
+    raceresults: fetch_raceresults(),
   };
 };

src/routes/data/raceresults/+page.svelte

@@ -11,7 +11,11 @@
   const modalStore: ModalStore = getModalStore();
 
   const result_handler = async (event: Event, id?: string) => {
-    const result: RaceResult | undefined = get_by_value(data.results, "id", id ?? "Invalid");
+    const result: RaceResult | undefined = get_by_value(
+      await data.raceresults,
+      "id",
+      id ?? "Invalid",
+    );
 
     if (id && !result) return;
 
@@ -90,4 +94,6 @@
     <span class="font-bold">Create Race Result</span>
   </Button>
 </div>
-<Table data={data.results} columns={results_columns} handler={result_handler} />
+{#await data.raceresults then results}
+  <Table data={results} columns={results_columns} handler={result_handler} />
+{/await}

src/routes/data/raceresults/+page.ts

@@ -1,18 +0,0 @@
-import { pb } from "$lib/pocketbase";
-import type { RaceResult } from "$lib/schema";
-import type { PageLoad } from "../../$types";
-
-export const load: PageLoad = async ({ fetch }) => {
-  // TODO: Duplicated code from racepicks/+page.server.ts
-  const fetch_raceresults = async (): Promise<RaceResult[]> => {
-    const raceresults: RaceResult[] = await pb
-      .collection("raceresultsdesc")
-      .getFullList({ fetch: fetch });
-
-    return raceresults;
-  };
-
-  return {
-    results: await fetch_raceresults(),
-  };
-};

src/routes/racepicks/+page.ts

@@ -1,5 +1,5 @@
 import { pb } from "$lib/pocketbase";
-import type { CurrentPickedUser, Race, RacePick, RaceResult } from "$lib/schema";
+import type { CurrentPickedUser, Race, RacePick } from "$lib/schema";
 import type { PageLoad } from "../$types";
 
 export const load: PageLoad = async ({ fetch }) => {
@@ -36,21 +36,9 @@ export const load: PageLoad = async ({ fetch }) => {
 
     return currentpickedusers;
   };
-
-  // TODO: Duplicated code from data/raceresults/+page.server.ts
-  const fetch_raceresults = async (): Promise<RaceResult[]> => {
-    // Don't expand races/pxxs/dnfs since we already fetched those
-    const raceresults: RaceResult[] = await pb
-      .collection("raceresultsdesc")
-      .getFullList({ fetch: fetch });
-
-    return raceresults;
-  };
-
   return {
     racepicks: fetch_racepicks(),
     currentpickedusers: fetch_currentpickedusers(),
-    raceresults: fetch_raceresults(),
 
     currentrace: await fetch_currentrace(),
   };