Display Spinner when uploading media

WordPress · Jun 24, 2021 · 17f897a · 17f897a
1 parent 31b6ae0
commit 17f897a
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 3 deletions.
diff --git a/packages/block-library/src/media-text/editor.scss b/packages/block-library/src/media-text/editor.scss
@@ -1,3 +1,20 @@
+.wp-block-media-text__media {
+	position: relative;
+
+	&.is-transient img {
+		opacity: 0.3;
+	}
+
+	// Shown while image is being uploaded
+	.components-spinner {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		margin-top: -9px;
+		margin-left: -9px;
+	}
+}
+
 .wp-block-media-text .__resizable_base__ {
 	grid-column: 1 / span 2;
 	grid-row: 2;

diff --git a/packages/block-library/src/media-text/media-container.js b/packages/block-library/src/media-text/media-container.js
@@ -7,7 +7,7 @@ import { noop } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { ResizableBox, withNotices } from '@wordpress/components';
+import { ResizableBox, Spinner, withNotices } from '@wordpress/components';
 import {
 	BlockControls,
 	BlockIcon,
@@ -19,6 +19,7 @@ import { __ } from '@wordpress/i18n';
 import { useViewportMatch } from '@wordpress/compose';
 import { useDispatch } from '@wordpress/data';
 import { forwardRef } from '@wordpress/element';
+import { isBlobURL } from '@wordpress/blob';
 
 /**
  * Internal dependencies
@@ -119,7 +120,7 @@ function MediaContainer( props, ref ) {
 
 	const { toggleSelection } = useDispatch( blockEditorStore );
 
-	if ( mediaType && mediaUrl ) {
+	if ( mediaUrl ) {
 		const onResizeStart = () => {
 			toggleSelection( false );
 		};
@@ -150,7 +151,8 @@ function MediaContainer( props, ref ) {
 				as="figure"
 				className={ classnames(
 					className,
-					'editor-media-container__resizer'
+					'editor-media-container__resizer',
+					{ 'is-transient': isBlobURL( mediaUrl ) }
 				) }
 				style={ backgroundStyles }
 				size={ { width: mediaWidth + '%' } }
@@ -171,6 +173,7 @@ function MediaContainer( props, ref ) {
 					mediaId={ mediaId }
 				/>
 				{ ( mediaTypeRenderers[ mediaType ] || noop )() }
+				{ isBlobURL( mediaUrl ) && <Spinner /> }
 				<PlaceholderContainer { ...props } />
 			</ResizableBoxContainer>
 		);