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

taiga-ui/projects/styles/markup/tui-skeleton.less

Lines 35 to 37 in a276f7c

	&_text:before {
	content: '\a0';
	}

---

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 ? 🤔