Plugins: Rotate the Updates icon in the admin bar when performing inline updates on the Plugins screen.

SergeyBiryukov · SergeyBiryukov · commit 7a5a5a7939bd · 2021-01-27T10:57:43.000Z
This provides better indication within the viewport about ongoing processes on the page when updating several plugins at the same time, but without using the bulk updater. Props ravipatel, audrasjb, johnjamesjacoby, paaljoachim, hellofromTonya, sabernhardt, mdwolinski, karmatosed, SergeyBiryukov. Fixes #51476. git-svn-id: https://develop.svn.wordpress.org/trunk@50027 602fd350-edb4-49c9-b593-d223f7449a82
diff --git a/src/js/_enqueues/wp/updates.js b/src/js/_enqueues/wp/updates.js
@@ -443,7 +443,8 @@
 	 *                     decorated with an abort() method.
 	 */
 	wp.updates.updatePlugin = function( args ) {
-		var $updateRow, $card, $message, message;
+		var $updateRow, $card, $message, message,
+			$adminBarUpdates = $( '#wp-admin-bar-updates' );
 
 		args = _.extend( {
 			success: wp.updates.updatePluginSuccess,
@@ -471,6 +472,8 @@
 			$card.removeClass( 'plugin-card-update-failed' ).find( '.notice.notice-error' ).remove();
 		}
 
+		$adminBarUpdates.addClass( 'spin' );
+
 		if ( $message.html() !== __( 'Updating...' ) ) {
 			$message.data( 'originaltext', $message.html() );
 		}
@@ -499,7 +502,8 @@
 	 * @param {string} response.newVersion New version of the plugin.
 	 */
 	wp.updates.updatePluginSuccess = function( response ) {
-		var $pluginRow, $updateMessage, newText;
+		var $pluginRow, $updateMessage, newText,
+			$adminBarUpdates = $( '#wp-admin-bar-updates' );
 
 		if ( 'plugins' === pagenow || 'plugins-network' === pagenow ) {
 			$pluginRow     = $( 'tr[data-plugin="' + response.plugin + '"]' )
@@ -521,6 +525,8 @@
 				.addClass( 'button-disabled updated-message' );
 		}
 
+		$adminBarUpdates.removeClass( 'spin' );
+
 		$updateMessage
 			.attr(
 				'aria-label',
@@ -553,7 +559,8 @@
 	 * @param {string}  response.errorMessage The error that occurred.
 	 */
 	wp.updates.updatePluginError = function( response ) {
-		var $card, $message, errorMessage;
+		var $card, $message, errorMessage,
+			$adminBarUpdates = $( '#wp-admin-bar-updates' );
 
 		if ( ! wp.updates.isValidResponse( response, 'update' ) ) {
 			return;
@@ -631,6 +638,8 @@
 			} );
 		}
 
+		$adminBarUpdates.removeClass( 'spin' );
+
 		wp.a11y.speak( errorMessage, 'assertive' );
 
 		$document.trigger( 'wp-plugin-update-error', response );
diff --git a/src/wp-includes/css/admin-bar.css b/src/wp-includes/css/admin-bar.css
@@ -588,6 +588,11 @@ html:lang(he-il) .rtl #wpadminbar * {
 	top: 2px;
 }
 
+#wpadminbar #wp-admin-bar-updates.spin .ab-icon:before {
+	display: inline-block;
+	animation: rotation 2s infinite linear;
+}
+
 /**
  * Search
  */
