Update image loading state to use a spinner and a faded static image.

packages/block-library/src/gallery/editor.scss

@@ -17,8 +17,8 @@ ul.wp-block-gallery li {
 		outline: 4px solid theme(primary);
 	}
 
-	&.is-transient img {
-		@include edit-post__loading-fade-animation;
+	.is-transient img {
+		opacity: 0.3;
 	}
 
 	.editor-rich-text {
@@ -119,7 +119,8 @@ ul.wp-block-gallery li {
 	position: absolute;
 	top: 50%;
 	left: 50%;
-	transform: translate(-50%, -50%);
+	margin-top: -9px;
+	margin-left: -9px;
 }
 
 // Last item always needs margins reset.

packages/block-library/src/gallery/gallery-image.js

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress Dependencies
  */
-import { Component } from '@wordpress/element';
+import { Component, Fragment } from '@wordpress/element';
 import { IconButton, Spinner } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { BACKSPACE, DELETE } from '@wordpress/keycodes';
@@ -99,10 +99,24 @@ class GalleryImage extends Component {
 				break;
 		}
 
-		// Disable reason: Image itself is not meant to be
-		// interactive, but should direct image selection and unfocus caption fields
-		// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-		const img = url ? <img src={ url } alt={ alt } data-id={ id } onClick={ this.onImageClick } tabIndex="0" onKeyDown={ this.onImageClick } aria-label={ ariaLabel } /> : <Spinner />;
+		const img = (
+			// Disable reason: Image itself is not meant to be interactive, but should
+			// direct image selection and unfocus caption fields.
+			/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
+			<Fragment>
+				<img
+					src={ url }
+					alt={ alt }
+					data-id={ id }
+					onClick={ this.onImageClick }
+					tabIndex="0"
+					onKeyDown={ this.onImageClick }
+					aria-label={ ariaLabel }
+				/>
+				{ isBlobURL( url ) && <Spinner /> }
+			</Fragment>
+			/* eslint-enable jsx-a11y/no-noninteractive-element-interactions */
+		);
 
 		const className = classnames( {
 			'is-selected': isSelected,

packages/block-library/src/image/edit.js

@@ -25,6 +25,7 @@ import {
 	PanelBody,
 	ResizableBox,
 	SelectControl,
+	Spinner,
 	TextControl,
 	TextareaControl,
 	Toolbar,
@@ -506,10 +507,17 @@ class ImageEdit extends Component {
 							} else {
 								defaultedAlt = __( 'This image has an empty alt attribute' );
 							}
-							// Disable reason: Image itself is not meant to be
-							// interactive, but should direct focus to block
-							// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-							const img = <img src={ url } alt={ defaultedAlt } onClick={ this.onImageClick } />;
+
+							const img = (
+								// Disable reason: Image itself is not meant to be interactive, but
+								// should direct focus to block.
+								/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
+								<Fragment>
+									<img src={ url } alt={ defaultedAlt } onClick={ this.onImageClick } />
+									{ isBlobURL( url ) && <Spinner /> }
+								</Fragment>
+								/* eslint-enable jsx-a11y/no-noninteractive-element-interactions */
+							);
 
 							if ( ! isResizable || ! imageWidthWithinContainer ) {
 								return (

packages/block-library/src/image/editor.scss

@@ -2,12 +2,21 @@
 	position: relative;
 
 	&.is-transient img {
-		@include edit-post__loading-fade-animation;
+		opacity: 0.3;
 	}
 
 	figcaption img {
 		display: inline;
 	}
+
+	// Shown while image is being uploaded
+	.components-spinner {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		margin-top: -9px;
+		margin-left: -9px;
+	}
 }
 
 // This is necessary for the editor resize handles to accurately work on a non-floated, non-resized, small image.