diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css index e03bc5270c..7932f3bd0f 100644 --- a/src/wp-includes/css/media-views.css +++ b/src/wp-includes/css/media-views.css @@ -1509,12 +1509,19 @@ background: url(../images/spinner.gif) no-repeat; -webkit-background-size: 20px 20px; background-size: 20px 20px; - display: none; + float: right; + display: inline-block; + visibility: hidden; opacity: 0.7; filter: alpha(opacity=70); width: 20px; height: 20px; margin: 0; + vertical-align: middle; +} + +.media-frame .spinner.is-active { + visibility: visible; } .media-toolbar .spinner { @@ -1536,7 +1543,7 @@ } .attachment-details .settings-save-status .spinner { - margin: 0 5px 0; + margin-left: 5px; } .attachment-details .settings-save-status .saved { @@ -1544,7 +1551,10 @@ display: none; } -.attachment-details.save-waiting .settings-save-status .spinner, +.attachment-details.save-waiting .settings-save-status .spinner { + visibility: visible; +} + .attachment-details.save-complete .settings-save-status .saved { display: block; } @@ -1787,7 +1797,7 @@ } .media-frame .embed-loading .embed-url .spinner { - display: block; + visibility: visible; } .embed-link-settings, diff --git a/src/wp-includes/js/media/views.js b/src/wp-includes/js/media/views.js index ae2f97d27e..47611b69b7 100644 --- a/src/wp-includes/js/media/views.js +++ b/src/wp-includes/js/media/views.js @@ -4546,8 +4546,6 @@ EmbedLink = wp.media.view.Settings.extend({ return; } - this.spinner.show(); - this.fetch(); }, 600 ), @@ -4607,8 +4605,6 @@ EmbedLink = wp.media.view.Settings.extend({ this.model.unset( 'width', opts ); } - this.spinner.hide(); - this.$('.embed-container').show().find('.embed-preview').html( html ); } }); @@ -7463,7 +7459,7 @@ var Spinner = wp.media.View.extend({ show: function() { if ( ! this.spinnerTimeout ) { this.spinnerTimeout = _.delay(function( $el ) { - $el.show(); + $el.addClass( 'is-active' ); }, this.delay, this.$el ); } @@ -7471,7 +7467,7 @@ var Spinner = wp.media.View.extend({ }, hide: function() { - this.$el.hide(); + this.$el.removeClass( 'is-active' ); this.spinnerTimeout = clearTimeout( this.spinnerTimeout ); return this; diff --git a/src/wp-includes/js/media/views/embed/link.js b/src/wp-includes/js/media/views/embed/link.js index b09b3c9cab..ac28d442d3 100644 --- a/src/wp-includes/js/media/views/embed/link.js +++ b/src/wp-includes/js/media/views/embed/link.js @@ -34,8 +34,6 @@ EmbedLink = wp.media.view.Settings.extend({ return; } - this.spinner.show(); - this.fetch(); }, 600 ), @@ -95,8 +93,6 @@ EmbedLink = wp.media.view.Settings.extend({ this.model.unset( 'width', opts ); } - this.spinner.hide(); - this.$('.embed-container').show().find('.embed-preview').html( html ); } }); diff --git a/src/wp-includes/js/media/views/spinner.js b/src/wp-includes/js/media/views/spinner.js index c65c059429..8cbb0b099c 100644 --- a/src/wp-includes/js/media/views/spinner.js +++ b/src/wp-includes/js/media/views/spinner.js @@ -17,7 +17,7 @@ var Spinner = wp.media.View.extend({ show: function() { if ( ! this.spinnerTimeout ) { this.spinnerTimeout = _.delay(function( $el ) { - $el.show(); + $el.addClass( 'is-active' ); }, this.delay, this.$el ); } @@ -25,7 +25,7 @@ var Spinner = wp.media.View.extend({ }, hide: function() { - this.$el.hide(); + this.$el.removeClass( 'is-active' ); this.spinnerTimeout = clearTimeout( this.spinnerTimeout ); return this;