There are three stages of loading I am seeing

1. Spinner (expected)
2. Stretched images (not expected)
3. Proper image sizes (expected)

Is there a way to prevent step 2 from happening? It is causing some weird layout shift very quickly whenever loading.

Thanks!

It seems like the object-contain is not being applied instantly or something?

<div className="relative h-[50px] w-full max-w-[150px]">
    <Image
        src={gun.defaultPresetImageUrl}
        alt={gun.name}
        sizes="150px"
        className="object-contain"
        fill={true}
    />
</div>