From 84c5474197da0392d90391f5c4dedd9e0755b5a5 Mon Sep 17 00:00:00 2001
From: Helen Hou-Sandi <helen@git.wordpress.org>
Date: Thu, 9 Apr 2015 20:34:10 +0000
Subject: [PATCH] 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          | 18 ++++++++++++++----
 src/wp-includes/js/media/views.js            |  8 ++------
 src/wp-includes/js/media/views/embed/link.js |  4 ----
 src/wp-includes/js/media/views/spinner.js    |  4 ++--
 4 files changed, 18 insertions(+), 16 deletions(-)

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;