Racepicks: Stream loaded data and resolve promises in markup

src/lib/components/cards/RacePickCard.svelte

@@ -1,6 +1,14 @@
 <script lang="ts">
   import { Card, Button, Dropdown } from "$lib/components";
-  import type { Driver, Race, RacePick, SkeletonData, Substitution } from "$lib/schema";
+  import type {
+    CurrentPickedUser,
+    Driver,
+    Race,
+    RacePick,
+    RaceResult,
+    SkeletonData,
+    Substitution,
+  } from "$lib/schema";
   import { get_by_value, get_driver_headshot_template } from "$lib/database";
   import type { Action } from "svelte/action";
   import { getModalStore, type ModalStore } from "@skeletonlabs/skeleton";
@@ -10,7 +18,12 @@
 
   interface RacePickCardProps {
     /** Data passed from the page context */
-    data: SkeletonData & { currentrace: Race };
+    data: SkeletonData & {
+      currentrace: Race;
+      racepicks: Promise<RacePick[]>;
+      currentpickedusers: Promise<CurrentPickedUser[]>;
+      raceresults: Promise<RaceResult[]>;
+    };
 
     /** The [RacePick] object used to prefill values. */
     racepick?: RacePick;