UI: Improve image pipe. Resolve final image data inside NgZone.

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();