From 262ac50356eb5464809cd3922c8f98f58629e695 Mon Sep 17 00:00:00 2001
From: Christoph Urlacher <christoph.urlacher@protonmail.com>
Date: Mon, 16 Dec 2024 02:28:31 +0100
Subject: [PATCH] Lib: Add imgwidth/imgheight to Card component so layout
 doesn't jump when lazyloading images

---
 src/lib/components/Card.svelte             | 27 +++++++++++++++-------
 src/lib/components/DriverCard.svelte       |  5 +++-
 src/lib/components/RaceCard.svelte         |  3 +++
 src/lib/components/SubstitutionCard.svelte |  5 +++-
 src/lib/components/TeamCard.svelte         |  3 +++
 5 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/src/lib/components/Card.svelte b/src/lib/components/Card.svelte
index ed60173..1062415 100644
--- a/src/lib/components/Card.svelte
+++ b/src/lib/components/Card.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { Snippet } from "svelte";
+  import LazyImage from "./LazyImage.svelte";
 
   interface CardProps {
     children: Snippet;
@@ -10,6 +11,12 @@
     /** The id of the header image element for JS access. */
     imgid?: string | undefined;
 
+    /** 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;
+
     /** Hide the header image element. It can be shown by removing the "hidden" property using JS and the imgid. */
     imghidden?: boolean;
 
@@ -21,6 +28,8 @@
     children,
     imgsrc = undefined,
     imgid = undefined,
+    imgwidth = undefined,
+    imgheight = undefined,
     imghidden = false,
     fullwidth = false,
     ...restProps
@@ -30,14 +39,16 @@
 <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}
-    <img
-      id={imgid}
-      src={imgsrc}
-      alt="Card header"
-      draggable="false"
-      class="select-none shadow"
-      hidden={imghidden}
-    />
+    <div style="width: auto; aspect-ratio: {imgwidth} / {imgheight};">
+      <LazyImage
+        id={imgid}
+        src={imgsrc}
+        alt="Card header"
+        draggable="false"
+        class="select-none shadow"
+        hidden={imghidden}
+      />
+    </div>
   {/if}
   <div class="p-2" {...restProps}>
     {@render children()}
diff --git a/src/lib/components/DriverCard.svelte b/src/lib/components/DriverCard.svelte
index 9988496..aa1e26a 100644
--- a/src/lib/components/DriverCard.svelte
+++ b/src/lib/components/DriverCard.svelte
@@ -6,6 +6,7 @@
   import type { Driver } from "$lib/schema";
   import Input from "./Input.svelte";
   import Dropdown, { type DropdownOption } from "./Dropdown.svelte";
+  import { DRIVER_HEADSHOT_HEIGHT, DRIVER_HEADSHOT_WIDTH } from "$lib/config";
 
   interface DriverCardProps {
     /** The [Driver] object used to prefill values. */
@@ -34,7 +35,7 @@
     driver = undefined,
     disable_inputs = false,
     require_inputs = false,
-    headshot_template = "",
+    headshot_template = undefined,
     team_select_value,
     team_select_options,
     active_value,
@@ -43,6 +44,8 @@
 
 <Card
   imgsrc={driver?.headshot_url ?? headshot_template}
+  imgwidth={DRIVER_HEADSHOT_WIDTH}
+  imgheight={DRIVER_HEADSHOT_HEIGHT}
   imgid="update_driver_headshot_preview_{driver?.id ?? 'create'}"
 >
   <form method="POST" enctype="multipart/form-data">
diff --git a/src/lib/components/RaceCard.svelte b/src/lib/components/RaceCard.svelte
index 1ec1df0..936d147 100644
--- a/src/lib/components/RaceCard.svelte
+++ b/src/lib/components/RaceCard.svelte
@@ -6,6 +6,7 @@
   import type { Race } from "$lib/schema";
   import Input from "./Input.svelte";
   import { format } from "date-fns";
+  import { RACE_PICTOGRAM_HEIGHT, RACE_PICTOGRAM_WIDTH } from "$lib/config";
 
   interface RaceCardProps {
     /** The [Race] object used to prefill values. */
@@ -56,6 +57,8 @@
 
 <Card
   imgsrc={race?.pictogram_url ?? pictogram_template}
+  imgwidth={RACE_PICTOGRAM_WIDTH}
+  imgheight={RACE_PICTOGRAM_HEIGHT}
   imgid="update_race_pictogram_preview_{race?.id ?? 'create'}"
 >
   <form method="POST" enctype="multipart/form-data">
diff --git a/src/lib/components/SubstitutionCard.svelte b/src/lib/components/SubstitutionCard.svelte
index ca1c618..d516c36 100644
--- a/src/lib/components/SubstitutionCard.svelte
+++ b/src/lib/components/SubstitutionCard.svelte
@@ -5,6 +5,7 @@
   import { get_by_value } from "$lib/database";
   import Dropdown, { type DropdownOption } from "./Dropdown.svelte";
   import type { Action } from "svelte/action";
+  import { DRIVER_HEADSHOT_HEIGHT, DRIVER_HEADSHOT_WIDTH } from "$lib/config";
 
   interface SubstitutionCardProps {
     /** The [Substitution] object used to prefill values. */
@@ -70,7 +71,7 @@
         `update_substitution_headshot_preview_${substitution?.id ?? "create"}`,
       ) as HTMLImageElement;
 
-      preview.src = src;
+      if (preview) preview.src = src;
     }
   };
 </script>
@@ -78,6 +79,8 @@
 <Card
   imgsrc={get_by_value(drivers, "id", substitution?.substitute ?? "")?.headshot_url ??
     headshot_template}
+  imgwidth={DRIVER_HEADSHOT_WIDTH}
+  imgheight={DRIVER_HEADSHOT_HEIGHT}
   imgid="update_substitution_headshot_preview_{substitution?.id ?? 'create'}"
 >
   <form method="POST" enctype="multipart/form-data">
diff --git a/src/lib/components/TeamCard.svelte b/src/lib/components/TeamCard.svelte
index ce9b0db..90ca5e6 100644
--- a/src/lib/components/TeamCard.svelte
+++ b/src/lib/components/TeamCard.svelte
@@ -5,6 +5,7 @@
   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";
 
   interface TeamCardProps {
     /** The [Team] object used to prefill values. */
@@ -30,6 +31,8 @@
 
 <Card
   imgsrc={team?.logo_url ?? logo_template}
+  imgwidth={TEAM_LOGO_WIDTH}
+  imgheight={TEAM_LOGO_HEIGHT}
   imgid="update_team_logo_preview_{team?.id ?? 'create'}"
 >
   <form method="POST" enctype="multipart/form-data">