Spinners: Toggle a class instead of show/hide.

Toggling spinners also now uses visibility instead of display, so that the space is always reserved and nothing moves around unexpectedly.

props cdog, MikeHansenMe, valendesigns.
fixes #22839. see #31875, #30725.


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

src/wp-admin/css/common.css

@@ -1960,13 +1960,19 @@ h2 .nav-tab {
 	background: url(../images/spinner.gif) no-repeat;
 	-webkit-background-size: 20px 20px;
 	background-size: 20px 20px;
-	display: none;
+	display: inline-block;
+	visibility: hidden;
 	float: right;
+	vertical-align: middle;
 	opacity: 0.7;
 	filter: alpha(opacity=70);
 	width: 20px;
 	height: 20px;
-	margin: 2px 5px 0;
+	margin: 4px 10px 0;
+}
+
+.spinner.is-active {
+	visibility: visible;
 }
 
 #template div {

src/wp-admin/css/forms.css

@@ -818,7 +818,6 @@ table.form-table td .updated p {
 .options-general-php .spinner {
 	float: none;
 	margin: 0 3px;
-	vertical-align: text-bottom;
 }
 
 .settings-php .language-install-spinner,

src/wp-admin/css/list-tables.css

@@ -108,12 +108,6 @@ strong .post-com-count:after {
 	text-align: center;
 }
 
-#replysubmit .spinner {
-	padding: 2px 0 0;
-	vertical-align: top;
-	float: right;
-}
-
 #replysubmit .button {
 	margin-right: 5px;
 }
@@ -363,10 +357,6 @@ table.fixed {
 	border-bottom: 0 none;
 }
 
-#commentsdiv .spinner {
-	padding-left: 5px;
-}
-
 .sorting-indicator {
 	display: none;
 	width: 10px;
@@ -912,12 +902,6 @@ tr.inline-edit-row td,
 	width: 6em;
 }
 
-.inline-edit-save .spinner {
-	padding: 4px 10px 0;
-	vertical-align: top;
-	float: right;
-}
-
 /*	Styling */
 .inline-edit-row h4 {
 	text-transform: uppercase;

src/wp-admin/css/media.css

@@ -274,9 +274,8 @@
 
 .find-box-search .spinner {
 	float: none;
-	left: 110px;
+	left: 105px;
 	position: absolute;
-	top: 2px;
 }
 
 .find-box-search,
@@ -911,8 +910,6 @@ border color while dragging a file over the uploader drop area */
 .wp_attachment_image .spinner,
 .A1B1 .spinner {
 	float: left;
-	padding: 0 0 4px 0;
-	vertical-align: bottom;
 }
 
 .imgedit-menu {

src/wp-admin/css/nav-menus.css

@@ -349,11 +349,6 @@ ul.add-menu-item-tabs li {
 	float: right;
 }
 
-.postbox .spinner {
-	display: none;
-	vertical-align: middle;
-}
-
 .button-controls {
 	clear:both;
 	margin: 10px 0;
@@ -408,6 +403,11 @@ ul.add-menu-item-tabs li {
 	width: 190px;
 }
 
+.quick-search-wrap .spinner {
+	float: none;
+	margin: 0 5px;
+}
+
 .nav-menus-php .list-wrap {
 	display: none;
 	clear: both;

src/wp-admin/css/press-this.css

@@ -1386,7 +1386,7 @@ html {
 	}
 }
 
-.spinner.is-visible {
+.spinner.is-active {
 	visibility: visible;
 }
 

src/wp-admin/css/widgets.css

@@ -271,8 +271,10 @@ div#widgets-right .closed .widgets-sortables {
 }
 
 .sidebar-name .spinner {
-	margin: -5px 5px;
 	float: none;
+	position: relative;
+	top: -2px;
+	margin: -5px 5px;
 }
 
 /* Dragging a widget over a closed sidebar */

src/wp-admin/js/edit-comments.js

@@ -352,7 +352,7 @@ commentReply = {
 		$('#replycontent').css('height', '').val('');
 		$('#edithead input').val('');
 		$('.error', replyrow).empty().hide();
-		$('.spinner', replyrow).hide();
+		$( '.spinner', replyrow ).removeClass( 'is-active' );
 
 		this.cid = '';
 	},
@@ -442,7 +442,7 @@ commentReply = {
 		var post = {};
 
 		$('#replysubmit .error').hide();
-		$('#replysubmit .spinner').show();
+		$( '#replysubmit .spinner' ).addClass( 'is-active' );
 
 		$('#replyrow input').not(':button').each(function() {
 			var t = $(this);
@@ -525,7 +525,7 @@ commentReply = {
 	error : function(r) {
 		var er = r.statusText;
 
-		$('#replysubmit .spinner').hide();
+		$( '#replysubmit .spinner' ).removeClass( 'is-active' );
 
 		if ( r.responseText )
 			er = r.responseText.replace( /<.[^<>]*?>/g, '' );

src/wp-admin/js/image-edit.js

@@ -306,7 +306,7 @@ var imageEdit = window.imageEdit = {
 			btn = $('#imgedit-open-btn-' + postid), spin = btn.siblings('.spinner');
 
 		btn.prop('disabled', true);
-		spin.show();
+		spin.addClass( 'is-active' );
 
 		data = {
 			'action': 'image-editor',
@@ -324,7 +324,7 @@ var imageEdit = window.imageEdit = {
 			head.fadeOut('fast', function(){
 				elem.fadeIn('fast');
 				btn.removeAttr('disabled');
-				spin.hide();
+				spin.removeClass( 'is-active' );
 			});
 		});
 

src/wp-admin/js/inline-edit-post.js

@@ -250,7 +250,7 @@ inlineEditPost = {
 			id = this.getId(id);
 		}
 
-		$('table.widefat .spinner').show();
+		$( 'table.widefat .spinner' ).addClass( 'is-active' );
 
 		params = {
 			action: 'inline-save',
@@ -266,7 +266,7 @@ inlineEditPost = {
 		// make ajax request
 		$.post( ajaxurl, params,
 			function(r) {
-				$('table.widefat .spinner').hide();
+				$( 'table.widefat .spinner' ).removeClass( 'is-active' );
 
 				if (r) {
 					if ( -1 !== r.indexOf( '<tr' ) ) {
@@ -289,7 +289,7 @@ inlineEditPost = {
 		var id = $('table.widefat tr.inline-editor').attr('id');
 
 		if ( id ) {
-			$('table.widefat .spinner').hide();
+			$( 'table.widefat .spinner' ).removeClass( 'is-active' );
 
 			if ( 'bulk-edit' === id ) {
 				$('table.widefat #bulk-edit').removeClass('inline-editor').hide().siblings('tr.hidden').remove();

src/wp-admin/js/inline-edit-tax.js

@@ -81,7 +81,7 @@ inlineEditTax = {
 			id = this.getId(id);
 		}
 
-		$('table.widefat .spinner').show();
+		$( 'table.widefat .spinner' ).addClass( 'is-active' );
 
 		params = {
 			action: 'inline-save-tax',
@@ -97,7 +97,7 @@ inlineEditTax = {
 		$.post( ajaxurl, params,
 			function(r) {
 				var row, new_id, option_value;
-				$('table.widefat .spinner').hide();
+				$( 'table.widefat .spinner' ).removeClass( 'is-active' );
 
 				if (r) {
 					if ( -1 !== r.indexOf( '<tr' ) ) {
@@ -133,7 +133,7 @@ inlineEditTax = {
 		var id = $('table.widefat tr.inline-editor').attr('id');
 
 		if ( id ) {
-			$('table.widefat .spinner').hide();
+			$( 'table.widefat .spinner' ).removeClass( 'is-active' );
 			$('#'+id).siblings('tr.hidden').addBack().remove();
 			id = id.substr( id.lastIndexOf('-') + 1 );
 			$(this.what+id).show();

src/wp-admin/js/media.js

@@ -51,14 +51,14 @@ var findPosts;
 				},
 				spinner = $( '.find-box-search .spinner' );
 
-			spinner.show();
+			spinner.addClass( 'is-active' );
 
 			$.ajax( ajaxurl, {
 				type: 'POST',
 				data: post,
 				dataType: 'json'
 			}).always( function() {
-				spinner.hide();
+				spinner.removeClass( 'is-active' );
 			}).done( function( x ) {
 				if ( ! x.success ) {
 					$( '#find-posts-response' ).text( attachMediaBoxL10n.error );

src/wp-admin/js/nav-menu.js

@@ -177,7 +177,7 @@ var wpNavMenu;
 							return false;
 
 						// Show the ajax spinner
-						t.find('.spinner').show();
+						t.find( '.spinner' ).addClass( 'is-active' );
 
 						// Retrieve menu item data
 						$(checkboxes).each(function(){
@@ -194,7 +194,7 @@ var wpNavMenu;
 						api.addItemToMenu(menuItems, processMethod, function(){
 							// Deselect the items and hide the ajax spinner
 							checkboxes.removeAttr('checked');
-							t.find('.spinner').hide();
+							t.find( '.spinner' ).removeClass( 'is-active' );
 						});
 					});
 				},
@@ -862,9 +862,9 @@ var wpNavMenu;
 				loc.find('select').each(function() {
 					params[this.name] = $(this).val();
 				});
-				loc.find('.spinner').show();
+				loc.find( '.spinner' ).addClass( 'is-active' );
 				$.post( ajaxurl, params, function() {
-					loc.find('.spinner').hide();
+					loc.find( '.spinner' ).removeClass( 'is-active' );
 				});
 				return false;
 			});
@@ -906,7 +906,7 @@ var wpNavMenu;
 				'type': input.attr('name')
 			};
 
-			$('.spinner', panel).show();
+			$( '.spinner', panel ).addClass( 'is-active' );
 
 			$.post( ajaxurl, params, function(menuMarkup) {
 				api.processQuickSearchQueryResponse(menuMarkup, params, panel);
@@ -923,10 +923,10 @@ var wpNavMenu;
 				return false;
 
 			// Show the ajax spinner
-			$('.customlinkdiv .spinner').show();
+			$( '.customlinkdiv .spinner' ).addClass( 'is-active' );
 			this.addLinkToMenu( url, label, processMethod, function() {
 				// Remove the ajax spinner
-				$('.customlinkdiv .spinner').hide();
+				$( '.customlinkdiv .spinner' ).removeClass( 'is-active' );
 				// Set custom link form back to defaults
 				$('#custom-menu-item-name').val('').blur();
 				$('#custom-menu-item-url').val('http://');
@@ -1174,7 +1174,7 @@ var wpNavMenu;
 
 			if( ! $items.length ) {
 				$('.categorychecklist', panel).html( '<li><p>' + navMenuL10n.noResultsFound + '</p></li>' );
-				$('.spinner', panel).hide();
+				$( '.spinner', panel ).removeClass( 'is-active' );
 				return;
 			}
 
@@ -1201,7 +1201,7 @@ var wpNavMenu;
 			});
 
 			$('.categorychecklist', panel).html( $items );
-			$('.spinner', panel).hide();
+			$( '.spinner', panel ).removeClass( 'is-active' );
 		},
 
 		removeMenuItem : function(el) {

src/wp-admin/js/post.js

@@ -20,7 +20,7 @@ commentsBox = {
 
 		this.st += num;
 		this.total = total;
-		$('#commentsdiv .spinner').show();
+		$( '#commentsdiv .spinner' ).addClass( 'is-active' );
 
 		data = {
 			'action' : 'get-comments',
@@ -35,7 +35,7 @@ commentsBox = {
 			function(r) {
 				r = wpAjax.parseAjaxResponse(r);
 				$('#commentsdiv .widefat').show();
-				$('#commentsdiv .spinner').hide();
+				$( '#commentsdiv .spinner' ).removeClass( 'is-active' );
 
 				if ( 'object' == typeof r && r.responses[0] ) {
 					$('#the-comment-list').append( r.responses[0].data );
@@ -272,9 +272,9 @@ jQuery(document).ready( function($) {
 			$submitButtons.addClass( 'disabled' );
 
 			if ( $button.attr('id') === 'publish' ) {
-				$submitpost.find('#major-publishing-actions .spinner').show();
+				$submitpost.find( '#major-publishing-actions .spinner' ).addClass( 'is-active' );
 			} else {
-				$submitpost.find('#minor-publishing .spinner').show();
+				$submitpost.find( '#minor-publishing .spinner' ).addClass( 'is-active' );
 			}
 		});
 	});
@@ -676,7 +676,7 @@ jQuery(document).ready( function($) {
 					wp.autosave.enableButtons();
 				}
 
-				$('#publishing-action .spinner').hide();
+				$( '#publishing-action .spinner' ).removeClass( 'is-active' );
 			}
 		});
 

src/wp-admin/js/press-this.js

@@ -101,7 +101,7 @@
 		 * Show UX spinner
 		 */
 		function showSpinner() {
-			$( '.spinner' ).addClass( 'is-visible' );
+			$( '.spinner' ).addClass( 'is-active' );
 			$( '.post-actions button' ).each( function() {
 				$( this ).attr( 'disabled', 'disabled' );
 			} );
@@ -111,7 +111,7 @@
 		 * Hide UX spinner
 		 */
 		function hideSpinner() {
-			$( '.spinner' ).removeClass( 'is-visible' );
+			$( '.spinner' ).removeClass( 'is-active' );
 			$( '.post-actions button' ).each( function() {
 				$( this ).removeAttr( 'disabled' );
 			} );

src/wp-admin/js/widgets.js

@@ -321,7 +321,7 @@ wpWidgets = {
 		};
 
 		if ( sidebarId ) {
-			$( '#' + sidebarId ).find('.spinner:first').css('display', 'inline-block');
+			$( '#' + sidebarId ).find( '.spinner:first' ).addClass( 'is-active' );
 		}
 
 		$('div.widgets-sortables').each( function() {
@@ -331,7 +331,7 @@ wpWidgets = {
 		});
 
 		$.post( ajaxurl, data, function() {
-			$('.spinner').hide();
+			$( '.spinner' ).removeClass( 'is-active' );
 		});
 	},
 
@@ -340,7 +340,7 @@ wpWidgets = {
 			data = widget.find('form').serialize(), a;
 
 		widget = $(widget);
-		$('.spinner', widget).show();
+		$( '.spinner', widget ).addClass( 'is-active' );
 
 		a = {
 			action: 'save-widget',
@@ -377,7 +377,7 @@ wpWidgets = {
 					widget.remove();
 				}
 			} else {
-				$('.spinner').hide();
+				$( '.spinner' ).removeClass( 'is-active' );
 				if ( r && r.length > 2 ) {
 					$( 'div.widget-content', widget ).html( r );
 					wpWidgets.appendTitle( widget );

src/wp-admin/js/wp-fullscreen.js

@@ -267,7 +267,7 @@
 			$saveMessage = $('#wp-fullscreen-save .wp-fullscreen-saved-message'),
 			$errorMessage = $('#wp-fullscreen-save .wp-fullscreen-error-message');
 
-		$spinner.show();
+		$spinner.addClass( 'is-active' );
 		$errorMessage.hide();
 		$saveMessage.hide();
 		$hidden.val('wp-fullscreen-save-post');
@@ -282,7 +282,7 @@
 			data: $('form#post').serialize(),
 			dataType: 'json'
 		}).done( function( response ) {
-			$spinner.hide();
+			$spinner.removeClass( 'is-active' );
 
 			if ( response && response.success ) {
 				$saveMessage.show();
@@ -298,7 +298,7 @@
 				$errorMessage.show();
 			}
 		}).fail( function() {
-			$spinner.hide();
+			$spinner.removeClass( 'is-active' );
 			$errorMessage.show();
 		});
 

src/wp-admin/options-general.php

@@ -60,11 +60,11 @@ function options_general_add_js() {
 		});
 		$("input[name='date_format_custom'], input[name='time_format_custom']").change( function() {
 			var format = $(this);
-			format.siblings('.spinner').css('display', 'inline-block'); // show(); can't be used here
+			format.siblings( '.spinner' ).addClass( 'is-active' );
 			$.post(ajaxurl, {
 					action: 'date_format_custom' == format.attr('name') ? 'date_format' : 'time_format',
 					date : format.val()
-				}, function(d) { format.siblings('.spinner').hide(); format.siblings('.example').text(d); } );
+				}, function(d) { format.siblings( '.spinner' ).removeClass( 'is-active' ); format.siblings('.example').text(d); } );
 		});
 
 		var languageSelect = $( '#WPLANG' );

src/wp-includes/css/editor.css

@@ -1375,8 +1375,7 @@ i.mce-i-wp_code:before {
 }
 
 #wp-link .link-search-wrapper .spinner {
-	display: none;
-	vertical-align: text-bottom;
+	margin-top: 5px;
 }
 
 #wp-link .link-target {
@@ -1505,12 +1504,6 @@ i.mce-i-wp_code:before {
 	padding: 10px 0;
 }
 
-#wp-link .river-waiting .spinner {
-	margin: 0 auto;
-	display: block;
-	float: none;
-}
-
 #wp-link .submitbox {
 	padding: 8px 16px;
 	background: #fcfcfc;

src/wp-includes/js/wplink.js

@@ -405,11 +405,11 @@ var wpLink;
 					return;
 
 				wpLink.lastSearch = search;
-				waiting = t.parent().find('.spinner').show();
+				waiting = t.parent().find( '.spinner' ).addClass( 'is-active' );
 
 				rivers.search.change( search );
 				rivers.search.ajax( function() {
-					waiting.hide();
+					waiting.removeClass( 'is-active' );
 				});
 			} else {
 				rivers.search.hide();
@@ -645,11 +645,11 @@ var wpLink;
 				if ( ! self.query.ready() || newBottom < self.contentHeight.height() - wpLink.riverBottomThreshold )
 					return;
 
-				self.waiting.show();
+				self.waiting.addClass( 'is-active' );
 				el.scrollTop( newTop + self.waiting.outerHeight() );
 
 				self.ajax( function() {
-					self.waiting.hide();
+					self.waiting.removeClass( 'is-active' );
 				});
 			}, wpLink.timeToTriggerRiver );
 		}