-
Notifications
You must be signed in to change notification settings - Fork 10.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add loading state to save button #47305
Comments
The behaviour of the Save button is a UX inherent to the all Settings screens. I ran into this type or issue when revamping Shipping Settings and creating a departure just for Site Visibility will create a disconnect between the rest of the settings pages. My opinion is to leave this as is. |
@moon0326 Good points, yeah it looks like the disabled pattern is consistent with classic WP UI. How about we also add the spinner next to it like as done in the products editor? I was able to hack it in the mockup below with Mockup of spinnersite.visibility.spinner.movSpinner next to the update buttonupdate.button.spinner.mov |
@psealock That's a good insight, thanks! Rather than leave as-is, how about we bring this to all of the settings to try to improve the experience across the board? If we use the disabled + spinner pattern above, it would look like: |
@adrianduffell I like it! The change should be pretty straightforward. I'm wondering if we should check with Veronica and proton team as well? |
Good idea, @verofasulo and @woocommerce/proton what are your thoughts on this spinner concept for the settings screen? I've aimed to find a classic WordPress component for this as it's tricky to place a modern loading state here. WordPress' own classic settings screens don't have a loading state so I used the spinner found on the classic product / post editor. |
I really like it. I think it would improve the user's perceived experience while saving the settings. Question: Do you only plan to apply it for the site visibility tab or the whole settings section? |
@naman03malhotra The plan would be for the whole settings section -- whenever a tab has a "Save changes" button. |
Sounds good @adrianduffell, go for it! Though, maybe we can a quick input from the design as well if they have something to add here cc @j111q |
I think it would be worth revisiting whether we can apply a modern loading state like found in the gutenberg components. I believe this is done there by applying an .is-busy class and using a CSS animation. modern.loading.state.mov |
@adrianduffell I've attempted to use the |
The Site Visibility save button takes a few seconds to process but doesn't give an indication it's been pressed. Is it possible to add a loading state animation on it to let users know it's processing?
site.visibility.save.mov
The text was updated successfully, but these errors were encountered: