From 90454b04a37c857a095415e96302bb7dae62f64a Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Mon, 11 Dec 2023 19:18:55 +0200
Subject: [PATCH] UI: Improve image pipe. Resolve final image data inside
 NgZone.

---
 ui-ngx/src/app/shared/pipe/image.pipe.ts | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/ui-ngx/src/app/shared/pipe/image.pipe.ts b/ui-ngx/src/app/shared/pipe/image.pipe.ts
index 43acf04c77..2559343f56 100644
--- a/ui-ngx/src/app/shared/pipe/image.pipe.ts
+++ b/ui-ngx/src/app/shared/pipe/image.pipe.ts
@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Pipe, PipeTransform } from '@angular/core';
+import { NgZone, Pipe, PipeTransform } from '@angular/core';
 import { ImageService } from '@core/http/image.service';
 import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
 import { AsyncSubject, BehaviorSubject, Observable } from 'rxjs';
@@ -35,7 +35,8 @@ export interface UrlHolder {
 export class ImagePipe implements PipeTransform {
 
   constructor(private imageService: ImageService,
-              private sanitizer: DomSanitizer) { }
+              private sanitizer: DomSanitizer,
+              private zone: NgZone) { }
 
   transform(urlData: string | UrlHolder, args?: any): Observable<SafeUrl | string> {
     const ignoreLoadingImage = !!args?.ignoreLoadingImage;
@@ -49,14 +50,18 @@ export class ImagePipe implements PipeTransform {
       const preview = !!args?.preview;
       this.imageService.resolveImageUrl(url, preview, asString, emptyUrl).subscribe((imageUrl) => {
         Promise.resolve().then(() => {
-          image$.next(imageUrl);
-          image$.complete();
+          this.zone.run(() => {
+            image$.next(imageUrl);
+            image$.complete();
+          });
         });
       });
     } else {
       Promise.resolve().then(() => {
-        image$.next(asString ? emptyUrl : this.sanitizer.bypassSecurityTrustUrl(emptyUrl));
-        image$.complete();
+        this.zone.run(() => {
+          image$.next(asString ? emptyUrl : this.sanitizer.bypassSecurityTrustUrl(emptyUrl));
+          image$.complete();
+        });
       });
     }
     return image$.asObservable();