CleverCloud / clever-components

Collection of Web Components by Clever Cloud
https://www.clever-cloud.com/doc/clever-components/
Apache License 2.0
220 stars 19 forks source link

cc-img: update the behaviour of `skeleton` #96

Open hsablonniere opened 4 years ago

hsablonniere commented 4 years ago

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>.

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.

/!\ This is a BREAKING CHANGE.

Examples:

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

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 commented 4 years ago

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.