refactor: remove async pipe in root template (#9218)

taiga-family · Sep 27, 2024 · d48b600 · d48b600
1 parent b3c5f3a
commit d48b600
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 17 deletions.
diff --git a/projects/core/components/root/root.component.ts b/projects/core/components/root/root.component.ts
@@ -1,10 +1,11 @@
 /// <reference types="@taiga-ui/tsconfig/ng-dev-mode" />
-import {AsyncPipe, DOCUMENT, NgIf} from '@angular/common';
+import {DOCUMENT, NgIf} from '@angular/common';
 import {
     ChangeDetectionStrategy,
     ChangeDetectorRef,
     Component,
     inject,
+    signal,
     ViewEncapsulation,
 } from '@angular/core';
 import {toSignal} from '@angular/core/rxjs-interop';
@@ -23,20 +24,12 @@ import {TUI_ANIMATIONS_SPEED, TUI_REDUCED_MOTION, TUI_THEME} from '@taiga-ui/cor
 import {tuiGetDuration} from '@taiga-ui/core/utils';
 import {PreventEventPlugin} from '@taiga-ui/event-plugins';
 import type {Observable} from 'rxjs';
-import {debounceTime, map, of} from 'rxjs';
+import {debounceTime, map} from 'rxjs';
 
 @Component({
     standalone: true,
     selector: 'tui-root',
-    imports: [
-        AsyncPipe,
-        NgIf,
-        TuiAlerts,
-        TuiDialogs,
-        TuiDropdowns,
-        TuiHints,
-        TuiScrollControls,
-    ],
+    imports: [NgIf, TuiAlerts, TuiDialogs, TuiDropdowns, TuiHints, TuiScrollControls],
     templateUrl: './root.template.html',
     styleUrls: ['./root.style.less'],
     encapsulation: ViewEncapsulation.None,
@@ -61,13 +54,17 @@ export class TuiRoot {
             map((breakpoint) => breakpoint === 'mobile'),
             tuiWatch(inject(ChangeDetectorRef)),
         ),
+        {initialValue: false},
     );
 
-    protected readonly scrollbars$: Observable<boolean> = inject(TUI_IS_MOBILE)
-        ? of(false)
-        : inject<Observable<readonly unknown[]>>(TUI_DIALOGS).pipe(
-              map(({length}) => !length),
-              debounceTime(0, tuiZonefreeScheduler()),
+    protected readonly scrollbars = inject(TUI_IS_MOBILE)
+        ? signal(false)
+        : toSignal(
+              inject<Observable<readonly unknown[]>>(TUI_DIALOGS).pipe(
+                  map(({length}) => !length),
+                  debounceTime(0, tuiZonefreeScheduler()),
+              ),
+              {initialValue: false},
           );
 
     constructor() {

diff --git a/projects/core/components/root/root.template.html b/projects/core/components/root/root.template.html
@@ -1,5 +1,5 @@
 <tui-scroll-controls
-    *ngIf="scrollbars$ | async"
+    *ngIf="scrollbars()"
     class="t-root-scrollbar"
 />
 <tui-dropdowns>