🚀 - New `Skeleton` API

[nsbarsukov]

Current implementation

It global class .tui-skeleton with modifiers.

Learn more: https://taiga-ui.dev/skeleton

Problems:

• Developer should duplicate enabling of the main class (and all other modifications) for EVERY element:

  <div 
  [class.tui-skeleton_light]="lightMode"
  [class.tui-skeleton]="isSkeletonVisible"
  ></div>

• No intermediate state (it is especially important for css animations – smooth appearing content after disabling of skeleton).

New proposed API

Introduce new TuiSkeletonDirective. It uses tuiWithStyles inside to add :before/:after pseudo-elements. It uses power of Dependency Injection.

Case 1. Configure all nested skeletons from the root element

<div [tuiSkeleton]="enabled">
  <img tuiSkeleton src="..." />

  <form>
    <tui-toggle tuiSkeleton></tui-toggle>

    <tui-input tuiSkeleton></tui-input>
  </form>

</div>

All TuiSkeletonDirective injects itself inside

@Optional()
@SkipSelf()
private readonly parentSkeleton: TuiSkeletonDirective,

And default value of its state (enabled/disabled) is equal to computed input-value of its nearest parent. But develop can overwrite it and provide explicit input-prop to any nested skeleton.

Case 2. Replace legacy .tui-skeleton_light class with tuiMode-directive Before:

<div 
    [class.tui-skeleton_light]="lightMode"
    [class.tui-skeleton]="enabled"
></div>

After:

<div 
    tuiMode="onLight"
    [tuiSkeleton]="enabled"
></div>

Case 3. Is .tui-skeleton_text actually required ? Investigate should developer always mark all text-containers (a.k.a previous class .tui-skeleton_text). Or we could do it automatically ? For example, investigate if :after-element could always be non-breaking space https://github.com/taiga-family/taiga-ui/blob/a276f7c9dd0417c40a24e2b2b97dfb24a908ff51/projects/styles/markup/tui-skeleton.less#L35-L37

---

New animation for switching between skeleton and animation

Cross-fade animation. Smoothly change of opacity on swithching. Content dissappers / appears smoothly. Skeleton appears/dissappers smoothly.

[nsbarsukov]

@waterplea also proposed solution with contrast(0).

Example with multi-line text:

background: red;
border-radius: 1rem;
box-decoration-break: clone;
filter: contrast(0) brightness(0);
opacity: 0.1;

TODO: Investigate if we could use it. How we can configure the background color of the skeleton ? 🤔