diff --git a/src/wp-includes/js/mce-view.js b/src/wp-includes/js/mce-view.js index a5bcdc2329..87d96efce4 100644 --- a/src/wp-includes/js/mce-view.js +++ b/src/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 '' + + '
' + + '
' + + '
' + + '
'; + }, render: function() { + var html = this.getHtml() || this.loadingPlaceholder(); + this.setContent( '

\u00a0

' + '
' + @@ -46,7 +57,7 @@ window.wp = window.wp || {}; '
' + '
' + '
' + - this.getHtml() + + html + '
' + ( this.overlay ? '
' : '' ) + '' + @@ -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 ''; } } ); diff --git a/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css b/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css index b5aa08d618..54c94dce80 100644 --- a/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css +++ b/src/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;