Add placeholders to represent component states (story)

[ggeisler]

This is a story ticket for the general goal of adding placeholders to relevant components to represent the request state of component content.

• Add empty state message to workspace #1964 - Add empty state message to workspace
• Add empty state message to load window #1965 - Add empty state message to load window
• Add placeholders to load window #1966 - Add placeholders to load window
• Add placeholders to window thumbnail panel #1970 - Add placeholders to window thumbnail panel
• Add placeholders to window top bar #1971 - Add placeholders to window top bar
• Add placeholders to window canvas #1972 - Add placeholders to window canvas
• Add placeholders to window sidebar: Index #1973 - Add placeholders to window sidebar: Index
• TBD - Add placeholders to window sidebar: About (Metadata)
• TBD - Add placeholders to window sidebar: Search
• TBD - Add placeholders to window sidebar: Layers
• TBD - Add placeholders to window sidebar: Annotations
• TBD - Add placeholders to window sidebar: Collection

General context

There is some background on placeholders in this ticket from @aeschylus. Although @aeschylus mentions five possible states, from the UI perspective we think there are only three states for which we need to add new representations:

• Empty (initial): Convey to the user that there is no content to show for a component. This is distinct from a failure to retrieve the expected content for a component. We only need to worry about this for a few situations.
• Loading (pending): Convey to the user that the component content is in the process of being retrieved.
• Failed: Convey to the user that the component content could not be retrieved.

There are also potential states that can occur when we consider authentication scenarios, but we are intentionally setting those aside until we start work on authentication more generally.

There are a couple of different placeholder patterns we want to use, and we should be consistent in how we use them.

• Skeleton screens: These are gray rectangles used to represent content that hasn't yet loaded. There should be a slow animation to the gray rectangles. We already use the skeleton screen pattern in the load window. Not sure what we are using for that context, but here's an example plugin: https://buildo.github.io/react-placeholder/#reactplaceholder

• Loading message: In some contexts the skeleton screen approach is not visually feasible or ideal and we just want to show a ". . ." string, with a slow animation.

• Empty state and failure messages: In a couple of contexts we want to show a context-specific message about the current state. The mockups visually indicate the general styling of the message, but I'm not specifying the styling details in the tickets; it'll be easier to worry about exact typographical styling after we get our typography and color palette in place.