The skeleton is a visual representation of the UI components that are loading. It is used to improve the perceived performance of the application.
CSS : Betclic/_base/_common/_css/_components/_skeleton.scss
Betclic/_base/_common/_css/_global/_images_initialization.scss
Betclic/_base/_common/_css/_icons/_icons_initialization.scss
Betclic/_payment/_common/_css/_global/_images_initialization.scss
Betclic/_payment/_common/_css/_icons/_icons_initialization.scss
The default skeleton is managed in the Angular scope. We only overload the color tokens to be able to manage light and dark mode.
On angular side, it is possible to override some CSS styles (like width, height, margin, padding, display, etc...). However, the background-color properties should absolutely not be changed. They are managed by the Tactics design system.
Below, there are two examples, one to represent the skeleton on a white background, and another on a more contrasting gray background. This allows you to see that the applied tokens work on the main component types (works in light and dark mode).
In good practice, it is enough to apply inline style only to the <ngx-skeleton-loader> component so as not to have the impression of nesting a skeleton within a skeleton.
The image skeleton is entirely managed by CSS. When the icon file is not yet loaded, a skeleton structure takes over.