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.

[felixarntz]

@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)

[asvinb]

@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.