WordPress.org

Make WordPress Core

Opened 8 months ago

Closed 7 months ago

#47607 closed enhancement (fixed)

Add a loader when adding a new category

Reported by: guddu1315 Owned by: andg
Milestone: 5.3 Priority: normal
Severity: normal Version:
Component: Taxonomy Keywords: has-patch has-screenshots
Focuses: ui, accessibility, administration Cc:

Description

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,

Attachments (2)

slow cat.gif (270.4 KB) - added by afercia 8 months ago.
47607.diff (1.7 KB) - added by andg 8 months ago.
Add visual feedback when submitting the form that adds a new term.

Download all attachments as: .zip

Change History (12)

#1 @birgire
8 months ago

  • Focuses administration added
  • Version 5.2.2 deleted

Thanks for the ticket @guddu1315

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

Related is #42937 regarding a success notice.

#2 @guddu1315
8 months ago

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.

#3 @afercia
8 months ago

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.

Last edited 8 months ago by afercia (previous) (diff)

@afercia
8 months ago

#4 @guddu1315
8 months ago

@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.

#5 follow-up: @andg
8 months ago

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:

https://i.imgur.com/6zVsQdv.png

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
8 months ago

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

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


7 months ago

#7 @afercia
7 months ago

  • Keywords has-patch has-screenshots added
  • Milestone changed from Awaiting Review to 5.3
  • Owner set to andg
  • Status changed from new to assigned

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.

#8 @andg
7 months ago

Sure thing, @afercia

#9 in reply to: ↑ 5 @SergeyBiryukov
7 months ago

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 :)

#10 @SergeyBiryukov
7 months ago

  • Resolution set to fixed
  • Status changed from assigned to closed

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.

Note: See TracTickets for help on using tickets.