Editor: Images flickering on upload and not showing any progress of t…

…he upload process (#14950)

* Properly preload images when uploaded

* Add animation to images that are being currently uploaded

* Remove pulsating image animation

* Fix variable naming to follow standards

* Create a separate event to get the resized image url

* Improve wording of code comment

assets/stylesheets/editor.scss

@@ -2,3 +2,5 @@
 @import 'shared/typography';
 
 @import 'components/tinymce/iframe';
+
+@import 'components/tinymce/plugins/media/style';

client/components/tinymce/plugins/media/plugin.jsx

@@ -226,6 +226,12 @@ function mediaButton( editor ) {
 			if ( current.media.transient ) {
 				transients++;
 				isTransientDetected = true;
+
+				// Mark the image as a transient in upload
+				editor.dom.$( img ).toggleClass( 'is-transient', true );
+			} else {
+				// Remove the transient flag if present
+				editor.dom.$( img ).toggleClass( 'is-transient', false );
 			}
 
 			if (
@@ -312,7 +318,7 @@ function mediaButton( editor ) {
 
 			// To avoid an undesirable flicker after the image uploads but
 			// hasn't yet been loaded, we preload the image before rendering.
-			const imageUrl = media.URL;
+			const imageUrl = event.resizedImageUrl || media.URL;
 			if ( ! loadedImages.isLoaded( imageUrl ) ) {
 				const preloadImage = new Image();
 				preloadImage.src = imageUrl;

client/components/tinymce/plugins/media/restrict-size/index.js

@@ -29,18 +29,30 @@ function resetImageSrc( img, opening, src, attributes, origAttr, origSrc, closin
 	return `${ opening }${ origSrc }${ attributes }${ closing }`;
 }
 
+function getResizedImgUrlFromImgString( img ) {
+	const parsed = deserialize( img );
+	if ( parsed.media.transient || ! parsed.media.ID ) {
+		return null;
+	}
+
+	return {
+		originalUrl: parsed.media.URL,
+		resizedUrl: resize( parsed.media.URL, Math.min( parsed.media.width || Infinity, MAX_WIDTH ) )
+	};
+}
+
 function setImageSrc( img, opening, src, closing ) {
 	if ( -1 !== img.indexOf( 'data-wpmedia-src' ) ) {
 		return img;
 	}
 
-	const parsed = deserialize( img );
-	if ( parsed.media.transient || ! parsed.media.ID ) {
+	const url = getResizedImgUrlFromImgString( img );
+
+	if ( url === null ) {
 		return img;
 	}
 
-	const url = resize( parsed.media.URL, Math.min( parsed.media.width || Infinity, MAX_WIDTH ) );
-	return `${ opening }${ url }" data-wpmedia-src="${ parsed.media.URL }${ closing }`;
+	return `${ opening }${ url.resizedUrl }" data-wpmedia-src="${ url.originalUrl }${ closing }`;
 }
 
 export function resetImages( content ) {
@@ -60,6 +72,17 @@ export default function( editor ) {
 		event.content = setImages( event.content );
 	} );
 
+	editor.on( 'BeforeSetWpcomMedia', ( event ) => {
+		/**
+		 * Add the resized image URL so we can properly preload it in the editor
+		 */
+		const resizedUrl = getResizedImgUrlFromImgString( event.content );
+
+		if ( resizedUrl !== null ) {
+			event.resizedImageUrl = resizedUrl.resizedUrl;
+		}
+	} );
+
 	editor.on( 'GetContent', ( event ) => {
 		if ( event.format !== 'raw' || ! event.content || event.selection ) {
 			return;

client/components/tinymce/plugins/media/style.scss

@@ -0,0 +1,5 @@
+img.is-transient {
+	/**
+		This class is applied to images that are currently uploading to the media library from the TinyMCE editor
+	*/
+}