Media: Bring back spinners, now without bouncing select elements.

props afercia for the initial patch.
see #22839, #30725.


git-svn-id: https://develop.svn.wordpress.org/trunk@32101 602fd350-edb4-49c9-b593-d223f7449a82

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,

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;

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 );
 	}
 });

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;