feat: add skeleton for crypto page

apps/taiga-lumbermill/src/dashboards/crypto/components/pools/pools.component.html

@@ -7,17 +7,22 @@
         <h2
             tuiTitle
             [style.text-align]="'center'"
+            [tuiSkeleton]="!tokens()"
         >
             Pools
         </h2>
     </header>
     <tui-input
         tuiTextfieldIconLeft="@tui.search"
+        [tuiSkeleton]="!tokens()"
         [(ngModel)]="search"
     >
         Search
     </tui-input>
-    <div class="list-pools">
+    <div
+        class="list-pools"
+        [tuiSkeleton]="!tokens()"
+    >
         <tui-scrollbar>
             <cdk-virtual-scroll-viewport
                 #viewport

apps/taiga-lumbermill/src/dashboards/crypto/components/pools/pools.component.ts

@@ -16,7 +16,7 @@ import {toSignal} from '@angular/core/rxjs-interop';
 import {FormsModule} from '@angular/forms';
 import {TuiTable} from '@taiga-ui/addon-table';
 import {TuiAppearance, TuiScrollable, TuiScrollbar, TuiTitle} from '@taiga-ui/core';
-import {TuiAvatar, TuiAvatarStack} from '@taiga-ui/kit';
+import {TuiAvatar, TuiAvatarStack, TuiSkeleton} from '@taiga-ui/kit';
 import {TuiCardLarge, TuiCell, TuiHeader} from '@taiga-ui/layout';
 import {TuiInputModule} from '@taiga-ui/legacy';
 
@@ -50,6 +50,7 @@ export interface TableData {
         TuiInputModule,
         TuiScrollable,
         TuiScrollbar,
+        TuiSkeleton,
         TuiTable,
         TuiTitle,
     ],

apps/taiga-lumbermill/src/dashboards/crypto/components/prices/price-chart/price-chart.component.html

@@ -2,6 +2,7 @@
     class="axes"
     [axisYLabels]="[(minPrice() | tuiAmount | async) || '', (maxPrice() | tuiAmount | async) || '']"
     [horizontalLines]="4"
+    [tuiSkeleton]="!history()"
     [verticalLines]="4"
 >
     <tui-line-chart

apps/taiga-lumbermill/src/dashboards/crypto/components/prices/price-chart/price-chart.component.ts

@@ -18,6 +18,7 @@ import {TuiAmountPipe} from '@taiga-ui/addon-commerce';
 import type {TuiStringHandler} from '@taiga-ui/cdk';
 import type {TuiPoint} from '@taiga-ui/core';
 import {TuiAppearance, TuiButton, TuiHint, TuiSurface} from '@taiga-ui/core';
+import {TuiSkeleton} from '@taiga-ui/kit';
 import {combineLatest, switchMap} from 'rxjs';
 
 import type {HistoryData} from '../../../../../services/crypto.service';
@@ -38,6 +39,7 @@ import {INTERVALS} from './price-chart.constant';
         TuiLineChart,
         TuiLineDaysChart,
         TuiLineDaysChartHint,
+        TuiSkeleton,
         TuiSurface,
     ],
     templateUrl: './price-chart.component.html',

apps/taiga-lumbermill/src/dashboards/crypto/components/prices/price-list/price-list.component.html

@@ -1,9 +1,10 @@
 @let data = tokens$ | async;
-@if (data) {
-    <div
-        tuiCardLarge
-        class="price-list"
-    >
+<div
+    tuiCardLarge
+    class="price-list"
+    [tuiSkeleton]="!data"
+>
+    @if (data) {
         <div class="list">
             @for (tokens of data.slice(0, showTokens); track $index) {
                 @if (token === '' || tokens.id === token) {
@@ -44,5 +45,5 @@
                 Add Token
             </button>
         }
-    </div>
-}
+    }
+</div>

apps/taiga-lumbermill/src/dashboards/crypto/components/prices/price-list/price-list.component.less

@@ -17,6 +17,7 @@
 
 .price-list {
     padding: 0;
+    min-height: 14.125rem;
 }
 
 .button-add {

apps/taiga-lumbermill/src/dashboards/crypto/components/prices/price-list/price-list.component.ts

@@ -8,7 +8,7 @@ import {
     Output,
 } from '@angular/core';
 import {TuiAppearance, TuiButton, TuiTitle} from '@taiga-ui/core';
-import {TuiAvatar} from '@taiga-ui/kit';
+import {TuiAvatar, TuiSkeleton} from '@taiga-ui/kit';
 import {TuiCardLarge, TuiCell, TuiHeader} from '@taiga-ui/layout';
 
 import {CryptoService} from '../../../../../services/crypto.service';
@@ -26,6 +26,7 @@ import {CryptoService} from '../../../../../services/crypto.service';
         TuiCardLarge,
         TuiCell,
         TuiHeader,
+        TuiSkeleton,
         TuiTitle,
     ],
     templateUrl: './price-list.component.html',

apps/taiga-lumbermill/src/dashboards/crypto/components/prices/prices.component.html

@@ -1,3 +1,4 @@
+@let data = tokens$ | async;
 <div
     tuiAppearance="whiteblock"
     tuiCardLarge="normal"
@@ -7,6 +8,7 @@
         <h2
             tuiTitle
             [style.text-align]="'center'"
+            [tuiSkeleton]="!data"
         >
             Cryptocurrency Prices
         </h2>

apps/taiga-lumbermill/src/dashboards/crypto/components/prices/prices.component.ts

@@ -1,6 +1,7 @@
 import {CommonModule} from '@angular/common';
 import {ChangeDetectionStrategy, Component, inject} from '@angular/core';
 import {TuiAppearance, TuiTitle} from '@taiga-ui/core';
+import {TuiSkeleton} from '@taiga-ui/kit';
 import {TuiCardLarge, TuiHeader} from '@taiga-ui/layout';
 
 import {CryptoService} from '../../../../services/crypto.service';
@@ -17,12 +18,14 @@ import {PriceListComponent} from './price-list/price-list.component';
         TuiAppearance,
         TuiCardLarge,
         TuiHeader,
+        TuiSkeleton,
         TuiTitle,
     ],
     templateUrl: './prices.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PricesComponent {
     protected pricesService = inject(CryptoService);
+    protected tokens$ = this.pricesService.getTokens();
     protected token = '';
 }

apps/taiga-lumbermill/src/dashboards/crypto/components/staking/staking.component.html

@@ -1,113 +1,123 @@
 @let data = tokens();
-@if (data) {
-    <div
-        tuiAppearance="whiteblock"
-        tuiCardLarge="normal"
-        [style.height]="'100%'"
+<div
+    tuiAppearance="whiteblock"
+    tuiCardLarge="normal"
+    [style.height]="'100%'"
+    [style.min-height]="'41.625rem'"
+>
+    <header
+        tuiHeader
+        class="info"
     >
-        <header
-            tuiHeader
-            class="info"
+        <tui-avatar
+            size="l"
+            [src]="'btc' | coinIcon"
+            [tuiSkeleton]="!data"
+        />
+        <h2
+            tuiTitle
+            [style.text-align]="'center'"
+            [tuiSkeleton]="!data ? 'Staking Bitcoin' : ''"
+        >
+            Staking Bitcoin
+        </h2>
+        <div
+            tuiSubtitle
+            [style.text-align]="'center'"
+            [tuiSkeleton]="!data"
         >
-            <tui-avatar
-                size="l"
-                [src]="'btc' | coinIcon"
-            />
-            <h2
-                tuiTitle
-                [style.text-align]="'center'"
-            >
-                Staking Bitcoin
-            </h2>
-            <div
-                tuiSubtitle
-                [style.text-align]="'center'"
-            >
-                Earn a share of the protocol`s fees
-                <br />
-                while staking BITCOIN
-            </div>
-        </header>
-        <div class="group-buttons">
-            <button
-                appearance="accent"
-                tuiButton
-                (click)="[(stake = true), showDialog(template)]"
-            >
-                Stake
-            </button>
-            <button
-                appearance="whiteblock"
-                tuiButton
-                (click)="[(stake = false), showDialog(template)]"
-            >
-                Unstake
-            </button>
+            Earn a share of the protocol`s fees
+            <br />
+            while staking BITCOIN
         </div>
-        <div class="position">
-            <div class="position-title">My position</div>
-            <hr />
-            <div class="block-position">
-                <div class="tui-space_top-0 tui-space_bottom-0 bold">{{ amount() }} BTC</div>
-                <div>${{ price() | number: '1.2-2' }}</div>
-            </div>
-            <hr />
-            <div class="block-position">
-                <div>Rewards</div>
-                <div class="tui-space_top-0 tui-space_bottom-0 bold">0 BTC</div>
-                <div>$0</div>
-            </div>
+    </header>
+    <div class="group-buttons">
+        <button
+            appearance="accent"
+            tuiButton
+            [tuiSkeleton]="!data"
+            (click)="[(stake = true), showDialog(template)]"
+        >
+            Stake
+        </button>
+        <button
+            appearance="whiteblock"
+            tuiButton
+            [tuiSkeleton]="!data"
+            (click)="[(stake = false), showDialog(template)]"
+        >
+            Unstake
+        </button>
+    </div>
+    <div
+        class="position"
+        [tuiSkeleton]="!data"
+    >
+        <div class="position-title">My position</div>
+        <hr />
+        <div class="block-position">
+            <div class="tui-space_top-0 tui-space_bottom-0 bold">{{ amount() }} BTC</div>
+            <div>${{ price() | number: '1.2-2' }}</div>
         </div>
-        <div class="position">
-            <div class="position-title">Overview</div>
-            <hr />
-            <div class="block-position">
-                <div class="tui-space_top-0 tui-space_bottom-0">Total stacked</div>
-                <div class="bold">1.5M BTC</div>
-            </div>
-            <hr />
-            <div class="block-position">
-                <div class="tui-space_top-0 tui-space_bottom-0">APR</div>
-                <div class="bold">5%</div>
-            </div>
+        <hr />
+        <div class="block-position">
+            <div>Rewards</div>
+            <div class="tui-space_top-0 tui-space_bottom-0 bold">0 BTC</div>
+            <div>$0</div>
         </div>
     </div>
-
-    <ng-template
-        #template
-        let-observer
+    <div
+        class="position"
+        [tuiSkeleton]="!data"
     >
-        <header tuiHeader>
-            <h2 tuiTitle>{{ stake ? 'Staking' : 'Unstaking' }} Bitcoin</h2>
-        </header>
-        <p>Available for {{ stake ? 'stake' : 'unstake' }}: {{ stake ? available - amount() : amount() }} BTC</p>
-        @if (stake) {
-            <tui-input-number
-                tuiAutoFocus
-                [max]="available - amount()"
-                [min]="0"
-                [(ngModel)]="inputStake"
-            >
-                Amount BTC
-            </tui-input-number>
-        } @else {
-            <tui-input-number
-                tuiAutoFocus
-                [max]="amount()"
-                [min]="0"
-                [(ngModel)]="inputUnstake"
-            >
-                Amount BTC
-            </tui-input-number>
-        }
-        <p>
-            <button
-                tuiButton
-                type="submit"
-                (click)="[observer.complete(), addAmount(stake ? inputStake : -inputUnstake), (inputStake = 0)]"
-            >
-                {{ stake ? 'Stake' : 'Unstake' }}
-            </button>
-        </p>
-    </ng-template>
-}
+        <div class="position-title">Overview</div>
+        <hr />
+        <div class="block-position">
+            <div class="tui-space_top-0 tui-space_bottom-0">Total stacked</div>
+            <div class="bold">1.5M BTC</div>
+        </div>
+        <hr />
+        <div class="block-position">
+            <div class="tui-space_top-0 tui-space_bottom-0">APR</div>
+            <div class="bold">5%</div>
+        </div>
+    </div>
+</div>
+
+<ng-template
+    #template
+    let-observer
+>
+    <header tuiHeader>
+        <h2 tuiTitle>{{ stake ? 'Staking' : 'Unstaking' }} Bitcoin</h2>
+    </header>
+    <p>Available for {{ stake ? 'stake' : 'unstake' }}: {{ stake ? available - amount() : amount() }} BTC</p>
+    @if (stake) {
+        <tui-input-number
+            tuiAutoFocus
+            [max]="available - amount()"
+            [min]="0"
+            [(ngModel)]="inputStake"
+        >
+            Amount BTC
+        </tui-input-number>
+    } @else {
+        <tui-input-number
+            tuiAutoFocus
+            [max]="amount()"
+            [min]="0"
+            [(ngModel)]="inputUnstake"
+        >
+            Amount BTC
+        </tui-input-number>
+    }
+    <p>
+        <button
+            tuiButton
+            type="submit"
+            (click)="[observer.complete(), addAmount(stake ? inputStake : -inputUnstake), (inputStake = 0)]"
+        >
+            {{ stake ? 'Stake' : 'Unstake' }}
+        </button>
+    </p>
+</ng-template>

apps/taiga-lumbermill/src/dashboards/crypto/components/staking/staking.component.ts

@@ -17,7 +17,7 @@ import {
     TuiDialogService,
     TuiTitle,
 } from '@taiga-ui/core';
-import {TuiAvatar} from '@taiga-ui/kit';
+import {TuiAvatar, TuiSkeleton} from '@taiga-ui/kit';
 import {TuiCardLarge, TuiHeader} from '@taiga-ui/layout';
 import {TuiInputNumberModule} from '@taiga-ui/legacy';
 import type {PolymorpheusContent} from '@taiga-ui/polymorpheus';
@@ -41,6 +41,7 @@ import {CoinIconPipe} from '../../pipes/coin-icon.pipe';
         TuiDialog,
         TuiHeader,
         TuiInputNumberModule,
+        TuiSkeleton,
         TuiTitle,
     ],
     templateUrl: './staking.component.html',