Attached image preview flash about wp-core-media-widgets

[timmyc]

@obenland what are the steps to reproduce this - I can't seem to trigger it myself.

[obenland]

To reproduce:

1. Set an image and select thumbnail size.
2. Save the widget/customizer preview.
3. Reload.
4. Expand widget toggle.

[westonruter]

Should the image size in the preview be a medium, like the default widget image size, rather than full?

Yes, if the medium size is available, it should be shown instead of full. This is currently being done in the media control actually, but I seem to have missed it in the template for the image control. See https://github.com/WordPress/wordpress-develop/blob/5fcfb9b247474e98a5deaa6f04781f3e99583094/src/wp-includes/customize/class-wp-customize-media-control.php#L159-L160

[westonruter]

When previewing an attachment image in the widget preview and the selected size is not the full size, there is a flash of the selected image before the full attachment object has loaded and the image is replaced with its full size. ¶ Should we wait showing a preview of the image until the attachment object has loaded?

The reason this is happening is that we're currently storing the selected image size URL in the model's url attribute. If the attachment is not loaded yet, then it essentially falls-back to the url for preview in the control and also in \WP_Widget_Media_Image::render_media().

In the control preview template (\WP_Widget_Media_Image::render_control_template_scripts()), this is the problematic line:

<img class="attachment-thumb" src="{{ data.attachment_id && data.attachment.url ? data.attachment.url : data.url }}" draggable="false" alt="{{ data.alt }}" <# if ( ! data.alt ) { #> aria-describedby="{{ describedById }}" <# } #> />

So perhaps when data.attachment_id && ! data.attachment.url the template should display a spinner instead? Or perhaps we could continue to show the current cached image url but with opacity:0.5 to indicate it is still loading?