It's tricky to add a loading state to the button as it's not a React component. How about we disable it once it's clicked? I think it's reasonable as it is a classic form submission with a page refresh.

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.

It's tricky to add a loading state to the button as it's not a React component. How about we disable it once it's clicked? I think it's reasonable as it is a classic form submission with a page refresh.

@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 <span class="spinner is-active"></span> and a few overriding styles: float: none; margin: -4px 8px 0 .

Mockup of spinner

Spinner next to the update button

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.

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

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.

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.

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?

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.

@adrianduffell I've attempted to use the is-busy animation: #47626. It's hack-ish since I hitchhike on Gutenberg's CSS without using its components. It has a little bit of risk of breaking in case of Gutenberg component changes, but I think it's not a too big of a risk.