Image changes size when loading single result page

[AetherUnbound]

Description

When viewing a single image result, the image thumbnail will load first, then the fullsize image will load. This frequently causes a smaller image to load momentarily, then flashes to the larger image.

Should the thumbnail not be loaded in this context? Should it be loaded at the same size as the original image so there's no size discrepancy, even if there is a quality discrepancy?

Reproduction

1. Visit https://search-staging.openverse.engineering/image/0439408c-11ae-490e-a10a-8139766f68fb
2. Refresh the page
3. Observe that the thumbnail shows up momentarily before the full image loads

Screenshots

Screencast.2022-04-27.16.08.14.mp4

Environment

• Device: Desktop
• OS: Ubuntu
• Browser: Firefox

Additional context

Resolution

• 🙋 I would be interested in resolving this bug.

[sarayourfriend]

This is indeed caused by the thumbnail being used as a placeholder.

If we have the image dimensions in the API data then we can use it to stretch the thumbnail to size until the actual image loads.

[zackkrida]

This can be fixed pretty easily. One question I have before doing so requires help from @panchovm:

Currently, single result images have a max-height of 500px. This means that on my 24" 5k monitor, a single result never looks larger than this:

https://cln.sh/fQbQIZ

Do we want to increase this size as part of this PR?

[fcoveram]

It sounds like a nice improvement defining a relative height for different screen sizes. My only concern is showing a tall image on many devices where the title, author, and CTA are hidden below the visible area.

Do you have an idea for tackling this @zackkrida? I am very open to try it