When plugins are updating, the adminbar icon should also rotate

[johnjamesjacoby]

When updating plugins on the Plugins screen using the new'ish fancy inline updating approach, an inline notice will appear with a rotating dashicon to signify that it is currently being updated.

I think it would be a nice bit of polish if the same dashicon in the adminbar also rotated at the same time, and stopped when all plugins are done updating.

[ravipatel]

Updated a pathch with js & css code

[ravipatel]

latest code

[ravipatel]

success & error based managed code.

[ryelle]

This came up in the CSS bug scrub today, and we decided it could use a designer's input.

[johnjamesjacoby]

If it helps, I came to the conclusion that this would be useful when updating several plugins at the same time, but without using the bulk updater.

Once I've scrolled away from a plugin and clicked to update another, there is no indication within the viewport that plugins are successfully or failing to update, other than the number being decremented on success.

Seeing the icon spin in the adminbar seems like a logical way, to me, to communicate to users that something is still processing somewhere on the page.

[ravipatel]

Added New code for a single & bulk action : Update

[paaljoachim]

We discussed the ticket during a design feedback session and liked the idea of having a rotating spinner in the top admin bar. There was some additional discussion. Here is a link: ​https://wordpress.slack.com/archives/C02S78ZAL/p1603902566204600

One question came up. How would this behave on mobile?

It would be great with some newer screenshots. Thanks.

[hellofromTonya]

The "updating plugins on the Plugins screen using the new'ish fancy inline updating approach" was added before 5.6. In talking with others, Ajax updates were in 4.6. Changing the version to 4.6.

However, if this version is not correct, please advise or update.

[SergeyBiryukov]

Some design feedback was provided in comment:9, looks like this is good to go, assuming the patch works as expected.

[SergeyBiryukov]

Related: #51496

[audrasjb]

Patch refreshed against trunk

[audrasjb]

51476.2.diff on large screen

[audrasjb]

51476.2.diff on small screen

[audrasjb]

I tested the last proposed patch and it works like a charm (see video screenshots above).
Added 51476.2.diff to refresh the patch against trunk.
Looks good to go. Marking this for commit.

[paaljoachim]

Nice job, @audrasjb !
Looks good!

[sabernhardt]

I generally dislike adding motion, but I think anyone who agrees with me could have the prefers-reduced-motion setting set to reduce. A similar consideration was made for the login shake on #49723.

(If making this change, it could be a separate commit on this ticket.)

[johnjamesjacoby]

@sabernhardt that is a good point, and I'm glad you mentioned it.

If the existing Plugin list-table-row spinners are already compatible with the reduced-motion setting, I think the right thing to do is to include support for it in this issue. If not, I think they all should be addressed together in a new ticket.

[audrasjb]

That's a really good point. By the way the issue also exists in the existing Plugin (and Themes, for multisites) Screen. Therefore, I created #52263.

I think this ticket can be committed as it is, and the issue addressed on the other one :)

thanks!

[SergeyBiryukov]

Noticed a minor issue with 51476.2.diff​: the placement of adding/removing the class is not really consistent.

In the three functions affected, there are these conditionals:

if ( 'plugins' === pagenow || 'plugins-network' === pagenow ) {
	...
} else if ( 'plugin-install' === pagenow || 'plugin-install-network' === pagenow ) {
	...
}

In the first function, adding the class happens outside of them, but in the other two the class is only removed in the first conditional, so when updating a plugin from the Add Plugins screen, the icon just keeps spinning forever.

51476.3.diff​ fixes that. I've also changed the .updating-message class to .spin, since there's no message on the admin bar icon. This is also somewhat consistent with the .spin class used in auto-update toggles.

[audrasjb]

Erf, I completely missed those issues. Testing your patch right now.

[audrasjb]

Testing 51476.3.diff

[audrasjb]

Patch works well on my side 😎

[SergeyBiryukov]

In 50027:

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

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.

[SergeyBiryukov]

In 50028:

Accessibility: Administration: Respect the prefers-reduced-motion media query for update icon spinner animations.

The update icon rotation should not occur when the user has opted to reduce motion, for example by selecting the "Reduce motion" option in macOS' preferences or unselecting "Show animations in Windows" in Windows' preferences.

Follow-up to [47813], [50027].

Props xkon, audrasjb, johnbillion.
Fixes #52263. See #51476.