fix(kit): drop image skeleton when handle of lazy loading error (#9032)

taiga-family · Sep 18, 2024 · 2af496b · 2af496b
1 parent 4bca8b7
commit 2af496b
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 30 deletions.
diff --git a/projects/demo/src/modules/directives/lazy-loading/examples/1/index.ts b/projects/demo/src/modules/directives/lazy-loading/examples/1/index.ts
@@ -2,10 +2,11 @@ import {NgForOf} from '@angular/common';
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiImgLazyLoading} from '@taiga-ui/kit';
 
 @Component({
     standalone: true,
-    imports: [NgForOf],
+    imports: [NgForOf, TuiImgLazyLoading],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,

diff --git a/projects/demo/src/modules/directives/lazy-loading/examples/import/import.md b/projects/demo/src/modules/directives/lazy-loading/examples/import/import.md
@@ -1,13 +1,13 @@
 ```ts
-import {TuiLazyLoading} from '@taiga-ui/kit';
+import {TuiImgLazyLoading} from '@taiga-ui/kit';
 
 // ...
 
 @Component({
   standalone: true,
   imports: [
     // ...
-    TuiLazyLoading,
+    TuiImgLazyLoading,
   ],
   // ...
 })

diff --git a/projects/kit/directives/lazy-loading/lazy-loading.directive.ts b/projects/kit/directives/lazy-loading/lazy-loading.directive.ts
@@ -1,4 +1,4 @@
-import {Directive, inject, Input} from '@angular/core';
+import {Directive, inject, Input, signal} from '@angular/core';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 import type {SafeResourceUrl} from '@angular/platform-browser';
 import {IntersectionObserverService} from '@ng-web-apis/intersection-observer';
@@ -11,41 +11,33 @@ import {TuiLazyLoadingService} from './lazy-loading.service';
     selector: 'img[loading="lazy"]',
     providers: [TuiLazyLoadingService, IntersectionObserverService],
     host: {
-        '[style.animation]': 'animation',
-        '[style.background]': 'background',
-        '[attr.src]': 'src',
-        '(load)': 'onLoad()',
+        '[style.animation]': 'animation()',
+        '[style.background]': 'background()',
+        '[attr.src]': 'src()',
+        '(load)': 'unset()',
+        '(error)': 'unset()',
     },
 })
 export class TuiImgLazyLoading {
     private readonly el = tuiInjectElement<HTMLImageElement>();
-    private readonly src$ = inject(TuiLazyLoadingService);
-    protected animation = 'tuiSkeletonVibe ease-in-out 1s infinite alternate';
-    protected background = 'var(--tui-background-neutral-2)';
-    protected src: SafeResourceUrl | string | null = null;
+    private readonly loading$ = inject(TuiLazyLoadingService);
+    private readonly supported = 'loading' in this.el;
+    protected src = signal<SafeResourceUrl | string | null>(null);
+    protected animation = signal('tuiSkeletonVibe ease-in-out 1s infinite alternate');
+    protected background = signal('var(--tui-background-neutral-2)');
 
-    constructor() {
-        if (this.supported) {
-            return;
-        }
-
-        this.src$.pipe(takeUntilDestroyed()).subscribe((src) => {
-            this.src = src;
-        });
-    }
+    protected readonly $ = this.loading$
+        .pipe(takeUntilDestroyed())
+        .subscribe((src) => this.src.set(src));
 
     @Input('src')
     public set srcSetter(src: SafeResourceUrl | string) {
-        this.src = this.supported ? src : null;
-        this.src$.next(src);
-    }
-
-    protected onLoad(): void {
-        this.background = '';
-        this.animation = '';
+        this.src.set(this.supported ? src : null);
+        this.loading$.next(src);
     }
 
-    private get supported(): boolean {
-        return 'loading' in this.el;
+    protected unset(): void {
+        this.background.set('');
+        this.animation.set('');
     }
 }