feat(cc-clipboard): use skeleton prop in components that conditionally hide clipboard

[florian-sanders-cc]

Context

PR #1625 adds a skeleton prop to cc-clipboard. Previously, the component was designed to simply be hidden while loading.

With this new feature, we should adapt components that currently conditionally render cc-clipboard (hiding it during loading states) to use the skeleton prop instead, providing a better loading experience.

Components to adapt

cc-addon-credentials-content

Currently hides the clipboard when in skeleton state:

${!skeleton ? html`<cc-clipboard .value="${credential.value}"></cc-clipboard>` : ''}

Could become:

<cc-clipboard .value="${credential.value}" ?skeleton="${skeleton}"></cc-clipboard>

cc-addon-header

Currently only renders clipboard when loaded:

${this.state.type === 'loaded' || this.state.type === 'restarting' || this.state.type === 'rebuilding'
  ? html` <cc-clipboard value=${addonInfo.id}></cc-clipboard> `
  : ''}

Could use skeleton prop based on loading state.

cc-input-text

Uses clipboard with a clipboard boolean prop. May need to consider skeleton state propagation.

cc-code

Always shows the clipboard. May not need changes unless it gets a skeleton state in the future.

Related

• PR feat(cc-cellar-explorer): init component #1625 - feat(cc-cellar-explorer): init component (introduces skeleton prop on cc-clipboard)