Create Button with Spinner component

Feature Description

Implement the Button with Spinner component.

The Button with Spinner component will look like a regular button, but with an activity spinner embedded within it.

• Design Doc: https://docs.google.com/document/d/1DeWo38lcV7lvLFfcmt-mQ0iaxzB4qfiPArs_yZzYkIM/edit#heading=h.vpcddsd4qdav
• Figma: https://www.figma.com/file/vMaCWwr6lpk4PrJWb7jIpz/GA4-Banner-Input?node-id=1082%3A1550

---

Acceptance criteria

• A component should be created which implements a button with an embedded spinner, as per the design.
  • Note: the design doc specifies creating a new component. If possible, updating the existing Button component to incude a loading prop that rendered the spinner would be a nice, reusable API. But this should only be done if straightforward in practice.
• The visibility of the spinner should be controllable (via a prop).
• The component should be present in Storybook.

Implementation Brief

• Create a new SpinnerButton component in the assets/js/components folder. This component should the following:
  • Render the regular button component using the Spinner component in the trailingIcon property.
  • Proxy all props passed to the component down to the Button element.
  • Define a new state variable processing with false as the default value.
  • Define a new callback onClick that sets the processing state to true, calls the onClick function passed via props, and resets the processing value back to false after the passed onClick callback is executed.
    • Use the async/await approach to call the passed onClick callback to make sure that we reset the processing state only when the callback has finished working.
  • Set the processing variable to isSaving property of the Spinner element.
• Add a corresponding storybook story for the new component.

Test Coverage

• N/A

QA Brief

• Go to this storybook story: https://google.github.io/site-kit-wp/storybook/develop/?path=/story/components-spinnerbutton--default-button
• Verify that the spinner button shows the spinner for 5 seconds when you click on it.

Changelog entry

• Add a “button with spinner” component.

[techanvil]

Hi @eugene-manuilov, that sounds fine to me and it would be compatible with the specced out usage of it in https://github.com/google/site-kit-wp/issues/5277, so I am happy to give this IB a :white_check_mark:.

I guess if we do find a need for a more declarative API then we can always add a loading prop in future which could override the internal processing state when set (or something along those lines). But we can cross that bridge if/when we come to it.

IB ✅

[tofumatt]

I think that last phrasing is probably fine. My preference is to integrate it into the existing Button component because this would be a feature that would be useful for many buttons that cause a blocking/loading state. But if—in practice—that complicates the component too much then I’m fine if we don’t.