Spinner Component: Added design documentation and image

[cburton4]

Description

Added a description of the component, design documentation, and an image.

[benhuberman]

A few suggestions on this one:

Before:

Spinners are used to notify users that their action is being processed.

After:

Spinners notify users that their action is being processed.

Before:

Notify users that their request has been received and the action will soon complete.

After:

Signal to users that the processing of their request is underway and will soon complete.

Before:

The spinner component should be avoided to load a page or data.

After:

Not appear when pages or data are loading.

Let me know if you have any concerns with these suggested edits -- I mostly wanted to avoid the passive voice as much as possible, and to make sure the second bullet point conforms to the "Should" construction that prepares it.

[cburton4]

@benhuberman

No concerns, these tweaks look great. I have updated accordingly. Thanks for the review!

[youknowriad]

Can you clarify this Not appear when pages or data are loading.? Isn't this the whole purpose of the spinner component (data being loaded)?

[cburton4]

Yep this is a good question. The thinking here is that future forward it's ideal to have different kinds of feedback or progress indicators, each with their own purpose. Since the spinner is the only progress indicator we have I jumped the gun with this guidance.

Future component descriptions might look something like this:

Spinner: An action is being processed with an unspecified amount of wait time. They should be used when progress isn’t detectable, or if it’s not necessary to indicate how long an activity will take.

Progress bar: Used to indicate to users that a page is loading or an upload is processing. It shows how much of the task has been completed and how much is left.

In the meantime I can remove Not appear when pages or data are loading until we hopefully add a Progress bar component.