Add is-busy animation to save changes button in settings

[ilyasfoo]

Changes proposed in this Pull Request:

Closes #47305

This PR attempts to add loading animations to Settings screen by hitchhiking CSS classes provided by Gutenberg components. This is meant to be an acceptable temporary UX improvment while we work on settings UI refresh.

How to test the changes in this Pull Request:

Using the WooCommerce Testing Instructions Guide, include your detailed testing instructions:

1. Go to WooCommerce > Settings > General
2. Click on Save changes
3. Go to WooCommerce > Settings > Site visibility
4. Click on any toggle to enable save button
5. Click on Save changes
6. Observe busy loading animations
7. Go to WooCommerce > Settings > Shipping
8. Click on Add zone
9. Observe Save changes and Add shipping method button is slightly larger
10. Enter a zone name
11. Save to see the busy animation, but most likely it's too quick to be observed
12. Test other settings screens and ensure nothing around saving is broken

5xX4Vu.mp4

Changelog entry

• Automatically create a changelog entry from the details below.

Significance

• Patch
• Minor
• Major

Type

• Fix - Fixes an existing bug
• Add - Adds functionality
• Update - Update existing functionality
• Dev - Development related task
• Tweak - A minor adjustment to the codebase
• Performance - Address performance issues
• Enhancement - Improvement to existing functionality

Message

Comment

[github-actions]

Hi @adrianduffell, @rjchow, @woocommerce/ghidorah

Apart from reviewing the code changes, please make sure to review the testing instructions as well.

You can follow this guide to find out what good testing instructions should look like:
https://github.com/woocommerce/woocommerce/wiki/Writing-high-quality-testing-instructions

[github-actions]

Test using WordPress Playground

The changes in this pull request can be previewed and tested using a WordPress Playground instance.
WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Test this pull request with WordPress Playground.

Note that this URL is valid for 30 days from when this comment was last updated. You can update it by closing/reopening the PR or pushing a new commit.

[chihsuan]

7. Observe Save changes and Add shipping method button is slightly larger
8. Enter a zone name
9. Save to see the busy animation, but most likely it's too quick to be observed

I used network throttling to slow down the request but I was able to see the busy animation on the shipping zone save.

Screen.Recording.2024-05-21.at.10.55.29.mov

It seems that the is-busy class is added after the request is completed. However, there is another spinner that is shown when the request is in progress. If can find a way to make the spinner show before the request is completed that would be great but I think this is fine for now.

I also tested the other settings screens and everything seems to be working fine. 👍

[ilyasfoo]

It seems that the is-busy class is added after the request is completed. However, there is another spinner that is shown when the request is in progress. If can find a way to make the spinner show before the request is completed that would be great but I think this is fine for now.

Thanks for spotting that, @chihsuan! Great suggestion to use throttling to test. I've fixed the busy state in 4e580dd so it triggers on submit instead.

[adrianduffell]

Nice work, @ilyasfoo! LGTM -- I tested every settings screen without issue 👍 👍

However the animation didn't appear in Safari. It looks like this is due to the disabled attribute for some reason. I also confirmed the post editor only sets aria-disabled during the loading state. Perhaps we should do the same? 🤔

[ilyasfoo]

@adrianduffell Thanks! However, I was unable to reproduce the issue with disabled attribute (the buttons in settings page are not disabled on saving). It does seem like the screen is frozen while the request is loading, thus the animation is not visible before the screen goes off. You can confirm this by adding e.preventDefault(); below this line which will stop the page from going away to observe is-busy class set.

I found another bug where the animation is super janky and is resolved by disabling and reenabling style, but I believe it's a Safari specific bug:

4lDQRq.mp4

However, I wasn't able to find a quick fix and I wouldn't want to spend too much time on debugging it 😅

[adrianduffell]

It does seem like the screen is frozen while the request is loading, thus the animation is not visible before the screen goes off.

Thanks @ilyasfoo, I think this is what I'm seeing. Perhaps we can improve it in a follow-up but I'm happy to merge.