Improve UX/UI when setting up Analytics from the Site Kit WP dashboard widget

[wpdarren]

Bug Description

On the WP Dashboard, when you click on the Set up Analytics (or Complete set up) CTA button on the Site Kit widget, the behaviour is not the same as other buttons. The button is still active and the loading spinner does not appear. It can take a couple of seconds for the set up to commence, so would be an enhancement to show the user that process has started, by making the button inactive and showing the spinner.

WP-dashboard.mp4

Steps to reproduce

1. Set up Site Kit without Analytics
2. Go to the WP Dashboard and view the Site Kit widget
3. Click on the Set up Analytics CTA button and observe behaviour.

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• The visual appearance of the "Set up Google Analytics" button on the WP dashboard widget should be consistent with other spinner buttons on Site Kit screens
  • Specifically, the styling of the loading/saving/in-progress state is inconsistent as mentioned below
  • E.g. the in-progress state on the SK dashboard
    

Implementation Brief

Context: The CircularProgress (spinner) is rendered by the SpinnerButton component. However, the issue arises because the stroke color of the spinner is not correctly applied to the svg.circle element within the WP Dashboard.

In assets/sass/components/wp-dashboard/_googlesitekit-wp-dashboard.scss:

• Add the following styles by wrapping it in a .mdc-button { ... } selector:
  

  site-kit-wp/assets/sass/components/global/_googlesitekit-button-icon.scss

  Lines 36 to 45 in 8c37fe7

  	&.googlesitekit-button-icon--spinner__running {
  	.mdc-button__label {
  	margin-right: 8px;
  	}
  	svg circle {
  	stroke: $c-white;
  	}
  	}

Test Coverage

• No new tests are required for this change.

QA Brief

• Follow the steps form description, verify that spinner is showing properly like in the picture in AC

Changelog entry

• Show the loading spinner in the CTA when setting up Analytics from the Site Kit WP dashboard widget.

[aaemnnosttv]

Thanks @wpdarren – it looks like the spinner is present, just not particularly visible.

Thanks for raising 👍

[eugene-manuilov]

IB ✔️

[wpdarren]

QA Update: ✅

Verified:

• The visual appearance of the "Set up Google Analytics" button on the WP dashboard widget is now consistent with other spinner buttons on Site Kit screens.
• Tested on desktop and smaller viewports.

wp.mp4