site-kit-wp: Show spinner when saving, unsaving, or dismissing an idea in Idea Hub widget

There can be a delay when clicking one of the Idea Hub widget icon buttons to save, unsave, or dismiss an idea. This delay is expected due to sending the API request, however we should cater for this in the UI by showing a loading indicator.

See https://app.asana.com/0/1200491083500938/1200758448284506/f

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

Acceptance criteria

When clicking on one of the icon buttons to “Save”, “Dismiss” (both in the “New” tab) or “Unsave” (in the “Saved” tab) an idea, the respective icon should be replaced by a loading spinner until the action has been completed.
Whenever that spinner is displayed, the “overlay” with the idea interaction buttons for that respective idea should be “permanently” displayed as long as the spinner is there / as long as the process/API request takes.
- In other words, when hovering/focusing away from the idea while one of the interactions is in progress, the overlay shouldn’t disappear like it usually does when there’s no action in progress. This can be accomplished for example by conditionally applying an extra CSS class on the overlay wrapper.

Additional Acceptance criteria

See https://github.com/google/site-kit-wp/issues/3907#issuecomment-989000016.

All 4 actions should have the loading spinner.
All 4 actions should have a brief success state where they show a brief message that remains there for a brief period before the idea disappears (from the current tab) - basically this should work the same way it already does for creating a draft.
The success messages should be:
- Idea saved
- Idea dismissed
- Idea removed from saved
- Draft created (already exists)

Implementation Brief

Inside assets/js/modules/idea-hub/datastore/constants.js:
- Add the following new activity constants:
- IDEA_HUB_ACTIVITY_IS_DELETING
- IDEA_HUB_ACTIVITY_IS_PINNING
- IDEA_HUB_ACTIVITY_IS_UNPINNING
- Remove IDEA_HUB_ACTIVITY_IS_PROCESSING
Inside assets/js/modules/idea-hub/components/dashboard/DashboardIdeasWidget/Idea.js
- Import the new constants, and remove the import of IDEA_HUB_ACTIVITY_IS_PROCESSING
- Inside the handleDelete, handlePin and handleUnpin callbacks, replace IDEA_HUB_ACTIVITY_IS_PROCESSING with the corresponding activity constant, so IDEA_HUB_ACTIVITY_IS_DELETING inside handleDelete etc.
- Add the .googlesitekit-idea-hub__idea--is-processing class name to the .googlesitekit-idea-hub__idea--single wrapper if there is an activity in progress.
- For each of the IDEA_HUB_BUTTON_DELETE, IDEA_HUB_BUTTON_PIN and IDEA_HUB_BUTTON_UNPIN buttons, pass CircularProgress with size set to 24 as prop, as the value for the icon prop if the corresponding activity constant is truthy. So if IDEA_HUB_ACTIVITY_IS_DELETING is truthy, pass CircularProgress; if not, pass the appropriate existing icon.
- Replace the remaining logic that uses IDEA_HUB_ACTIVITY_IS_PROCESSING to set the disabled attributes on the create and view buttons with a check to see if activity is truthy. In other words, disable the buttons if there is an activity in progress.
Using assets/sass/components/idea-hub/_googlesitekit-idea-hub-dashboard-ideas-widget.scss,
- Update .googlesitekit-idea-hub__idea--actions svg to exlude the .MuiCircularProgress-svg so that we are not setting any styles on the CircularProgress svg.
- Add styles for .googlesitekit-idea-hub__idea--is-processing which are similar to .googlesitekit-idea-hub__idea--single:hover and ..googlesitekit-idea-hub__idea--single:focus where the icons are visible except the background color is white.

Test Coverage

No new tests should be required.

Visual Regression Changes

VRT images dealing with the DashboardIdeaWidget UI might need updating.

QA Brief

Setup the Idea Hub module.
Upon interacting with an idea, i.e pinning, unpinning, deleting or creating an idea, there should be a loading icon when activity is in progress.

Changelog entry

Update the Idea Hub widget to display a spinner when saving, unsaving or dismissing an idea.

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 27 (11 by maintainers)

Most upvoted comments

@asvinb @aaemnnosttv After discussing this with @marrrmarrr, let’s go with my suggestion 1. in https://github.com/google/site-kit-wp/issues/3907#issuecomment-987039245:

All 4 actions should have the loading spinner (as already the case in the PR).
All 4 actions should have a brief success state where they show a brief message that remains there for a brief period before the idea disappears (from the current tab) - basically this should work the same way it already does for creating a draft.
The success messages should be:
- Idea saved
- Idea dismissed
- Idea removed from saved
- Draft created (already exists)

felixarntz on Dec 8, 2021

@felixarntz @aaemnnosttv Just FYI, we have #3902 which relates to what we are trying to do. Maybe we can create a follow up issue which is blocked by #3902 or look into Material’s snack bar.

asvinb on Dec 7, 2021

@asvinb Great question. I definitely agree that we should make the user experience consistent between all 4 actions, and I think the spinner should be on all 4 of them. However, there is also the part of briefly showing a “success” message on the idea which we currently have for creating drafts but not the other 4.

With your current PR #4444 the experience is as follows:

All 4 actions (pin, unpin, dismiss, create draft) have a consistent loading spinner. IMO that’s good to go.
Creating a draft shows a “Draft created” message for a few seconds before the idea moves to the respective other tab, but the other 3 actions (pin, unpin, dismiss) don’t have that behavior. There’s no success message and the ideas immediately disappear. Here we have to make an improvement.

I think we should do one of the following to make the experience consistent:

Either briefly show a success message on all 4 actions (e.g. “Idea saved”, “Idea dismissed”, “Idea removed from saved”), the same way it already is for creating a draft.
Or remove the success message from creating a draft.

I’d vote for 1., mainly because the success indicator also allows the idea to not immediately “disappear”. @marrrmarrr @samitron7 What do you think?

felixarntz on Dec 6, 2021

@johnPhillips Actually we can solve the issue about the hover state by adding another class name to the container having googlesitekit-idea-hub__idea--single as class, for e.g googlesitekit-idea-hub__idea--is-processing when activity is not null, and in the corresponding styles, we make sure the buttons are displayed irrespective of breakpoints and hover state. So when googlesitekit-idea-hub__idea--is-processing is present, the idea has the same styles as upon hover. Let me know what you think.

asvinb on Aug 24, 2021