Message list - move template watchers to ngOnInit

Author: szuperaz

projects/stream-chat-angular/src/lib/message-list/message-list.component.ts

@@ -297,30 +297,6 @@ export class MessageListComponent
         }
       )
     );
-    this.setMessages$();
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes.mode || changes.direction) {
-      this.setMessages$();
-    }
-    if (changes.direction) {
-      if (this.scrollContainer?.nativeElement) {
-        this.jumpToLatestMessage();
-      }
-    }
-    if (changes.customMessageActions) {
-      this.messageActionsService.customActions$.next(this.customMessageActions);
-    }
-  }
-
-  ngAfterViewInit(): void {
-    this.isViewInited = true;
-    this.ngZone.runOutsideAngular(() => {
-      this.scrollContainer.nativeElement.addEventListener('scroll', () =>
-        this.scrolled()
-      );
-    });
     this.subscriptions.push(
       this.channelService.jumpToMessage$
         .pipe(filter((config) => !!config.id))
@@ -339,7 +315,9 @@ export class MessageListComponent
           if (messageId) {
             if (messageId === 'latest') {
               this.scrollToLatestMessage();
-              this.cdRef.detectChanges();
+              if (this.isViewInited) {
+                this.cdRef.detectChanges();
+              }
             } else {
               this.scrollMessageIntoView(messageId);
               this.highlightedMessageId = messageId;
@@ -352,7 +330,7 @@ export class MessageListComponent
         (template) => {
           const isChanged = this.emptyMainMessageListTemplate !== template;
           this.emptyMainMessageListTemplate = template || null;
-          if (isChanged) {
+          if (isChanged && this.isViewInited) {
             this.cdRef.detectChanges();
           }
         }
@@ -363,12 +341,36 @@ export class MessageListComponent
         (template) => {
           const isChanged = this.emptyThreadMessageListTemplate !== template;
           this.emptyThreadMessageListTemplate = template || null;
-          if (isChanged) {
+          if (isChanged && this.isViewInited) {
             this.cdRef.detectChanges();
           }
         }
       )
     );
+    this.setMessages$();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.mode || changes.direction) {
+      this.setMessages$();
+    }
+    if (changes.direction) {
+      if (this.scrollContainer?.nativeElement) {
+        this.jumpToLatestMessage();
+      }
+    }
+    if (changes.customMessageActions) {
+      this.messageActionsService.customActions$.next(this.customMessageActions);
+    }
+  }
+
+  ngAfterViewInit(): void {
+    this.isViewInited = true;
+    this.ngZone.runOutsideAngular(() => {
+      this.scrollContainer.nativeElement.addEventListener('scroll', () =>
+        this.scrolled()
+      );
+    });
   }
 
   ngAfterViewChecked() {