google / site-kit-wp

Site Kit is a one-stop solution for WordPress users to use everything Google has to offer to make them successful on the web.
https://sitekit.withgoogle.com
Apache License 2.0
1.23k stars 286 forks source link

Extract reusable infra for seamless in progress state #6713

Open aaemnnosttv opened 1 year ago

aaemnnosttv commented 1 year ago

Feature Description

In #6416 we replaced an inline progress bar with an added spinner on the CTA button like we've done in other places. As part of the final implementation, we reused an existing pattern established by our reset button which makes for a more seamless experience in the presentation of the in-progress state which is less straightforward than it seems due to multiple events/state that are not seamless.

The overall goal is to extract a reusable component to handle this consistently, both in the current usage and going forward.

The behavior we want to extract can be seen here https://github.com/google/site-kit-wp/blob/ebfa491bf16eb36d26c33418c32a1e6d81080b8c/assets/js/components/ResetButton.js#L62-L75

Essentially we want the in progress state to take effect right away whenever it starts, but because there can be a "gap" in the underlying values that calculate the state, it is preferable to keep it going for some period of time to "bridge" the gap and preserve the experience of a seamless single-action.

Its worth noting that the current implementation does not provide a seamless experience in all cases, as mentioned in the QA for 6416 under slow 3g network conditions.


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

Acceptance criteria

Implementation Brief

Test Coverage

QA Brief

Changelog entry

ivonac4 commented 8 months ago

@aaemnnosttv Are you still planning to work on this soon? If not, could you please unassign yourself so someone else can pick it up? Thank you!