[5.x]: Matrix field thumbnail layout shift

[ryanleichty]

What happened?

Description

There's a decent amount of layout shift when loading an entry with a matrix field that includes thumbnails due to the thumbnails (and maybe other images too?) that don't have their width and height specified.

Adding the width and height to the image or adding an aspect ratio resolves most of the layout shift on the page.

Steps to reproduce

1. Open an entry with a matrix field that has a bunch of entries with thumbnail images.
2. Scroll down the page before all of the images load to experience how the layout shift impacts the editing experience (you may need to throttle the network if you have amazing download speeds or the images cached)

Expected behavior

I would expect less layout shift if all of the images have their width and height/aspect ratio applied.

Actual behavior

Lots of layout shift.

Craft CMS version

5.6.7

PHP version

8.2.26

Operating system and version

Linux 5.10.233-224.894.amzn2.x86_64

Database type and version

MySQL 8.0.35

Image driver and version

Imagick 3.7.0 (ImageMagick 7.1.1-32)

Installed plugins and versions

Alt Text Generator 5.2.1
Amazon S3 2.2.1
Asset Usage 4.1.3
CKEditor 4.6.0
Colour Swatches 5.1.0
Donkeytail 5.0.0-beta.1
Empty Coalesce 5.0.0
Hyper 2.2.2
Image Hotspots 3.0.1
Neo 5.2.22
Retcon 3.2.1
Retour 5.0.5
Template Selector 5.0.1