From 735c73e435e9cc2b9a8e69044047b1acb796ddc1 Mon Sep 17 00:00:00 2001
From: Christoph Urlacher <christoph.urlacher@protonmail.com>
Date: Wed, 5 Feb 2025 20:38:28 +0100
Subject: [PATCH] Racepicks: Stream loaded data and resolve promises in markup

---
 src/lib/components/cards/RacePickCard.svelte |  17 +-
 src/routes/racepicks/+page.server.ts         | 117 +++---
 src/routes/racepicks/+page.svelte            | 389 ++++++++++---------
 3 files changed, 277 insertions(+), 246 deletions(-)

diff --git a/src/lib/components/cards/RacePickCard.svelte b/src/lib/components/cards/RacePickCard.svelte
index a1d1fe3..dd6f50d 100644
--- a/src/lib/components/cards/RacePickCard.svelte
+++ b/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;
diff --git a/src/routes/racepicks/+page.server.ts b/src/routes/racepicks/+page.server.ts
index d99e853..615470d 100644
--- a/src/routes/racepicks/+page.server.ts
+++ b/src/routes/racepicks/+page.server.ts
@@ -2,65 +2,6 @@ import { form_data_clean, form_data_ensure_keys, form_data_get_and_remove_id } f
 import type { CurrentPickedUser, Race, RacePick, RaceResult } from "$lib/schema";
 import type { Actions, PageServerLoad } from "./$types";
 
-export const load: PageServerLoad = async ({ fetch, locals }) => {
-  const fetch_racepicks = async (): Promise<RacePick[]> => {
-    // Don't expand race/pxx/dnf since we already fetched those
-    const racepicks: RacePick[] = await locals.pb
-      .collection("racepicks")
-      .getFullList({ fetch: fetch, expand: "user" });
-
-    // TODO: Fill in the expanded race pictogram_url fields
-
-    return racepicks;
-  };
-
-  const fetch_currentrace = async (): Promise<Race | null> => {
-    const currentrace: Race[] = await locals.pb.collection("currentrace").getFullList();
-
-    // The currentrace collection either has a single or no entries
-    if (currentrace.length == 0) return null;
-
-    currentrace[0].pictogram_url = await locals.pb.files.getURL(
-      currentrace[0],
-      currentrace[0].pictogram,
-    );
-
-    return currentrace[0];
-  };
-
-  const fetch_currentpickedusers = async (): Promise<CurrentPickedUser[]> => {
-    const currentpickedusers: CurrentPickedUser[] = await locals.pb
-      .collection("currentpickedusers")
-      .getFullList();
-
-    currentpickedusers.map((currentpickeduser: CurrentPickedUser) => {
-      if (currentpickeduser.avatar) {
-        currentpickeduser.avatar_url = locals.pb.files.getURL(
-          currentpickeduser,
-          currentpickeduser.avatar,
-        );
-      }
-    });
-
-    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 locals.pb.collection("raceresultsdesc").getFullList();
-
-    return raceresults;
-  };
-
-  return {
-    racepicks: await fetch_racepicks(),
-    currentrace: await fetch_currentrace(),
-    currentpickedusers: await fetch_currentpickedusers(),
-    raceresults: await fetch_raceresults(),
-  };
-};
-
 export const actions = {
   create_racepick: async ({ request, locals }) => {
     const data: FormData = form_data_clean(await request.formData());
@@ -91,3 +32,61 @@ export const actions = {
     await locals.pb.collection("racepicks").delete(id);
   },
 } satisfies Actions;
+
+export const load: PageServerLoad = async ({ fetch, locals }) => {
+  const fetch_currentrace = async (): Promise<Race | null> => {
+    const currentrace: Race[] = await locals.pb.collection("currentrace").getFullList();
+
+    // The currentrace collection either has a single or no entries
+    if (currentrace.length == 0) return null;
+
+    currentrace[0].pictogram_url = await locals.pb.files.getURL(
+      currentrace[0],
+      currentrace[0].pictogram,
+    );
+
+    return currentrace[0];
+  };
+
+  const fetch_racepicks = async (): Promise<RacePick[]> => {
+    // Don't expand race/pxx/dnf since we already fetched those
+    const racepicks: RacePick[] = await locals.pb
+      .collection("racepicks")
+      .getFullList({ fetch: fetch, expand: "user" });
+
+    return racepicks;
+  };
+
+  const fetch_currentpickedusers = async (): Promise<CurrentPickedUser[]> => {
+    const currentpickedusers: CurrentPickedUser[] = await locals.pb
+      .collection("currentpickedusers")
+      .getFullList();
+
+    currentpickedusers.map((currentpickeduser: CurrentPickedUser) => {
+      if (currentpickeduser.avatar) {
+        currentpickeduser.avatar_url = locals.pb.files.getURL(
+          currentpickeduser,
+          currentpickeduser.avatar,
+        );
+      }
+    });
+
+    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 locals.pb.collection("raceresultsdesc").getFullList();
+
+    return raceresults;
+  };
+
+  return {
+    currentrace: await fetch_currentrace(),
+
+    racepicks: fetch_racepicks(),
+    currentpickedusers: fetch_currentpickedusers(),
+    raceresults: fetch_raceresults(),
+  };
+};
diff --git a/src/routes/racepicks/+page.svelte b/src/routes/racepicks/+page.svelte
index 77416ad..898badf 100644
--- a/src/routes/racepicks/+page.svelte
+++ b/src/routes/racepicks/+page.svelte
@@ -25,12 +25,13 @@
 
   let { data }: { data: PageData } = $props();
 
-  const racepick: RacePick | undefined = $derived(
-    data.racepicks.filter(
-      (racepick: RacePick) =>
-        racepick.expand.user.username === data.user?.username &&
-        racepick.race === data.currentrace?.id,
-    )[0] ?? undefined,
+  const racepick: Promise<RacePick | undefined> = $derived.by(
+    async () =>
+      (await data.racepicks).filter(
+        (racepick: RacePick) =>
+          racepick.expand.user.username === data.user?.username &&
+          racepick.race === data.currentrace?.id,
+      )[0] ?? undefined,
   );
 
   const modalStore: ModalStore = getModalStore();
@@ -40,7 +41,7 @@
       component: "racePickCard",
       meta: {
         data,
-        racepick,
+        racepick: await racepick,
       },
     };
 
@@ -48,15 +49,15 @@
   };
 
   // Users that have already picked the current race
-  let pickedusers: CurrentPickedUser[] = $derived(
-    data.currentpickedusers.filter(
+  let pickedusers: Promise<CurrentPickedUser[]> = $derived.by(async () =>
+    (await data.currentpickedusers).filter(
       (currentpickeduser: CurrentPickedUser) => currentpickeduser.picked,
     ),
   );
 
   // Users that didn't already pick the current race
-  let outstandingusers: CurrentPickedUser[] = $derived(
-    data.currentpickedusers.filter(
+  let outstandingusers: Promise<CurrentPickedUser[]> = $derived.by(async () =>
+    (await data.currentpickedusers).filter(
       (currentpickeduser: CurrentPickedUser) => !currentpickeduser.picked,
     ),
   );
@@ -127,83 +128,87 @@
 
           <!-- Only show the userguess if signed in -->
           {#if data.user}
-            <div class="mt-2 flex gap-2">
-              <div class="card w-full min-w-40 p-2 pb-0 shadow">
-                <h1 class="mb-2 text-nowrap font-bold">Your P{data.currentrace.pxx} Pick:</h1>
-                {#await data.graphics then graphics}
-                  {#await data.drivers then drivers}
-                    <LazyImage
-                      src={get_by_value(drivers, "id", racepick?.pxx ?? "")?.headshot_url ??
-                        get_driver_headshot_template(graphics)}
-                      imgwidth={DRIVER_HEADSHOT_WIDTH}
-                      imgheight={DRIVER_HEADSHOT_HEIGHT}
-                      containerstyle="height: 115px; margin: auto;"
-                      imgclass="bg-transparent cursor-pointer"
-                      hoverzoom
-                      onclick={racepick_handler}
-                    />
-                  {/await}
+            {#await data.graphics then graphics}
+              {#await data.drivers then drivers}
+                {#await racepick then pick}
+                  <div class="mt-2 flex gap-2">
+                    <div class="card w-full min-w-40 p-2 pb-0 shadow">
+                      <h1 class="mb-2 text-nowrap font-bold">Your P{data.currentrace.pxx} Pick:</h1>
+                      <LazyImage
+                        src={get_by_value(drivers, "id", pick?.pxx ?? "")?.headshot_url ??
+                          get_driver_headshot_template(graphics)}
+                        imgwidth={DRIVER_HEADSHOT_WIDTH}
+                        imgheight={DRIVER_HEADSHOT_HEIGHT}
+                        containerstyle="height: 115px; margin: auto;"
+                        imgclass="bg-transparent cursor-pointer"
+                        hoverzoom
+                        onclick={racepick_handler}
+                      />
+                    </div>
+                    <div class="card w-full min-w-40 p-2 pb-0 shadow">
+                      <h1 class="mb-2 text-nowrap font-bold">Your DNF Pick:</h1>
+                      <LazyImage
+                        src={get_by_value(drivers, "id", pick?.dnf ?? "")?.headshot_url ??
+                          get_driver_headshot_template(graphics)}
+                        imgwidth={DRIVER_HEADSHOT_WIDTH}
+                        imgheight={DRIVER_HEADSHOT_HEIGHT}
+                        containerstyle="height: 115px; margin: auto;"
+                        imgclass="bg-transparent cursor-pointer"
+                        hoverzoom
+                        onclick={racepick_handler}
+                      />
+                    </div>
+                  </div>
                 {/await}
-              </div>
-              <div class="card w-full min-w-40 p-2 pb-0 shadow">
-                <h1 class="mb-2 text-nowrap font-bold">Your DNF Pick:</h1>
-                {#await data.graphics then graphics}
-                  {#await data.drivers then drivers}
-                    <LazyImage
-                      src={get_by_value(drivers, "id", racepick?.dnf ?? "")?.headshot_url ??
-                        get_driver_headshot_template(graphics)}
-                      imgwidth={DRIVER_HEADSHOT_WIDTH}
-                      imgheight={DRIVER_HEADSHOT_HEIGHT}
-                      containerstyle="height: 115px; margin: auto;"
-                      imgclass="bg-transparent cursor-pointer"
-                      hoverzoom
-                      onclick={racepick_handler}
-                    />
-                  {/await}
-                {/await}
-              </div>
-            </div>
+              {/await}
+            {/await}
           {/if}
 
           <!-- Show users that have and have not picked yet -->
-          <div class="mt-2 flex gap-2">
-            <div class="card w-full min-w-40 p-2 shadow">
-              <h1 class="text-nowrap font-bold">
-                Picked ({pickedusers.length}/{data.currentpickedusers.length}):
-              </h1>
-              <div class="mt-1 grid grid-cols-4 gap-x-2 gap-y-0.5">
-                {#await data.graphics then graphics}
-                  {#each pickedusers.slice(0, 16) as user}
-                    <LazyImage
-                      src={user.avatar_url ?? get_driver_headshot_template(graphics)}
-                      imgwidth={AVATAR_WIDTH}
-                      imgheight={AVATAR_HEIGHT}
-                      containerstyle="height: 35px; width: 35px;"
-                      imgclass="bg-surface-400 rounded-full"
-                    />
-                  {/each}
-                {/await}
-              </div>
+          {#await data.currentpickedusers then currentpicked}
+            <div class="mt-2 flex gap-2">
+              {#await pickedusers then picked}
+                <div class="card w-full min-w-40 p-2 shadow lg:max-w-40">
+                  <h1 class="text-nowrap font-bold">
+                    Picked ({picked.length}/{currentpicked.length}):
+                  </h1>
+                  <div class="mt-1 grid grid-cols-4 gap-x-2 gap-y-0.5">
+                    {#await data.graphics then graphics}
+                      {#each picked.slice(0, 16) as user}
+                        <LazyImage
+                          src={user.avatar_url ?? get_driver_headshot_template(graphics)}
+                          imgwidth={AVATAR_WIDTH}
+                          imgheight={AVATAR_HEIGHT}
+                          containerstyle="height: 35px; width: 35px;"
+                          imgclass="bg-surface-400 rounded-full"
+                        />
+                      {/each}
+                    {/await}
+                  </div>
+                </div>
+              {/await}
+              {#await outstandingusers then outstanding}
+                <div class="card w-full min-w-40 p-2 shadow lg:max-w-40">
+                  <h1 class="text-nowrap font-bold">
+                    Outstanding ({outstanding.length}/{currentpicked.length}):
+                  </h1>
+                  <div class="mt-1 grid grid-cols-4 gap-x-0 gap-y-0.5">
+                    {#await data.graphics then graphics}
+                      {#each outstanding.slice(0, 16) as user}
+                        <LazyImage
+                          src={user.avatar_url ?? get_driver_headshot_template(graphics)}
+                          imgwidth={AVATAR_WIDTH}
+                          imgheight={AVATAR_HEIGHT}
+                          containerstyle="height: 35px; width: 35px;"
+                          imgclass="bg-surface-400 rounded-full"
+                        />
+                      {/each}
+                    {/await}
+                  </div>
+                </div>
+              {/await}
             </div>
-            <div class="card w-full min-w-40 p-2 shadow">
-              <h1 class="text-nowrap font-bold">
-                Outstanding ({outstandingusers.length}/{data.currentpickedusers.length}):
-              </h1>
-              <div class="mt-1 grid grid-cols-4 gap-x-0 gap-y-0.5">
-                {#await data.graphics then graphics}
-                  {#each outstandingusers.slice(0, 16) as user}
-                    <LazyImage
-                      src={user.avatar_url ?? get_driver_headshot_template(graphics)}
-                      imgwidth={AVATAR_WIDTH}
-                      imgheight={AVATAR_HEIGHT}
-                      containerstyle="height: 35px; width: 35px;"
-                      imgclass="bg-surface-400 rounded-full"
-                    />
-                  {/each}
-                {/await}
-              </div>
-            </div>
-          </div>
+          {/await}
         </div>
       </svelte:fragment>
     </AccordionItem>
@@ -255,122 +260,136 @@
     </div>
 
     {#await data.races then races}
-      {#each data.raceresults as result}
-        {@const race = get_by_value(races, "id", result.race)}
+      {#await data.raceresults then raceresults}
+        {#each raceresults as result}
+          {@const race = get_by_value(races, "id", result.race)}
 
-        <div
-          use:popup={race_popupsettings(race?.id ?? "Invalid")}
-          class="card mt-2 flex h-20 w-7 flex-col !rounded-r-none bg-surface-300 p-2 shadow lg:w-36"
-        >
-          <span class="hidden text-sm font-bold lg:block">
-            {race?.step}: {race?.name}
-          </span>
-          <span class="block rotate-90 text-sm font-bold lg:hidden">
-            {race?.name.slice(0, 8)}{(race?.name.length ?? 8) > 8 ? "." : ""}
-          </span>
-          <span class="hidden text-sm lg:block">Date: {formatdate(race?.racedate ?? "")}</span>
-          <span class="hidden text-sm lg:block">Guessed: P{race?.pxx}</span>
-        </div>
-
-        <!-- The race result popup is triggered on click on the race -->
-        <div data-popup={race?.id ?? "Invalid"} class="card z-50 p-2 shadow">
-          <span class="font-bold">Result:</span>
-          <div class="mt-2 flex flex-col gap-1">
-            {#await data.drivers then drivers}
-              {#each result.pxxs as pxx, index}
-                {@const driver = get_by_value(drivers, "id", pxx)}
-                <div class="flex gap-2">
-                  <span class="w-8">P{(race?.pxx ?? -100) - 3 + index}:</span>
-                  <span class="badge w-10 p-1 text-center" style="background: {PXX_COLORS[index]};">
-                    {driver?.code}
-                  </span>
-                </div>
-              {/each}
-
-              {#if result.dnfs.length > 0}
-                <hr class="border-black" style="border-style: inset;" />
-              {/if}
-
-              {#each result.dnfs as dnf}
-                {@const driver = get_by_value(drivers, "id", dnf)}
-                <div class="flex gap-2">
-                  <span class="w-8">DNF:</span>
-                  <span class="badge w-10 p-1 text-center" style="background: {PXX_COLORS[3]};">
-                    {driver?.code}
-                  </span>
-                </div>
-              {/each}
-            {/await}
+          <div
+            use:popup={race_popupsettings(race?.id ?? "Invalid")}
+            class="card mt-2 flex h-20 w-7 flex-col !rounded-r-none bg-surface-300 p-2 shadow lg:w-36"
+          >
+            <span class="hidden text-sm font-bold lg:block">
+              {race?.step}: {race?.name}
+            </span>
+            <span class="block rotate-90 text-sm font-bold lg:hidden">
+              {race?.name.slice(0, 8)}{(race?.name.length ?? 8) > 8 ? "." : ""}
+            </span>
+            <span class="hidden text-sm lg:block">Date: {formatdate(race?.racedate ?? "")}</span>
+            <span class="hidden text-sm lg:block">Guessed: P{race?.pxx}</span>
           </div>
-        </div>
-      {/each}
+
+          <!-- The race result popup is triggered on click on the race -->
+          <div data-popup={race?.id ?? "Invalid"} class="card z-50 p-2 shadow">
+            <span class="font-bold">Result:</span>
+            <div class="mt-2 flex flex-col gap-1">
+              {#await data.drivers then drivers}
+                {#each result.pxxs as pxx, index}
+                  {@const driver = get_by_value(drivers, "id", pxx)}
+                  <div class="flex gap-2">
+                    <span class="w-8">P{(race?.pxx ?? -100) - 3 + index}:</span>
+                    <span
+                      class="badge w-10 p-1 text-center"
+                      style="background: {PXX_COLORS[index]};"
+                    >
+                      {driver?.code}
+                    </span>
+                  </div>
+                {/each}
+
+                {#if result.dnfs.length > 0}
+                  <hr class="border-black" style="border-style: inset;" />
+                {/if}
+
+                {#each result.dnfs as dnf}
+                  {@const driver = get_by_value(drivers, "id", dnf)}
+                  <div class="flex gap-2">
+                    <span class="w-8">DNF:</span>
+                    <span class="badge w-10 p-1 text-center" style="background: {PXX_COLORS[3]};">
+                      {driver?.code}
+                    </span>
+                  </div>
+                {/each}
+              {/await}
+            </div>
+          </div>
+        {/each}
+      {/await}
     {/await}
   </div>
 
   <div class="hide-scrollbar flex w-full overflow-x-scroll pb-2">
     <!-- Not ideal but currentpickedusers contains all users, so we do not need to fetch the users separately -->
-    {#each data.currentpickedusers as user}
-      {@const picks = data.racepicks.filter((pick: RacePick) => pick.user === user.id)}
-
-      <div
-        class="card ml-1 mt-2 w-full min-w-12 overflow-hidden py-2 shadow lg:ml-2 {data.user &&
-        data.user.username === user.username
-          ? 'bg-primary-300'
-          : ''}"
-      >
-        <!-- Avatar + name display at the top -->
-        <div class="mx-auto flex h-10 w-fit">
-          {#await data.graphics then graphics}
-            <LazyImage
-              src={user.avatar_url ?? get_driver_headshot_template(graphics)}
-              imgwidth={AVATAR_WIDTH}
-              imgheight={AVATAR_HEIGHT}
-              containerstyle="height: 40px; width: 40px;"
-              imgclass="bg-surface-400 rounded-full"
-            />
-          {/await}
-          <div
-            style="height: 40px; line-height: 40px;"
-            class="ml-2 hidden text-nowrap text-center align-middle lg:block"
-          >
-            <!-- TODO: Setting to toggle between username or firstname display -->
-            {user.username}
-          </div>
-        </div>
-
+    <!-- TODO: Uhhh can I write this await stuff differently??? -->
+    {#await data.currentpickedusers then currentpicked}
+      {#await data.racepicks then racepicks}
         {#await data.races then races}
           {#await data.drivers then drivers}
-            {#each data.raceresults as result}
-              {@const race = get_by_value(races, "id", result.race)}
-              {@const pick = picks.filter((pick: RacePick) => pick.race === race?.id)[0]}
-              {@const pxxcolor = PXX_COLORS[result.pxxs.indexOf(pick?.pxx ?? "Invalid")]}
-              {@const dnfcolor =
-                result.dnfs.indexOf(pick?.dnf ?? "Invalid") >= 0 ? PXX_COLORS[3] : PXX_COLORS[-1]}
+            {#await data.raceresults then raceresults}
+              {#each currentpicked as user}
+                {@const picks = racepicks.filter((pick: RacePick) => pick.user === user.id)}
 
-              {#if pick}
-                <div class="mt-2 h-20 w-full border bg-surface-300 p-1 lg:p-2">
-                  <div class="mx-auto flex h-full w-fit flex-col justify-evenly">
-                    <span
-                      class="p-1 text-center text-sm rounded-container-token"
-                      style="background: {pxxcolor};"
+                <div
+                  class="card ml-1 mt-2 w-full min-w-12 overflow-hidden py-2 shadow lg:ml-2 {data.user &&
+                  data.user.username === user.username
+                    ? 'bg-primary-300'
+                    : ''}"
+                >
+                  <!-- Avatar + name display at the top -->
+                  <div class="mx-auto flex h-10 w-fit">
+                    {#await data.graphics then graphics}
+                      <LazyImage
+                        src={user.avatar_url ?? get_driver_headshot_template(graphics)}
+                        imgwidth={AVATAR_WIDTH}
+                        imgheight={AVATAR_HEIGHT}
+                        containerstyle="height: 40px; width: 40px;"
+                        imgclass="bg-surface-400 rounded-full"
+                      />
+                    {/await}
+                    <div
+                      style="height: 40px; line-height: 40px;"
+                      class="ml-2 hidden text-nowrap text-center align-middle lg:block"
                     >
-                      {get_by_value(drivers, "id", pick?.pxx ?? "")?.code}
-                    </span>
-                    <span
-                      class="p-1 text-center text-sm rounded-container-token"
-                      style="background: {dnfcolor};"
-                    >
-                      {get_by_value(drivers, "id", pick?.dnf ?? "")?.code}
-                    </span>
+                      <!-- TODO: Setting to toggle between username or firstname display -->
+                      {user.username}
+                    </div>
                   </div>
+
+                  {#each raceresults as result}
+                    {@const race = get_by_value(races, "id", result.race)}
+                    {@const pick = picks.filter((pick: RacePick) => pick.race === race?.id)[0]}
+                    {@const pxxcolor = PXX_COLORS[result.pxxs.indexOf(pick?.pxx ?? "Invalid")]}
+                    {@const dnfcolor =
+                      result.dnfs.indexOf(pick?.dnf ?? "Invalid") >= 0
+                        ? PXX_COLORS[3]
+                        : PXX_COLORS[-1]}
+
+                    {#if pick}
+                      <div class="mt-2 h-20 w-full border bg-surface-300 p-1 lg:p-2">
+                        <div class="mx-auto flex h-full w-fit flex-col justify-evenly">
+                          <span
+                            class="p-1 text-center text-sm rounded-container-token"
+                            style="background: {pxxcolor};"
+                          >
+                            {get_by_value(drivers, "id", pick?.pxx ?? "")?.code}
+                          </span>
+                          <span
+                            class="p-1 text-center text-sm rounded-container-token"
+                            style="background: {dnfcolor};"
+                          >
+                            {get_by_value(drivers, "id", pick?.dnf ?? "")?.code}
+                          </span>
+                        </div>
+                      </div>
+                    {:else}
+                      <div class="mt-2 h-20 w-full"></div>
+                    {/if}
+                  {/each}
                 </div>
-              {:else}
-                <div class="mt-2 h-20 w-full"></div>
-              {/if}
-            {/each}
+              {/each}
+            {/await}
           {/await}
         {/await}
-      </div>
-    {/each}
+      {/await}
+    {/await}
   </div>
 </div>