fix(core): tui-loader triggers sidebar tuiActiveZoneChange

taiga-family · Jul 29, 2024 · 4aee1e6 · 4aee1e6
1 parent 0bb7b5b
commit 4aee1e6
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 25 deletions.
diff --git a/projects/core/components/loader/loader.component.ts b/projects/core/components/loader/loader.component.ts
@@ -1,18 +1,14 @@
-import {DOCUMENT} from '@angular/common';
 import {
+    ApplicationRef,
     ChangeDetectionStrategy,
+    ChangeDetectorRef,
     Component,
     ElementRef,
     HostBinding,
     Inject,
     Input,
 } from '@angular/core';
-import {
-    TUI_IS_IOS,
-    tuiBlurNativeFocused,
-    tuiIsNativeFocusedIn,
-    tuiIsSafari,
-} from '@taiga-ui/cdk';
+import {TUI_IS_IOS, tuiIsSafari} from '@taiga-ui/cdk';
 import {tuiSizeBigger} from '@taiga-ui/core/utils/miscellaneous';
 import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
 
@@ -40,8 +36,12 @@ export class TuiLoaderComponent {
     @Input()
     set showLoader(value: boolean) {
         // @bad TODO: https://github.com/angular/angular/issues/32083 think of a better way
-        if (value && this.focused) {
-            tuiBlurNativeFocused(this.doc);
+        if (value) {
+            this.cd.markForCheck();
+            /**
+             * recalculated HostBinding getters
+             */
+            void Promise.resolve().then(() => this.app.tick());
         }
 
         this.loading = value;
@@ -53,7 +53,8 @@ export class TuiLoaderComponent {
     readonly isApple = tuiIsSafari(this.el.nativeElement) || this.isIos;
 
     constructor(
-        @Inject(DOCUMENT) private readonly doc: Document,
+        @Inject(ApplicationRef) private readonly app: ApplicationRef,
+        @Inject(ChangeDetectorRef) private readonly cd: ChangeDetectorRef,
         @Inject(ElementRef) private readonly el: ElementRef<HTMLElement>,
         @Inject(TUI_IS_IOS) private readonly isIos: boolean,
         @Inject(TUI_LOADER_OPTIONS) private readonly options: TuiLoaderOptions,
@@ -70,8 +71,4 @@ export class TuiLoaderComponent {
     get isHorizontal(): boolean {
         return !tuiSizeBigger(this.size);
     }
-
-    get focused(): boolean {
-        return tuiIsNativeFocusedIn(this.el.nativeElement);
-    }
 }
diff --git a/projects/demo/src/modules/directives/sidebar/examples/1/index.html b/projects/demo/src/modules/directives/sidebar/examples/1/index.html
@@ -26,16 +26,35 @@
             <tui-accordion-item borders="top-bottom">
                 Other libraries
                 <ng-template tuiAccordionItemContent>
-                    <a
-                        *ngFor="let link of links"
-                        href="https://github.com/taiga-family/{{ link }}"
-                        rel="noreferrer"
-                        target="_blank"
-                        tuiLink
-                        class="link"
+                    <tui-loader
+                        *tuiLet="fakeRequest$ | async as loading"
+                        textContent="Loading..."
+                        [overlay]="true"
+                        [showLoader]="loading || false"
                     >
-                        {{ link }}
-                    </a>
+                        <ng-container *ngIf="loading === false; else button">
+                            <a
+                                *ngFor="let link of links"
+                                href="https://github.com/taiga-family/{{ link }}"
+                                rel="noreferrer"
+                                target="_blank"
+                                tuiLink
+                                class="link"
+                            >
+                                {{ link }}
+                            </a>
+                        </ng-container>
+
+                        <ng-template #button>
+                            <button
+                                size="s"
+                                tuiButton
+                                (click)="load$.next()"
+                            >
+                                Loading
+                            </button>
+                        </ng-template>
+                    </tui-loader>
                 </ng-template>
             </tui-accordion-item>
         </tui-accordion>

diff --git a/projects/demo/src/modules/directives/sidebar/examples/1/index.ts b/projects/demo/src/modules/directives/sidebar/examples/1/index.ts
@@ -1,6 +1,9 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {ALWAYS_FALSE_HANDLER, tuiPure} from '@taiga-ui/cdk';
+import {Observable, Subject, timer} from 'rxjs';
+import {map, startWith, switchMap} from 'rxjs/operators';
 
 @Component({
     selector: 'tui-sidebar-example-1',
@@ -10,12 +13,21 @@ import {encapsulation} from '@demo/emulate/encapsulation';
     changeDetection,
 })
 export class TuiSidebarExample1 {
+    readonly load$ = new Subject<void>();
+
     open = false;
 
     readonly webApis = ['Common', 'Audio', 'Canvas', 'Geolocation', 'MIDI', 'Workers'];
 
     readonly links = ['Taiga-UI', 'ng-event-plugins', 'ng-polymorpheus', 'ng-dompurify'];
 
+    @tuiPure
+    get fakeRequest$(): Observable<boolean> {
+        return this.load$.pipe(
+            switchMap(() => timer(2000).pipe(map(ALWAYS_FALSE_HANDLER), startWith(true))),
+        );
+    }
+
     toggle(open: boolean): void {
         this.open = open;
     }

diff --git a/projects/demo/src/modules/directives/sidebar/sidebar.module.ts b/projects/demo/src/modules/directives/sidebar/sidebar.module.ts
@@ -3,8 +3,8 @@ import {NgModule} from '@angular/core';
 import {RouterModule} from '@angular/router';
 import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
 import {TuiSidebarModule} from '@taiga-ui/addon-mobile';
-import {TuiActiveZoneModule} from '@taiga-ui/cdk';
-import {TuiButtonModule, TuiLinkModule} from '@taiga-ui/core';
+import {TuiActiveZoneModule, TuiLetModule} from '@taiga-ui/cdk';
+import {TuiButtonModule, TuiLinkModule, TuiLoaderModule} from '@taiga-ui/core';
 import {TuiAccordionModule} from '@taiga-ui/kit';
 
 import {TuiSidebarExample1} from './examples/1';
@@ -20,6 +20,8 @@ import {ExampleTuiSidebarComponent} from './sidebar.component';
         TuiLinkModule,
         TuiAddonDocModule,
         RouterModule.forChild(tuiGenerateRoutes(ExampleTuiSidebarComponent)),
+        TuiLoaderModule,
+        TuiLetModule,
     ],
     declarations: [ExampleTuiSidebarComponent, TuiSidebarExample1],
     exports: [ExampleTuiSidebarComponent],