Lib: Add imgwidth/imgheight to Card component so layout doesn't jump when lazyloading images

This commit is contained in:
2024-12-16 02:28:31 +01:00
parent fde45eb37c
commit 262ac50356
5 changed files with 33 additions and 10 deletions

View File

@ -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">