From d48b6006779bd6170b4dcfc6348f522f39775e09 Mon Sep 17 00:00:00 2001
From: Maksim Ivanov <omaxphp@yandex.ru>
Date: Fri, 27 Sep 2024 11:50:56 +0300
Subject: [PATCH] refactor: remove async pipe in root template (#9218)

---
 .../core/components/root/root.component.ts    | 29 +++++++++----------
 .../core/components/root/root.template.html   |  2 +-
 2 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/projects/core/components/root/root.component.ts b/projects/core/components/root/root.component.ts
index 05f08298f0f3..11842bfef28c 100644
--- 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
index a867c0291053..f96ceac22647 100644
--- 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>