Position the drawer below the navbar + allow toggling between them

src/lib/components/DriverCard.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
   import { get_image_preview_event_handler } from "$lib/image";
   import { FileDropzone, SlideToggle } from "@skeletonlabs/skeleton";
-  import Card from "./Card.svelte";
+  import LazyCard from "./LazyCard.svelte";
   import Button from "./Button.svelte";
   import type { Driver } from "$lib/schema";
   import Input from "./Input.svelte";
-  import Dropdown, { type DropdownOption } from "./Dropdown.svelte";
+  import LazyDropdown, { type DropdownOption } from "./LazyDropdown.svelte";
   import { DRIVER_HEADSHOT_HEIGHT, DRIVER_HEADSHOT_WIDTH } from "$lib/config";
 
   interface DriverCardProps {
@@ -42,7 +42,7 @@
   }: DriverCardProps = $props();
 </script>
 
-<Card
+<LazyCard
   imgsrc={driver?.headshot_url ?? headshot_template}
   imgwidth={DRIVER_HEADSHOT_WIDTH}
   imgheight={DRIVER_HEADSHOT_HEIGHT}
@@ -64,8 +64,9 @@
         autocomplete="off"
         labelwidth="120px"
         disabled={disable_inputs}
-        required={require_inputs}>First Name</Input
+        required={require_inputs}
-      >
+        >First Name
+      </Input>
       <Input
         id="driver_last_name_{driver?.id ?? 'create'}"
         name="lastname"
@@ -73,8 +74,9 @@
         autocomplete="off"
         labelwidth="120px"
         disabled={disable_inputs}
-        required={require_inputs}>Last Name</Input
+        required={require_inputs}
-      >
+        >Last Name
+      </Input>
       <Input
         id="driver_code_{driver?.id ?? 'create'}"
         name="code"
@@ -84,18 +86,20 @@
         maxlength={3}
         labelwidth="120px"
         disabled={disable_inputs}
-        required={require_inputs}>Driver Code</Input
+        required={require_inputs}
-      >
+        >Driver Code
+      </Input>
 
       <!-- Driver team input -->
-      <Dropdown
+      <LazyDropdown
         name="team"
         input_variable={team_select_value}
         options={team_select_options}
         labelwidth="120px"
         disabled={disable_inputs}
-        required={require_inputs}>Team</Dropdown
+        required={require_inputs}
-      >
+        >Team
+      </LazyDropdown>
 
       <!-- Headshot upload -->
       <FileDropzone
@@ -133,4 +137,4 @@
       </div>
     </div>
   </form>
-</Card>
+</LazyCard>

src/lib/components/LazyCard.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { Snippet } from "svelte";
   import LazyImage from "./LazyImage.svelte";
+  import { lazyload } from "$lib/lazyload";
 
   interface CardProps {
     children: Snippet;
@@ -12,10 +13,10 @@
     imgid?: string | undefined;
 
     /** The aspect ratio width used to reserve image space (while its loading) */
-    imgwidth?: number;
+    imgwidth: number;
 
     /** The aspect ratio height used to reserve image space (while its loading) */
-    imgheight?: number;
+    imgheight: number;
 
     /** Hide the header image element. It can be shown by removing the "hidden" property using JS and the imgid. */
     imghidden?: boolean;
@@ -28,29 +29,39 @@
     children,
     imgsrc = undefined,
     imgid = undefined,
-    imgwidth = undefined,
+    imgwidth,
-    imgheight = undefined,
+    imgheight,
     imghidden = false,
     fullwidth = false,
     ...restProps
   }: CardProps = $props();
+
+  let load: boolean = $state(false);
+
+  const lazy_visible_handler = () => {
+    load = true;
+  };
 </script>
 
+<div use:lazyload onLazyVisible={lazy_visible_handler}>
+  {#if load}
     <div class="card overflow-hidden bg-white shadow {fullwidth ? 'w-full' : 'w-auto'}">
       <!-- Allow empty strings for images that only appear after user action -->
       {#if imgsrc !== undefined}
-    <div style="width: auto; aspect-ratio: {imgwidth} / {imgheight};">
         <LazyImage
           id={imgid}
           src={imgsrc}
+          {imgwidth}
+          {imgheight}
           alt="Card header"
           draggable="false"
           class="select-none shadow"
           hidden={imghidden}
         />
-    </div>
       {/if}
       <div class="p-2" {...restProps}>
         {@render children()}
       </div>
     </div>
+  {/if}
+</div>

src/lib/components/LazyDropdown.svelte

@@ -4,13 +4,26 @@
   import type { Action } from "svelte/action";
   import type { HTMLInputAttributes } from "svelte/elements";
   import { v4 as uuid } from "uuid";
+  import LazyImage from "./LazyImage.svelte";
 
-  export interface DropdownOption {
+  export interface LazyDropdownOption {
+    /** The label displayed in the list of options. */
     label: string;
+
+    /** The value assigned to the dropdown value variable */
     value: string;
+
+    /** An optional icon displayed left to the label */
+    icon_url?: string;
+
+    /** The aspect ratio width of the optional icon */
+    icon_width?: number;
+
+    /** The aspect ratio height of the optional icon */
+    icon_height?: number;
   }
 
-  interface SearchProps extends HTMLInputAttributes {
+  interface LazyDropdownProps extends HTMLInputAttributes {
     children: Snippet;
 
     /** Placeholder for the empty input element */
@@ -37,7 +50,7 @@
     /** The options this autocomplete component allows to choose from.
      * Example: [[{ label: "Aston", value: "0" }, { label: "VCARB", value: "1" }]].
      */
-    options: DropdownOption[];
+    options: LazyDropdownOption[];
   }
 
   let {
@@ -56,7 +69,7 @@
     },
     options,
     ...restProps
-  }: SearchProps = $props();
+  }: LazyDropdownProps = $props();
 
   /** Find the "label" of an option by its "value" */
   const get_label = (value: string): string | undefined => {
@@ -78,6 +91,12 @@
 
     if (input) input.dispatchEvent(new CustomEvent("DropdownChange"));
   });
+
+  let load: boolean = $state(false);
+
+  const lazy_click_handler = () => {
+    load = true;
+  };
 </script>
 
 <div class="input-group input-group-divider grid-cols-[auto_1fr_auto]">
@@ -87,6 +106,7 @@
   >
     {@render children()}
   </div>
+  <!-- TODO: How to assign use: conditionally? I don't wan't to repeat the entire input... -->
   {#if action}
     <input
       use:popup={popup_settings}
@@ -95,6 +115,7 @@
       style="height: 42px; text-align: start; text-indent: 12px; border-top-left-radius: 0; border-bottom-left-radius: 0;"
       use:obtain_input
       use:action
+      onmousedown={lazy_click_handler}
       onkeypress={(event: Event) => event.preventDefault()}
       value={get_label(input_variable) ?? placeholder}
       {...restProps}
@@ -106,6 +127,7 @@
       autocomplete="off"
       style="height: 42px; text-align: start; text-indent: 12px; border-top-left-radius: 0; border-bottom-left-radius: 0;"
       use:obtain_input
+      onmousedown={lazy_click_handler}
       onkeypress={(event: Event) => event.preventDefault()}
       value={get_label(input_variable) ?? placeholder}
       {...restProps}
@@ -118,14 +140,17 @@
   class="card z-10 w-auto overflow-y-scroll p-2 shadow"
   style="max-height: 350px;"
 >
+  {#if load}
     <ListBox>
       {#each options as option}
         <ListBoxItem bind:group={input_variable} {name} value={option.value}>
           <div class="flex flex-nowrap">
             {#if option.icon_url}
-            <img
+              <LazyImage
                 src={option.icon_url}
                 alt=""
+                imgwidth={option.icon_width ?? 1}
+                imgheight={option.icon_height ?? 1}
                 class="mr-2 rounded"
                 style="height: 24px; max-width: 64px;"
               />
@@ -135,4 +160,5 @@
         </ListBoxItem>
       {/each}
     </ListBox>
+  {/if}
 </div>

src/lib/components/LazyImage.svelte

@@ -6,19 +6,30 @@
   interface LazyImageProps extends HTMLImgAttributes {
     /** The URL to the image resource to lazyload */
     src: string;
+
+    /** The aspect ratio width used to reserve image space (while its loading) */
+    imgwidth: number;
+
+    /** The aspect ratio height used to reserve image space (while its loading) */
+    imgheight: number;
   }
 
-  let { src, ...restProps }: LazyImageProps = $props();
+  let { src, imgwidth, imgheight, ...restProps }: LazyImageProps = $props();
+
+  // Once the image is visible, this will be set to true, triggering the loading
+  let load: boolean = $state(false);
 
   const lazy_visible_handler = () => {
     load = true;
   };
-
-  // Once the image is visible, this will be set to true, triggering the loading
-  let load: boolean = $state(false);
 </script>
 
-<div use:lazyload onLazyVisible={lazy_visible_handler}>
+<!-- Show a correctly sized div so the layout doesn't jump. -->
+<div
+  use:lazyload
+  onLazyVisible={lazy_visible_handler}
+  style="width: 100%; aspect-ratio: {imgwidth} / {imgheight};"
+>
   {#if load}
     {#await fetch_image_base64(src) then data}
       <img src={data} style="width: 100%" {...restProps} />

src/lib/components/RaceCard.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { get_image_preview_event_handler } from "$lib/image";
   import { FileDropzone } from "@skeletonlabs/skeleton";
-  import Card from "./Card.svelte";
+  import LazyCard from "./LazyCard.svelte";
   import Button from "./Button.svelte";
   import type { Race } from "$lib/schema";
   import Input from "./Input.svelte";
@@ -55,7 +55,7 @@
   };
 </script>
 
-<Card
+<LazyCard
   imgsrc={race?.pictogram_url ?? pictogram_template}
   imgwidth={RACE_PICTOGRAM_WIDTH}
   imgheight={RACE_PICTOGRAM_HEIGHT}
@@ -175,4 +175,4 @@
       </div>
     </div>
   </form>
-</Card>
+</LazyCard>

src/lib/components/SubstitutionCard.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-  import Card from "./Card.svelte";
+  import LazyCard from "./LazyCard.svelte";
   import Button from "./Button.svelte";
   import type { Driver, Substitution } from "$lib/schema";
   import { get_by_value } from "$lib/database";
-  import Dropdown, { type DropdownOption } from "./Dropdown.svelte";
+  import LazyDropdown, { type DropdownOption } from "./LazyDropdown.svelte";
   import type { Action } from "svelte/action";
   import { DRIVER_HEADSHOT_HEIGHT, DRIVER_HEADSHOT_WIDTH } from "$lib/config";
 
@@ -76,7 +76,7 @@
   };
 </script>
 
-<Card
+<LazyCard
   imgsrc={get_by_value(drivers, "id", substitution?.substitute ?? "")?.headshot_url ??
     headshot_template}
   imgwidth={DRIVER_HEADSHOT_WIDTH}
@@ -92,35 +92,39 @@
 
     <div class="flex flex-col gap-2">
       <!-- Substitute select -->
-      <Dropdown
+      <LazyDropdown
         name="substitute"
         input_variable={substitute_select_value}
         action={register_substitute_preview_handler}
         options={driver_select_options}
         labelwidth="120px"
         disabled={disable_inputs}
-        required={require_inputs}>Substitute</Dropdown
+        required={require_inputs}
       >
+        Substitute
+      </LazyDropdown>
 
       <!-- Driver select -->
-      <Dropdown
+      <LazyDropdown
         name="for"
         input_variable={driver_select_value}
         options={driver_select_options}
         labelwidth="120px"
         disabled={disable_inputs}
-        required={require_inputs}>For</Dropdown
+        required={require_inputs}
-      >
+        >For
+      </LazyDropdown>
 
       <!-- Race select -->
-      <Dropdown
+      <LazyDropdown
         name="race"
         input_variable={race_select_value}
         options={race_select_options}
         labelwidth="120px"
         disabled={disable_inputs}
-        required={require_inputs}>Race</Dropdown
+        required={require_inputs}
-      >
+        >Race
+      </LazyDropdown>
 
       <!-- Save/Delete buttons -->
       <div class="flex justify-end gap-2">
@@ -145,4 +149,4 @@
       </div>
     </div>
   </form>
-</Card>
+</LazyCard>

src/lib/components/TeamCard.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
   import { get_image_preview_event_handler } from "$lib/image";
   import { FileDropzone } from "@skeletonlabs/skeleton";
-  import Card from "./Card.svelte";
   import Button from "./Button.svelte";
   import type { Team } from "$lib/schema";
   import Input from "./Input.svelte";
   import { TEAM_LOGO_HEIGHT, TEAM_LOGO_WIDTH } from "$lib/config";
+  import LazyCard from "./LazyCard.svelte";
 
   interface TeamCardProps {
     /** The [Team] object used to prefill values. */
@@ -29,7 +29,7 @@
   }: TeamCardProps = $props();
 </script>
 
-<Card
+<LazyCard
   imgsrc={team?.logo_url ?? logo_template}
   imgwidth={TEAM_LOGO_WIDTH}
   imgheight={TEAM_LOGO_HEIGHT}
@@ -83,4 +83,4 @@
       </div>
     </div>
   </form>
-</Card>
+</LazyCard>

src/lib/components/index.ts

@@ -1,8 +1,8 @@
 import Button from "./Button.svelte";
-import Card from "./Card.svelte";
 import DriverCard from "./DriverCard.svelte";
-import Dropdown from "./Dropdown.svelte";
 import Input from "./Input.svelte";
+import LazyCard from "./LazyCard.svelte";
+import LazyDropdown from "./LazyDropdown.svelte";
 import LazyImage from "./LazyImage.svelte";
 import LoadingIndicator from "./LoadingIndicator.svelte";
 import RaceCard from "./RaceCard.svelte";
@@ -17,10 +17,10 @@ import UserIcon from "./svg/UserIcon.svelte";
 export {
   // Components
   Button,
-  Card,
   DriverCard,
-  Dropdown,
   Input,
+  LazyCard,
+  LazyDropdown,
   LazyImage,
   LoadingIndicator,
   RaceCard,

src/lib/image.ts

@@ -1,3 +1,5 @@
+import { browser } from "$app/environment";
+
 /**
  * Obtain an onchange event handler that updates an <Avatar> component
  * with a new image uploaded via a file input element.
@@ -46,8 +48,15 @@ export const get_image_preview_event_handler = (id: string): ((event: Event) =>
   return handler;
 };
 
-/** Convert a binary [Blob] to base64 string */
+/**
+ * Convert a binary [Blob] to base64 string.
+ * Can only be called clientside from a browser as it depends on FileReader!
+ */
 export const blob_to_base64 = (blob: Blob): Promise<string> => {
+  if (!browser) {
+    console.error("Can't call blob_to_base64 on server (FileReader is not available)!");
+  }
+
   return new Promise((resolve, _) => {
     const reader = new FileReader();
 
@@ -58,9 +67,19 @@ export const blob_to_base64 = (blob: Blob): Promise<string> => {
   });
 };
 
-/** Fetch an image from an URL using a fetch function [f] and return as base64 string */
+/**
+ * Fetch an image from an URL using a fetch function [f] and return as base64 string .
+ * Can be called client- and server-side.
+ */
 export const fetch_image_base64 = async (url: string, f: Function = fetch): Promise<string> => {
-  return f(url)
+  if (browser) {
+    return await f(url)
       .then((response: Response) => response.blob())
       .then((blob: Blob) => blob_to_base64(blob));
+  }
+
+  // On the server
+  const response: Response = await f(url);
+  const buffer: Buffer = Buffer.from(await response.arrayBuffer());
+  return buffer.toString("base64");
 };

src/routes/+layout.svelte

@@ -33,12 +33,36 @@
   // Drawer config
   initializeStores();
   const drawerStore: DrawerStore = getDrawerStore();
+  let drawerOpen: boolean = false;
+  let drawerId: string = "";
+  drawerStore.subscribe((settings: DrawerSettings) => {
+    drawerOpen = settings.open ?? false;
+    drawerId = settings.id ?? "";
+  });
+
+  const toggle_drawer = (settings: DrawerSettings) => {
+    if (drawerOpen) {
+      if (drawerId === settings.id) {
+        // We clicked the same button to close the drawer
+        drawerStore.close();
+      } else {
+        // We clicked another button to open another drawer
+        drawerStore.close();
+        setTimeout(() => drawerStore.open(settings), 200);
+      }
+    } else {
+      drawerStore.open(settings);
+    }
+  };
+
+  const close_drawer = () => drawerStore.close();
 
   const drawer_settings_base: DrawerSettings = {
     position: "top",
     height: "auto",
-    padding: "lg:px-96",
+    padding: "lg:px-96 pt-14", // pt-14 is 56px, so its missing 4px for the 60px navbar...
     bgDrawer: "bg-surface-100",
+    duration: 150,
   };
 
   const menu_drawer = () => {
@@ -46,7 +70,7 @@
       id: "menu_drawer",
       ...drawer_settings_base,
     };
-    drawerStore.open(drawerSettings);
+    toggle_drawer(drawerSettings);
   };
 
   const data_drawer = () => {
@@ -54,7 +78,7 @@
       id: "data_drawer",
       ...drawer_settings_base,
     };
-    drawerStore.open(drawerSettings);
+    toggle_drawer(drawerSettings);
   };
 
   const login_drawer = () => {
@@ -62,7 +86,7 @@
       id: "login_drawer",
       ...drawer_settings_base,
     };
-    drawerStore.open(drawerSettings);
+    toggle_drawer(drawerSettings);
   };
 
   const profile_drawer = () => {
@@ -70,11 +94,9 @@
       id: "profile_drawer",
       ...drawer_settings_base,
     };
-    drawerStore.open(drawerSettings);
+    toggle_drawer(drawerSettings);
   };
 
-  const close_drawer = () => drawerStore.close();
-
   // Popups config
   storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
 
@@ -93,11 +115,12 @@
 <LoadingIndicator />
 
 <Drawer>
+  <!-- Use p-3 because the drawer has a 5px overlap with the navbar -->
+  <div class="flex flex-col gap-2 p-3">
     {#if $drawerStore.id === "menu_drawer"}
       <!-- Menu Drawer -->
       <!-- Menu Drawer -->
       <!-- Menu Drawer -->
-    <div class="flex flex-col gap-2 p-2">
       <Button href="/racepicks" onclick={close_drawer} color="surface" fullwidth>Race Picks</Button>
       <Button href="/seasonpicks" onclick={close_drawer} color="surface" fullwidth
         >Season Picks
@@ -109,51 +132,46 @@
         >Statistics
       </Button>
       <Button href="/rules" onclick={close_drawer} color="surface" fullwidth>Rules</Button>
-    </div>
     {:else if $drawerStore.id === "data_drawer"}
       <!-- Data Drawer -->
       <!-- Data Drawer -->
       <!-- Data Drawer -->
-    <div class="flex flex-col gap-2 p-2">
+      <Button href="/data/raceresult" onclick={close_drawer} color="surface" fullwidth
-      <Button href="/data/raceresult" onclick={close_drawer} color="surface" fullwidth>
+        >Race Results
-        Race Results
       </Button>
       <Button href="/data/season" onclick={close_drawer} color="surface" fullwidth>Season</Button>
       <Button href="/data/user" onclick={close_drawer} color="surface" fullwidth>Users</Button>
-    </div>
     {:else if $drawerStore.id === "login_drawer"}
       <!-- Login Drawer -->
       <!-- Login Drawer -->
       <!-- Login Drawer -->
-    <div class="flex flex-col gap-2 p-2">
       <h4 class="h4 select-none">Enter Username and Password</h4>
       <form method="POST" class="contents">
         <!-- Supply the pathname so the form can redirect to the current page. -->
         <input type="hidden" name="redirect_url" value={$page.url.pathname} />
-        <Input name="username" placeholder="Username" autocomplete="username" required>
+        <Input name="username" placeholder="Username" autocomplete="username" required
-          <UserIcon />
+          ><UserIcon />
         </Input>
-        <Input name="password" type="password" placeholder="Password" autocomplete="off" required>
+        <Input name="password" type="password" placeholder="Password" autocomplete="off" required
-          <PasswordIcon />
+          ><PasswordIcon />
         </Input>
         <div class="flex justify-end gap-2">
-          <Button formaction="/profile?/login" onclick={close_drawer} color="tertiary" submit>
+          <Button formaction="/profile?/login" onclick={close_drawer} color="tertiary" submit
-            Login
+            >Login
           </Button>
           <Button
             formaction="/profile?/create_profile"
             onclick={close_drawer}
             color="tertiary"
-            submit>Register</Button
+            submit
-          >
+            >Register
+          </Button>
         </div>
       </form>
-    </div>
     {:else if $drawerStore.id === "profile_drawer" && data.user}
       <!-- Profile Drawer -->
       <!-- Profile Drawer -->
       <!-- Profile Drawer -->
-    <div class="flex flex-col gap-2 p-2">
       <h4 class="h4 select-none">Edit Profile</h4>
       <form method="POST" enctype="multipart/form-data" class="contents">
         <!-- Supply the pathname so the form can redirect to the current page. -->
@@ -187,12 +205,12 @@
           </Button>
         </div>
       </form>
-    </div>
     {/if}
+  </div>
 </Drawer>
 
 <nav>
-  <!-- TODO: Make this stick to the top somehow (fixed/sticky). -->
+  <div class="fixed left-0 right-0 top-0 z-50">
     <AppBar
       slotDefault="place-self-center"
       slotTrail="place-content-end"
@@ -210,7 +228,8 @@
           </div>
 
           <!-- Site logo -->
-        <Button href="/" color="primary"><span class="text-xl font-bold">Formula 11</span></Button>
+          <Button href="/" color="primary"><span class="text-xl font-bold">Formula 11</span></Button
+          >
         </div>
       </svelte:fragment>
 
@@ -250,9 +269,10 @@
         </div>
       </svelte:fragment>
     </AppBar>
+  </div>
 </nav>
 
 <!-- Each child's contents will be inserted here -->
-<div class="p-2">
+<div class="p-2" style="margin-top: 60px;">
   {@render children()}
 </div>

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

@@ -4,9 +4,17 @@
   import { Tab, TabGroup } from "@skeletonlabs/skeleton";
 
   // TODO: Why does this work but import { type DropdownOption } from "$lib/components" does not?
-  import type { DropdownOption } from "$lib/components/Dropdown.svelte";
+  import type { LazyDropdownOption } from "$lib/components/LazyDropdown.svelte";
   import { TeamCard, DriverCard, RaceCard, SubstitutionCard } from "$lib/components";
   import { get_by_value } from "$lib/database";
+  import {
+    DRIVER_HEADSHOT_HEIGHT,
+    DRIVER_HEADSHOT_WIDTH,
+    RACE_PICTOGRAM_HEIGHT,
+    RACE_PICTOGRAM_WIDTH,
+    TEAM_LOGO_HEIGHT,
+    TEAM_LOGO_WIDTH,
+  } from "$lib/config";
 
   let { data, form }: { data: PageData; form: ActionData } = $props();
 
@@ -44,28 +52,42 @@
   update_substitution_race_select_values["create"] = "";
 
   // All options to create a <Dropdown> component for the teams
-  const team_dropdown_options: DropdownOption[] = [];
+  const team_dropdown_options: LazyDropdownOption[] = [];
   data.teams.forEach((team: Team) => {
-    team_dropdown_options.push({ label: team.name, value: team.id, icon_url: team.logo_url });
+    team_dropdown_options.push({
+      label: team.name,
+      value: team.id,
+      icon_url: team.logo_url,
+      icon_width: TEAM_LOGO_WIDTH,
+      icon_height: TEAM_LOGO_HEIGHT,
+    });
   });
 
   // All options to create a <Dropdown> component for the drivers
-  const driver_dropdown_options: DropdownOption[] = [];
+  const driver_dropdown_options: LazyDropdownOption[] = [];
   data.drivers.then((drivers: Driver[]) =>
     drivers.forEach((driver: Driver) => {
       driver_dropdown_options.push({
         label: driver.code,
         value: driver.id,
         icon_url: driver.headshot_url,
+        icon_width: DRIVER_HEADSHOT_WIDTH,
+        icon_height: DRIVER_HEADSHOT_HEIGHT,
       });
     }),
   );
 
   // All options to create a <Dropdown> component for the races
-  const race_dropdown_options: DropdownOption[] = [];
+  const race_dropdown_options: LazyDropdownOption[] = [];
   data.races.then((races: Race[]) =>
     races.forEach((race: Race) => {
-      race_dropdown_options.push({ label: race.name, value: race.id });
+      race_dropdown_options.push({
+        label: race.name,
+        value: race.id,
+        icon_url: race.pictogram_url,
+        icon_width: RACE_PICTOGRAM_WIDTH,
+        icon_height: RACE_PICTOGRAM_HEIGHT,
+      });
     }),
   );
 </script>