Add a loader when adding a new category

[guddu1315]

Hello,

Whenever we add a post category , post tag or a term for any custom taxonomy.
There is no indicator or loader or a message which specifies that category is being added.

I have noticed in some sites with heavy database and lots of plugin active, where user adds the category and it takes 5-10 seconds till the category is added and user gets no indication about it.

So when it takes 5-10 seconds user gets frustrated and clicks on add new category again and then category is added twice.

So disabling the button and adding a loader will be a great enhancement.

Thank you,

[birgire]

Thanks for the ticket @guddu1315

A loader sounds like a good improvement for users experiencing that.

Related is #42937 regarding a success notice.

[guddu1315]

Hello @birgire

Thanks for your reply. Just checked the ticket #42937
It is related. Ticket #42937 is about adding a success message.
But with loader and disabling the add new button will reduce the chance of adding multiple categories when process is slow due to lots of plugins.

[afercia]

Disabling the button with a disabled attribute would produce a focus loss for keyboard users. Instead, I'd recommend to just "noop" the button and keep it focusable.

Some kind of progress indicator makes totally sense to me. I'd consider to use it also when deleting a term.

To reproduce the lack of feedback when things are slow, you can just throttle the network via Chrome dev tools. See the animated GIF attached below.

[guddu1315]

@afercia

Thank you so much for this wonderful GIF.
It will be so easy for everyone to understand what this ticket is all about.

Thanks again.

[andg]

I have inspected the code in that page, and found out that, actually, there is a spinner element already in the markup. It just has visibility: hidden by default, and is never shown. I thought it could be a quick and easy way to add a class to the form while it's elaborating the request, to show the spinner:

I am attaching a patch that does just that (and noops the button after submit, as @afercia suggested).

This one was quick; concerning displaying additional visual feedback also when deleting a term, I think that's a bit more complicated though.

[andg]

Add visual feedback when submitting the form that adds a new term.

[afercia]

Discussed during today's accessibility bug-scrub. At a first glance, the patch approach looks good. @andg thanks for the patch: mind owning this ticket? Moving it to 5.3 consideration.

[andg]

Sure thing, @afercia

[SergeyBiryukov]

Replying to andg:

I have inspected the code in that page, and found out that, actually, there is a spinner element already in the markup. It just has visibility: hidden by default, and is never shown.

I could not reproduce that, there's just submit_button()​ in that place. I had to add the spinner element when testing the patch.

Replying to guddu1315:

So when it takes 5-10 seconds user gets frustrated and clicks on add new category again and then category is added twice.

I also could not reproduce that. I do see multiple requests in browser tools' Network tab, however they result in appropriate error messages instead of duplicate categories:

• A term with the name provided already exists with this parent. for categories.
• A term with the name provided already exists in this taxonomy. for tags.

Still, avoiding those multiple requests seems good :)

[SergeyBiryukov]

In 45683:

Accessibility: Taxonomy: When a new category or tag is being added, show a spinner and noop the button to avoid multiple requests.

Props andg, afercia, guddu1315, SergeyBiryukov.
Fixes #47607.