cc-img: update the behaviour of `skeleton`

[hsablonniere]

Right now, <cc-img> is used for images where we don't know the src URL yet, like avatars or app logos. While we load the data, we want a skeleton blinking animation for the image until we know the URL of the image (via API call) and the image is loaded.

In the rest of the code base we have simple <img> where we almost always know the src URL and we don't reuse the CSS and some logic of <cc-img>.

• [ ] We should always use <cc-img> (therefore replace current <img> use)

By doing so, we still have some cases (like in TCP redirs) where the current skeleton behaviour is not what we need. In those cases, we know the URL, but we still want to display the image in a skeleton state while we determine if the current known URL is the right one.

• [ ] We should update the behaviour of the skeleton attr of <cc-img>

/!\ This is a BREAKING CHANGE.

• We want to have a fixed skeleton behaviour like anywhere else in the codebase, without the magic "remove skeleton once image is loaded".
• We want to add a new attribute, something like skeleton-until-loaded that will have the current behaviour of skeleton.

Examples:

<cc-img src="https://example.com/image.jpg" skeleton>

• This will always be displayed in a skeleton state.
• The image will be loaded but hidden until skeleton is removed by component user.
• If loading fails, the potential error will be hidden until skeleton is removed by component user.

<cc-img src="https://example.com/image.jpg" skeleton-until-loaded>

• This will be displayed in a skeleton until the image is loaded.
• Once the image is loaded with success, the image is displayed.
• Once the image is loaded with error, the text replacement is used.

NOTE: We still need to decide if skeleton-until-loaded has to be automatically removed by the component (which is often a bad idea) or if it should just be an internal state change.

[urcadox]

NOTE: We still need to decide if skeleton-until-loaded has to be automatically removed by the component (which is often a bad idea) or if it should just be an internal state change.

IMO, an internal state is better. The naming of the attribute clearly means that its value should not matter once the image is loaded.