feat(kit): Skeleton add new directive

projects/addon-doc/components/main/main.component.ts

@@ -11,7 +11,7 @@ import {TUI_DOC_ICONS} from '@taiga-ui/addon-doc/tokens';
 import {TuiSwipeService} from '@taiga-ui/cdk';
 import type {TuiBrightness} from '@taiga-ui/core';
 import {TuiModeDirective} from '@taiga-ui/core';
-import {distinctUntilChanged, map, share, startWith} from 'rxjs';
+import {distinctUntilChanged, map, shareReplay, startWith} from 'rxjs';
 
 @Component({
     selector: 'tui-doc-main',
@@ -38,7 +38,7 @@ export class TuiDocMainComponent {
         startWith(null),
         map(() => this.night.value),
         distinctUntilChanged(),
-        share(),
+        shareReplay({bufferSize: 1, refCount: true}),
     );
 
     protected readonly theme = inject(TuiThemeService);

projects/addon-doc/components/main/main.template.html

@@ -1,5 +1,5 @@
 <tui-theme-night *ngIf="theme.isDefaultTheme && night.useDefaultNightTheme && (night$ | async)" />
-<tui-root>
+<tui-root [attr.tuiTheme]="theme.isDefaultTheme && night.useDefaultNightTheme && (night$ | async) ? 'night' : null">
     <div class="tui-doc-page">
         <tui-doc-navigation class="tui-doc-navigation">
             <ng-content select="tuiDocNavigation" />

projects/demo/src/modules/app/app.routes.ts

@@ -614,6 +614,15 @@ export const ROUTES: Routes = [
             title: 'Sensitive',
         },
     },
+    {
+        path: 'directives/skeleton',
+        loadChildren: async () =>
+            (await import('../directives/skeleton/skeleton.module'))
+                .ExampleTuiSkeletonModule,
+        data: {
+            title: 'Skeleton',
+        },
+    },
     {
         path: 'components/input-inline',
         loadChildren: async () =>
@@ -1344,14 +1353,6 @@ export const ROUTES: Routes = [
             title: 'Shadows',
         },
     },
-    {
-        path: 'skeleton',
-        loadChildren: async () =>
-            (await import('../markup/skeleton/skeleton.module')).SkeletonModule,
-        data: {
-            title: 'Skeleton',
-        },
-    },
     {
         path: 'spaces',
         loadChildren: async () =>

projects/demo/src/modules/app/pages.ts

@@ -124,12 +124,6 @@ export const pages: TuiDocPages = [
                 keywords: 'верстка, markup, таблицы, tables',
                 route: '/tables',
             },
-            {
-                section: 'Foundations',
-                title: 'Skeleton',
-                keywords: 'верстка, markup, скелетон, loader, загрузка, skeleton',
-                route: '/skeleton',
-            },
             {
                 section: 'Foundations',
                 title: 'Form',
@@ -1381,6 +1375,13 @@ export const pages: TuiDocPages = [
                 keywords: 'sensitive, pixel, mask, пиксель, маска',
                 route: '/directives/sensitive',
             },
+            {
+                section: 'Tools',
+                title: 'Skeleton',
+                keywords:
+                    'верстка, markup, скелетон, loader, загрузка, skeleton, shimmer',
+                route: 'directives/skeleton',
+            },
         ],
     },
     {

projects/demo/src/modules/directives/skeleton/examples/1/index.html

@@ -0,0 +1,60 @@
+<label tuiLabel>
+    <input
+        tuiToggle
+        type="checkbox"
+        [(ngModel)]="skeleton"
+    />
+    Show skeleton
+</label>
+<p>
+    <tui-avatar
+        src="AI"
+        [tuiSkeleton]="skeleton"
+    ></tui-avatar>
+    <tui-avatar
+        src="https://avatars.githubusercontent.com/u/11832552"
+        [tuiSkeleton]="skeleton"
+    ></tui-avatar>
+    <tui-avatar
+        src="❤️"
+        [tuiSkeleton]="skeleton"
+    ></tui-avatar>
+    <tui-avatar
+        appearance="primary"
+        src="$"
+        [tuiSkeleton]="skeleton"
+    ></tui-avatar>
+</p>
+<section
+    tuiCardLarge
+    tuiSurface="flat"
+    [tuiSkeleton]="skeleton"
+>
+    <h2 tuiHeader>
+        <span tuiTitle>
+            Card
+            <span tuiSubtitle>Subtitle</span>
+        </span>
+    </h2>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna
+    aliqua.
+</section>
+<p>
+    <button
+        tuiButton
+        [tuiSkeleton]="skeleton"
+    >
+        Awesome
+    </button>
+    <button
+        appearance="secondary"
+        tuiButton
+        [tuiSkeleton]="skeleton"
+    >
+        Cool
+    </button>
+</p>
+<p>
+    <tui-chip [tuiSkeleton]="skeleton">Chip</tui-chip>
+    <tui-badge [tuiSkeleton]="skeleton">Dale</tui-badge>
+</p>

projects/demo/src/modules/directives/skeleton/examples/1/index.less

@@ -0,0 +1,6 @@
+p {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+    justify-content: center;
+}

projects/demo/src/modules/directives/skeleton/examples/1/index.ts

@@ -0,0 +1,14 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+
+@Component({
+    selector: 'tui-skeleton-example-1',
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    encapsulation,
+    changeDetection,
+})
+export class TuiSkeletonExample1 {
+    protected skeleton = false;
+}

projects/demo/src/modules/directives/skeleton/examples/2/index.html

@@ -0,0 +1,24 @@
+<label tuiLabel>
+    <input
+        tuiToggle
+        type="checkbox"
+        [(ngModel)]="skeleton"
+    />
+    Show skeleton
+</label>
+
+<p>
+    <span
+        [tuiSkeleton]="
+            skeleton
+                ? 'This text serves as the content behind the skeleton and depending on its length, the skeleton will adjust to fit it.'
+                : ''
+        "
+    >
+        {{ skeleton ? '' : 'This text will be replaced by a placeholder.' }}
+    </span>
+</p>
+
+<span [tuiSkeleton]="skeleton && 20">
+    {{ skeleton ? '' : 'This text will be replaced by a skeleton made of 20 random length non-breaking spaces.' }}
+</span>

projects/demo/src/modules/directives/skeleton/examples/2/index.ts

@@ -0,0 +1,13 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+
+@Component({
+    selector: 'tui-skeleton-example-2',
+    templateUrl: './index.html',
+    encapsulation,
+    changeDetection,
+})
+export class TuiSkeletonExample2 {
+    protected skeleton = false;
+}

projects/demo/src/modules/directives/skeleton/examples/import/import.md

@@ -0,0 +1,13 @@
+```ts
+import {NgModule} from '@angular/core';
+import {TuiSkeletonDirective} from '@taiga-ui/kit';
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiSkeletonDirective,
+  ],
+})
+export class MyModule {}
+```

projects/demo/src/modules/directives/skeleton/examples/import/insert.md

@@ -0,0 +1,3 @@
+```html
+<span [tuiSkeleton]="true">Loading..</span>
+```

projects/demo/src/modules/directives/skeleton/skeleton.component.ts

@@ -0,0 +1,12 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+
+@Component({
+    selector: 'skeleton',
+    templateUrl: './skeleton.template.html',
+    changeDetection,
+})
+export class ExampleTuiSkeletonComponent {
+    protected readonly import = import('./examples/import/import.md?raw');
+    protected readonly template = import('./examples/import/insert.md?raw');
+}

projects/demo/src/modules/directives/skeleton/skeleton.module.ts

@@ -0,0 +1,46 @@
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {TuiExamplePipe, TuiSetupComponent} from '@demo/utils';
+import {tuiGetDocModules} from '@taiga-ui/addon-doc';
+import {TuiNotificationModule} from '@taiga-ui/core';
+import {
+    TuiButtonModule,
+    TuiCardModule,
+    TuiChipModule,
+    TuiHeaderDirective,
+    TuiLabelDirective,
+    TuiSurfaceModule,
+    TuiTitleModule,
+    TuiToggleModule,
+} from '@taiga-ui/experimental';
+import {TuiAvatarComponent, TuiBadgeDirective, TuiSkeletonDirective} from '@taiga-ui/kit';
+
+import {TuiSkeletonExample1} from './examples/1';
+import {TuiSkeletonExample2} from './examples/2';
+import {ExampleTuiSkeletonComponent} from './skeleton.component';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        FormsModule,
+        tuiGetDocModules(ExampleTuiSkeletonComponent),
+        TuiSetupComponent,
+        TuiExamplePipe,
+        TuiLabelDirective,
+        TuiToggleModule,
+        TuiAvatarComponent,
+        TuiCardModule,
+        TuiTitleModule,
+        TuiSurfaceModule,
+        TuiHeaderDirective,
+        TuiButtonModule,
+        TuiChipModule,
+        TuiBadgeDirective,
+        TuiSkeletonDirective,
+        TuiNotificationModule,
+    ],
+    declarations: [ExampleTuiSkeletonComponent, TuiSkeletonExample1, TuiSkeletonExample2],
+    exports: [ExampleTuiSkeletonComponent],
+})
+export class ExampleTuiSkeletonModule {}

projects/demo/src/modules/directives/skeleton/skeleton.template.html

@@ -0,0 +1,40 @@
+<tui-doc-page
+    header="Skeleton"
+    package="KIT"
+    type="directives"
+>
+    <ng-template pageTab>
+        <tui-doc-example
+            id="components"
+            heading="Components"
+            [content]="1 | tuiExample: 'html'"
+        >
+            <tui-skeleton-example-1></tui-skeleton-example-1>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="text"
+            heading="Text"
+            [content]="2 | tuiExample: 'html'"
+            [description]="description"
+        >
+            <ng-template #description>
+                You can pass
+                <code>boolean</code>
+                to toggle skeleton for elements. For multi line text you can use
+                <code>string</code>
+                to serve as a placeholder underneath the text skeleton or a
+                <code>number</code>
+                to generate this many random sized words, while your actual text is loading
+            </ng-template>
+            <tui-skeleton-example-2></tui-skeleton-example-2>
+        </tui-doc-example>
+    </ng-template>
+
+    <ng-template pageTab="Setup">
+        <tui-setup
+            [import]="import"
+            [template]="template"
+        ></tui-setup>
+    </ng-template>
+</tui-doc-page>