Pipe for history message.

src/Squidex/app/features/content/pages/content/content-history.component.html

@@ -11,7 +11,7 @@
             <div class="col pl-2">
                 <div class="event-message">
                     <span class="event-actor user-ref mr-1">{{event.actor | sqxUserNameRef:null}}</span> 
-                    <span [innerHTML]="format(event.message) | async"></span>
+                    <span [innerHTML]="event | sqxHistoryMessage"></span>
                 </div>
                 <div class="event-created">{{event.created | sqxFromNow}}</div>
 

src/Squidex/app/features/content/pages/content/content-history.component.ts

@@ -13,12 +13,10 @@ import { delay, switchMap } from 'rxjs/operators';
 import {
     allParams,
     AppsState,
-    formatHistoryMessage,
     HistoryChannelUpdated,
     HistoryEventDto,
     HistoryService,
     MessageBus,
-    UsersProviderService,
     Version
 } from '@app/shared';
 
@@ -59,8 +57,7 @@ export class ContentHistoryComponent {
         private readonly appsState: AppsState,
         private readonly historyService: HistoryService,
         private readonly messageBus: MessageBus,
-        private readonly route: ActivatedRoute,
-        private readonly users: UsersProviderService
+        private readonly route: ActivatedRoute
     ) {
     }
 
@@ -68,10 +65,6 @@ export class ContentHistoryComponent {
         this.messageBus.emit(new ContentVersionSelected(new Version(version.toString())));
     }
 
-    public format(message: string): Observable<string> {
-        return formatHistoryMessage(message, this.users);
-    }
-
     public trackByEvent(index: number, event: HistoryEventDto) {
         return event.eventId;
     }

src/Squidex/app/framework/angular/panel-container.directive.ts

@@ -14,6 +14,7 @@ import { PanelComponent } from './panel.component';
 })
 export class PanelContainerDirective implements AfterViewInit {
     private readonly panels: PanelComponent[] = [];
+    private isViewInit = false;
     private containerWidth = 0;
 
     constructor(
@@ -27,14 +28,14 @@ export class PanelContainerDirective implements AfterViewInit {
         this.invalidate(true);
     }
 
-    public ngAfterViewInit() {
-        this.invalidate(true);
-    }
-
     public push(panel: PanelComponent) {
         this.panels.push(panel);
+    }
 
-        this.invalidate();
+    public ngAfterViewInit() {
+        this.isViewInit = true;
+
+        this.invalidate(true);
     }
 
     public pop() {
@@ -44,6 +45,10 @@ export class PanelContainerDirective implements AfterViewInit {
     }
 
     public invalidate(resize = false) {
+        if (!this.isViewInit) {
+            return;
+        }
+
         if (resize) {
             this.containerWidth = this.element.nativeElement.offsetWidth;
         }

src/Squidex/app/framework/angular/panel.component.ts

@@ -5,7 +5,7 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Input, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, Input, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
 
 import { slideRightAnimation } from './animations';
 
@@ -63,7 +63,6 @@ export class PanelComponent implements AfterViewInit, OnDestroy, OnInit {
 
     constructor(
         private readonly container: PanelContainerDirective,
-        private readonly changeDetector: ChangeDetectorRef,
         private readonly renderer: Renderer2
     ) {
     }
@@ -86,8 +85,6 @@ export class PanelComponent implements AfterViewInit, OnDestroy, OnInit {
 
             this.renderer.setStyle(this.panel.nativeElement, 'width', size);
             this.renderWidth = this.panel.nativeElement.offsetWidth;
-
-            this.changeDetector.detectChanges();
         }
     }
 

src/Squidex/app/shared/components/history-list.component.html

@@ -6,7 +6,7 @@
         <div class="col pl-2">
             <div class="event-message">
                 <span class="user-ref">{{event.actor | sqxUserNameRef:null}}</span>
-                <span [innerHTML]="format(event.message) | async"></span>
+                <span [innerHTML]="event | sqxHistoryMessage"></span>
             </div>
             <div class="event-created">{{event.created | sqxFromNow}}</div>
         </div>

src/Squidex/app/shared/components/history-list.component.ts

@@ -6,13 +6,8 @@
  */
 
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-import { Observable } from 'rxjs';
 
-import {
-    formatHistoryMessage,
-    HistoryEventDto,
-    UsersProviderService
-} from '@app/shared/internal';
+import { HistoryEventDto } from '@app/shared/internal';
 
 @Component({
     selector: 'sqx-history-list',
@@ -24,15 +19,6 @@ export class HistoryListComponent {
     @Input()
     public events: HistoryEventDto;
 
-    constructor(
-        private readonly users: UsersProviderService
-    ) {
-    }
-
-    public format(message: string): Observable<string> {
-        return formatHistoryMessage(message, this.users);
-    }
-
     public trackByEvent(index: number, event: HistoryEventDto) {
         return event.eventId;
     }

src/Squidex/app/shared/components/pipes.ts

@@ -11,11 +11,57 @@ import { map } from 'rxjs/operators';
 
 import {
     ApiUrlConfig,
+    formatHistoryMessage,
+    HistoryEventDto,
     MathHelper,
     UserDto,
     UsersProviderService
 } from '@app/shared/internal';
 
+@Pipe({
+    name: 'sqxHistoryMessage',
+    pure: false
+})
+export class HistoryMessagePipe implements OnDestroy, PipeTransform {
+    private subscription: Subscription;
+    private lastMessage: string;
+    private lastValue: string | null = null;
+
+    constructor(
+        private readonly changeDetector: ChangeDetectorRef,
+        private readonly users: UsersProviderService
+    ) {
+    }
+
+    public ngOnDestroy() {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+        }
+    }
+
+    public transform(event: HistoryEventDto): string | null {
+        if (!event) {
+            return this.lastValue;
+        }
+
+        if (this.lastMessage !== event.message) {
+            this.lastMessage = event.message;
+
+            if (this.subscription) {
+                this.subscription.unsubscribe();
+            }
+
+            this.subscription =  formatHistoryMessage(event.message, this.users).subscribe(value => {
+                this.lastValue = value;
+
+                this.changeDetector.detectChanges();
+            });
+        }
+
+        return this.lastValue;
+    }
+}
+
 class UserAsyncPipe implements OnDestroy {
     private lastUserId: string;
     private lastValue: string | null = null;

src/Squidex/app/shared/module.ts

@@ -45,6 +45,7 @@ import {
     HelpService,
     HistoryComponent,
     HistoryListComponent,
+    HistoryMessagePipe,
     HistoryService,
     LanguageSelectorComponent,
     LanguagesService,
@@ -101,6 +102,7 @@ import {
         HelpComponent,
         HistoryComponent,
         HistoryListComponent,
+        HistoryMessagePipe,
         LanguageSelectorComponent,
         MarkdownEditorComponent,
         SchemaCategoryComponent,
@@ -125,6 +127,7 @@ import {
         HelpComponent,
         HistoryComponent,
         HistoryListComponent,
+        HistoryMessagePipe,
         LanguageSelectorComponent,
         MarkdownEditorComponent,
         RouterModule,