fix(core): Loader fix leaving ActiveZone (#9115)

taiga-family · Sep 20, 2024 · d4099d2 · d4099d2
1 parent a110e06
commit d4099d2
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 29 deletions.
diff --git a/projects/cdk/utils/browser/is-safari.ts b/projects/cdk/utils/browser/is-safari.ts
@@ -1,3 +1,4 @@
+// TODO: Drop change to Document in v5
 export function tuiIsSafari({ownerDocument: doc}: Element): boolean {
     const win = doc?.defaultView as unknown as Window & {safari?: any};
 

diff --git a/projects/core/components/loader/loader.component.ts b/projects/core/components/loader/loader.component.ts
@@ -1,9 +1,8 @@
-import {DOCUMENT, NgIf} from '@angular/common';
+import {NgIf} from '@angular/common';
 import {ChangeDetectionStrategy, Component, inject, Input} from '@angular/core';
 import {TUI_IS_IOS} from '@taiga-ui/cdk/tokens';
 import {tuiIsSafari} from '@taiga-ui/cdk/utils/browser';
 import {tuiInjectElement} from '@taiga-ui/cdk/utils/dom';
-import {tuiBlurNativeFocused, tuiIsNativeFocusedIn} from '@taiga-ui/cdk/utils/focus';
 import {tuiSizeBigger} from '@taiga-ui/core/utils/miscellaneous';
 import type {PolymorpheusContent} from '@taiga-ui/polymorpheus';
 import {PolymorpheusOutlet, PolymorpheusTemplate} from '@taiga-ui/polymorpheus';
@@ -23,12 +22,9 @@ import {TUI_LOADER_OPTIONS} from './loader.options';
     },
 })
 export class TuiLoader {
-    private readonly doc = inject(DOCUMENT);
-    private readonly el = tuiInjectElement();
     private readonly isIOS = inject(TUI_IS_IOS);
     private readonly options = inject(TUI_LOADER_OPTIONS);
-    protected loading = true;
-    protected readonly isApple = tuiIsSafari(this.el) || this.isIOS;
+    protected readonly isApple = tuiIsSafari(tuiInjectElement()) || this.isIOS;
 
     @Input()
     public size = this.options.size;
@@ -42,29 +38,11 @@ export class TuiLoader {
     @Input()
     public textContent: PolymorpheusContent;
 
-    @Input()
-    public 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);
-        }
-
-        this.loading = value;
-    }
-
-    protected get hasOverlay(): boolean {
-        return this.overlay && this.loading;
-    }
-
-    protected get hasText(): boolean {
-        return !!this.textContent;
-    }
+    // TODO: Drop alias in v5
+    @Input('showLoader')
+    public loading = true;
 
     protected get isHorizontal(): boolean {
         return !tuiSizeBigger(this.size);
     }
-
-    protected get focused(): boolean {
-        return tuiIsNativeFocusedIn(this.el);
-    }
 }
diff --git a/projects/core/components/loader/loader.template.html b/projects/core/components/loader/loader.template.html
@@ -1,7 +1,7 @@
 <fieldset
     class="t-content"
     [attr.inert]="loading || null"
-    [class.t-content_has-overlay]="hasOverlay"
+    [class.t-content_has-overlay]="overlay && loading"
     [class.t-content_loading]="loading"
     [disabled]="loading && !isApple"
 >
@@ -29,7 +29,7 @@
     </svg>
 
     <div
-        *ngIf="hasText"
+        *ngIf="textContent"
         automation-id="tui-loader__text"
         class="t-text"
         [class.t-text_horizontal]="isHorizontal"