Lib: Update lazy components (dropdown + card now lazy)

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,