Introduce pattern to notify on resource loading (to support skeleton state designs)

[jcfranco]

Description

calcite-avatar, calcite-tip and other resource loading components, lack a way to notify developers that the component has fully loaded and ready to be displayed.

Acceptance Criteria

An events or some other mechanism to allow consumers to know when resources have loaded and the component can be displayed.

Relevant Info

Ideas

• emit a general event for all components that captures all resources have been loaded
• refactor components to leverage async lifecycle hooks to defer readiness
• tweak Stencil config to emit events for all lifecycle hooks (less desired option as it could still not cover the original use case)

Related issue: #1088
Blocked issues: #7520

Which Component

• calcite-avatar (loads image)
• calcite-tip (loads image)
• For consideration, any component that loads a resource

Example Use Case

A wrapping component with skeleton state that is waiting for calcite-avatar's image to load before displaying it.

[geospatialem]

There is a similar component available as part of Hub, we should consider some discussions with team members as we move forward with the effort. refer to #1088 (comment)

Virtualization effort for #7384 is dependent on the skeleton state.

[jcfranco]

Automated testing would also benefit from this (e.g., icon done fetching icon path data).

[dmartini-zrh]

Example of use case from Scene Viewer:
Our welcome screen is currently displayed as soon as recent/featured scene details are loaded.
This results in a significant delay / diminished value: users figure out where to start before it appears.

So, we'd like to:

1. display a skeleton state
2. load all resources

Draft:

Please note:

• scene cards aren't Calcite-based (yet)
• animated skeleton items would be nice to have

Our draft in SVG here

<style><![CDATA[
#sk-loader5_to {animation: sk-loader5_to__to 1000ms linear infinite normal forwards}@keyframes sk-loader5_to__to { 0% {transform: translate(-242.114325px,-77.468px)} 100% {transform: translate(144.885675px,-77.468px)}}
]]></style>
<defs><linearGradient id="sk-loader5-fill" x1="96.954" y1="246" x2="-0.104" y2="245.858" spreadMethod="pad" gradientUnits="userSpaceOnUse" gradientTransform="translate(0 0)"><stop id="sk-loader5-fill-0" offset="0%" stop-color="rgba(255,255,255,0)"/><stop id="sk-loader5-fill-1" offset="51.5%" stop-color="rgba(255,255,255,0.87)"/><stop id="sk-loader5-fill-2" offset="100%" stop-color="rgba(255,255,255,0)"/></linearGradient></defs><g clip-path="url(#sk-loader6)"><g><rect width="179" height="131" rx="0" ry="0" fill="#eaeaea"/><g id="sk-loader5_to" transform="translate(-242.114325,-77.468)"><rect width="115" height="371" rx="0" ry="0" transform="rotate(30.000012) translate(133.5,-80)" fill="url(#sk-loader5-fill)"/></g></g><clipPath id="sk-loader6"><rect width="179" height="131" rx="0" ry="0" fill="#fff"/></clipPath></g></svg>