From e4bd98d827de91b1b741e2b2043a81f38ffa133d Mon Sep 17 00:00:00 2001
From: Sergio Estevao <sergioestevao@gmail.com>
Date: Fri, 8 Feb 2019 14:08:21 +0000
Subject: [PATCH 1/2] Have a image placeholder while image size is being
 calculated.

---
 packages/block-library/src/image/image-size.native.js | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/packages/block-library/src/image/image-size.native.js b/packages/block-library/src/image/image-size.native.js
index 8b29b9607e81e..8103676133dda 100644
--- a/packages/block-library/src/image/image-size.native.js
+++ b/packages/block-library/src/image/image-size.native.js
@@ -12,6 +12,7 @@ import { View, Image } from 'react-native';
  * Internal dependencies
  */
 import { calculatePreferedImageSize } from './utils';
+import { Dashicon } from '@wordpress/components';
 
 class ImageSize extends Component {
 	constructor() {
@@ -76,6 +77,14 @@ class ImageSize extends Component {
 			imageWidthWithinContainer: this.state.width,
 			imageHeightWithinContainer: this.state.height,
 		};
+		if ( this.state.width === undefined ) {
+			const width = 300;
+			return (
+				<View onLayout={ this.onLayout } style={ { flex: 1, flexDirection: 'row', justifyContent: 'center' } }>
+					<Dashicon icon={ 'format-image' } size={ width } />
+				</View>
+			);
+		}
 		return (
 			<View onLayout={ this.onLayout }>
 				{ this.props.children( sizes ) }

From 249c4b7167dbbf98dca4b7f1018d38ed0ba3f792 Mon Sep 17 00:00:00 2001
From: Sergio Estevao <sergioestevao@gmail.com>
Date: Sun, 17 Feb 2019 20:53:13 +0000
Subject: [PATCH 2/2] Move placeholder image to image block code.

---
 packages/block-library/src/image/edit.native.js       | 8 ++++++++
 packages/block-library/src/image/image-size.native.js | 9 ---------
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
index 822723ce141f6..c51f1b2fb9ef1 100644
--- a/packages/block-library/src/image/edit.native.js
+++ b/packages/block-library/src/image/edit.native.js
@@ -287,6 +287,14 @@ class ImageEdit extends React.Component {
 								imageHeightWithinContainer,
 							} = sizes;
 
+							if ( imageWidthWithinContainer === undefined ) {
+								return (
+									<View style={ styles.imageContainer } >
+										<Dashicon icon={ 'format-image' } size={ 300 } />
+									</View>
+								);
+							}
+
 							let finalHeight = imageHeightWithinContainer;
 							if ( height > 0 && height < imageHeightWithinContainer ) {
 								finalHeight = height;
diff --git a/packages/block-library/src/image/image-size.native.js b/packages/block-library/src/image/image-size.native.js
index 8103676133dda..8b29b9607e81e 100644
--- a/packages/block-library/src/image/image-size.native.js
+++ b/packages/block-library/src/image/image-size.native.js
@@ -12,7 +12,6 @@ import { View, Image } from 'react-native';
  * Internal dependencies
  */
 import { calculatePreferedImageSize } from './utils';
-import { Dashicon } from '@wordpress/components';
 
 class ImageSize extends Component {
 	constructor() {
@@ -77,14 +76,6 @@ class ImageSize extends Component {
 			imageWidthWithinContainer: this.state.width,
 			imageHeightWithinContainer: this.state.height,
 		};
-		if ( this.state.width === undefined ) {
-			const width = 300;
-			return (
-				<View onLayout={ this.onLayout } style={ { flex: 1, flexDirection: 'row', justifyContent: 'center' } }>
-					<Dashicon icon={ 'format-image' } size={ width } />
-				</View>
-			);
-		}
 		return (
 			<View onLayout={ this.onLayout }>
 				{ this.props.children( sizes ) }