TinyMCE wpView:

- Add loadingPlaceholder() that returns some html to use as placeholder while the view is loading. Includes a subtle CSS based loading animation.
- Fix setContent(), it should empty the element before appending the new node.
- Change getHtml() to always return a string.
Fixes #28761.
Built from https://develop.svn.wordpress.org/trunk@29019


git-svn-id: http://core.svn.wordpress.org/trunk@28807 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-includes/js/mce-view.js

@@ -36,8 +36,19 @@ window.wp = window.wp || {};
 
 	_.extend( wp.mce.View.prototype, {
 		initialize: function() {},
-		getHtml: function() {},
+		getHtml: function() {
+			return '';
+		},
+		loadingPlaceholder: function() {
+			return '' +
+				'<div class="loading-placeholder">' +
+					'<div class="dashicons dashicons-admin-media"></div>' +
+					'<div class="wpview-loading"><ins></ins></div>' +
+				'</div>';
+		},
 		render: function() {
+			var html = this.getHtml() || this.loadingPlaceholder();
+
 			this.setContent(
 				'<p class="wpview-selection-before">\u00a0</p>' +
 				'<div class="wpview-body" contenteditable="false">' +
@@ -46,7 +57,7 @@ window.wp = window.wp || {};
 						'<div class="dashicons dashicons-no-alt remove"></div>' +
 					'</div>' +
 					'<div class="wpview-content wpview-type-' + this.type + '">' +
-						this.getHtml() +
+						html +
 					'</div>' +
 					( this.overlay ? '<div class="wpview-overlay"></div>' : '' ) +
 				'</div>' +
@@ -82,7 +93,7 @@ window.wp = window.wp || {};
 							if ( option === 'replace' ) {
 								element = editor.dom.replace( html, wrap );
 							} else {
-								element.appendChild( html );
+								$( element ).empty().append( html );
 							}
 						}
 
@@ -359,7 +370,7 @@ window.wp = window.wp || {};
 
 				// Don't render errors while still fetching attachments
 				if ( this.dfd && 'pending' === this.dfd.state() && ! this.attachments.length ) {
-					return;
+					return '';
 				}
 
 				if ( this.attachments.length ) {
@@ -605,7 +616,7 @@ window.wp = window.wp || {};
 
 				// Don't render errors while still fetching attachments
 				if ( this.dfd && 'pending' === this.dfd.state() && ! this.attachments.length ) {
-					return;
+					return '';
 				}
 
 				_.each( model.defaults, function( value, key ) {
@@ -813,9 +824,6 @@ window.wp = window.wp || {};
 			$( '.wp-audio-shortcode, .wp-video-shortcode', this.node ).each( function ( i, element ) {
 				self.players.push( new MediaElementPlayer( element, self.mejsSettings ) );
 			} );
-		},
-		getHtml: function() {
-			return '';
 		}
 	} );
 

wp-includes/js/tinymce/skins/wordpress/wp-content.css

@@ -311,6 +311,52 @@ audio {
 	display: block;
 }
 
+.wpview-wrap .loading-placeholder {
+	border: 1px dashed #ccc;
+	padding: 10px;
+}
+
+.wpview-wrap[data-mce-selected] .loading-placeholder {
+	border-color: transparent;
+}
+
+/* A little "loading" animation, not showing in IE < 10 */
+.wpview-wrap .wpview-loading {
+	width: 60px;
+	height: 5px;
+	overflow: hidden;
+	background-color: transparent;
+	margin: 10px auto 0;
+}
+
+.wpview-wrap .wpview-loading ins {
+	background-color: #333;
+	margin: 0 0 0 -60px;
+	width: 60px;
+	height: 5px;
+	display: block;
+	-webkit-animation: wpview-loading 1.3s infinite 1s linear;
+	animation: wpview-loading 1.3s infinite 1s linear;
+}
+
+@-webkit-keyframes wpview-loading {
+	0% {
+		margin-left: -60px;
+	}
+	100% {
+		margin-left: 60px;
+	}
+}
+
+@keyframes wpview-loading {
+	0% {
+		margin-left: -60px;
+	}
+	100% {
+		margin-left: 60px;
+	}
+}
+
 #wp-image-toolbar {
 	position: absolute;
 	margin: 0;
@@ -360,7 +406,8 @@ audio {
 	border-color: transparent;
 }
 
-.wpview-error .dashicons {
+.wpview-error .dashicons,
+.loading-placeholder .dashicons {
 	display: block;
 	margin: 0 auto;
 	width: 32px;