Skeleton: Delegate data fetching to specific routes and only load what's needed

src/routes/+layout.ts

@@ -1,38 +1,22 @@
-import {
+import { fetch_graphics } from "$lib/fetch";
-  fetch_drivers,
-  fetch_graphics,
-  fetch_raceresults,
-  fetch_races,
-  fetch_substitutions,
-  fetch_teams,
-} from "$lib/fetch";
 import { pbUser } from "$lib/pocketbase";
+import type { LayoutLoad } from "./$types";
 
 // This makes the page client-side rendered
 export const ssr = false;
 
-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.
 // The "locals.user" object is only available on the server,
 // since it's populated inside hooks.server.ts per request.
 // It will populate the "user" attribute of each page's "data" object,
 // so each page has access to the current user (or knows if no one is signed in).
-export const load: LayoutLoad = () => {
+export const load: LayoutLoad = async () => {
   return {
     // User information (synchronous)
     user: pbUser,
     admin: pbUser?.admin ?? false,
 
     // Return static data
-    graphics: fetch_graphics(fetch),
+    graphics: await fetch_graphics(fetch),
-    teams: fetch_teams(fetch),
-    drivers: fetch_drivers(fetch),
-    races: fetch_races(fetch),
-    substitutions: fetch_substitutions(fetch),
-
-    // Return other data
-    raceresults: fetch_raceresults(fetch),
   };
 };

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

@@ -0,0 +1,10 @@
+import { fetch_drivers, fetch_raceresults, fetch_races } from "$lib/fetch";
+import type { PageLoad } from "../../$types";
+
+export const load: PageLoad = async ({ fetch }) => {
+  return {
+    drivers: fetch_drivers(fetch),
+    races: fetch_races(fetch),
+    raceresults: fetch_raceresults(fetch),
+  };
+};

src/routes/data/season/drivers/+page.ts

@@ -0,0 +1,9 @@
+import { fetch_drivers, fetch_teams } from "$lib/fetch";
+import type { PageLoad } from "../../../$types";
+
+export const load: PageLoad = async ({ fetch }) => {
+  return {
+    teams: fetch_teams(fetch),
+    drivers: fetch_drivers(fetch),
+  };
+};

src/routes/data/season/races/+page.ts

@@ -0,0 +1,8 @@
+import { fetch_races } from "$lib/fetch";
+import type { PageLoad } from "../../../$types";
+
+export const load: PageLoad = async ({ fetch }) => {
+  return {
+    races: fetch_races(fetch),
+  };
+};

src/routes/data/season/substitutions/+page.ts

@@ -0,0 +1,10 @@
+import { fetch_drivers, fetch_races, fetch_substitutions } from "$lib/fetch";
+import type { PageLoad } from "../../../$types";
+
+export const load: PageLoad = async ({ fetch }) => {
+  return {
+    races: fetch_races(fetch),
+    drivers: fetch_drivers(fetch),
+    substitutions: fetch_substitutions(fetch),
+  };
+};

src/routes/data/season/teams/+page.ts

@@ -0,0 +1,8 @@
+import { fetch_teams } from "$lib/fetch";
+import type { PageLoad } from "../../../$types";
+
+export const load: PageLoad = async ({ fetch }) => {
+  return {
+    teams: fetch_teams(fetch),
+  };
+};

src/routes/racepicks/+page.ts

@@ -1,10 +1,20 @@
-import { fetch_currentpickedusers, fetch_currentrace, fetch_racepicks } from "$lib/fetch";
+import {
+  fetch_currentpickedusers,
+  fetch_currentrace,
+  fetch_drivers,
+  fetch_racepicks,
+  fetch_raceresults,
+  fetch_races,
+} from "$lib/fetch";
 import type { PageLoad } from "../$types";
 
 export const load: PageLoad = async ({ fetch }) => {
   return {
     racepicks: fetch_racepicks(fetch),
     currentpickedusers: fetch_currentpickedusers(fetch),
+    raceresults: fetch_raceresults(fetch),
+    drivers: fetch_drivers(fetch),
+    races: fetch_races(fetch),
 
     currentrace: await fetch_currentrace(fetch),
   };