google / google/site-kit-wp

Extract reusable infra for seamless in progress state

Open
#6,713 1 comment 0 reactions 1 assignee View on GitHub

@aaemnnosttv is already working on this.

Since Mar 10, 2023.

P2 Type: Enhancement
Dominant language
JavaScript
Stars
1.4k
Forks
384
Avg merge
4d 14h
Merged PRs (30d)
77

Description

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.