feat: performance optimization and iOS scroll issue fix

Author: szuperaz

projects/sample-app/src/app/app.component.html

@@ -45,3 +45,7 @@
 <ng-template #emojiPickerTemplate let-emojiInput$="emojiInput$">
   <app-emoji-picker [emojiInput$]="emojiInput$"></app-emoji-picker>
 </ng-template>
+
+<ng-template #avatar>
+  <div>{{ counter }}</div>
+</ng-template>

projects/sample-app/src/app/app.component.ts

@@ -13,6 +13,7 @@ import {
   EmojiPickerContext,
   CustomTemplatesService,
   ThemeService,
+  AvatarContext,
 } from 'stream-chat-angular';
 import { environment } from '../environments/environment';
 
@@ -26,8 +27,10 @@ export class AppComponent implements AfterViewInit {
   isThreadOpen = false;
   @ViewChild('emojiPickerTemplate')
   emojiPickerTemplate!: TemplateRef<EmojiPickerContext>;
+  @ViewChild('avatar') avatarTemplate!: TemplateRef<AvatarContext>;
   themeVersion: '1' | '2';
   theme$: Observable<string>;
+  counter = 0;
 
   constructor(
     private chatService: ChatClientService,
@@ -44,19 +47,23 @@ export class AppComponent implements AfterViewInit {
     void this.channelService.init({
       type: 'messaging',
       members: { $in: [environment.userId] },
+      // id: { $eq: '1af49475-b988-479e-9444-2a10aab707f0' },
     });
     this.streamI18nService.setTranslation();
     this.channelService.activeParentMessage$
       .pipe(map((m) => !!m))
       .subscribe((isThreadOpen) => (this.isThreadOpen = isThreadOpen));
     this.themeVersion = themeService.themeVersion;
     this.theme$ = themeService.theme$;
+
+    // setInterval(() => this.counter++, 1000);
   }
 
   ngAfterViewInit(): void {
     this.customTemplateService.emojiPickerTemplate$.next(
       this.emojiPickerTemplate
     );
+    // this.customTemplateService.avatarTemplate$.next(this.avatarTemplate);
   }
 
   closeMenu() {

projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.html

@@ -19,7 +19,8 @@
       <ng-container *ngIf="isImage(attachment)">
         <ng-container
           *ngTemplateOutlet="
-            imageAttachmentTemplate || defaultImage;
+            (customTemplatesService.imageAttachmentTemplate$ | async) ||
+              defaultImage;
             context: getAttachmentContext(attachment)
           "
         ></ng-container>
@@ -70,7 +71,8 @@
       <ng-container *ngIf="isGallery(attachment)">
         <ng-container
           *ngTemplateOutlet="
-            galleryAttachmentTemplate || defaultGallery;
+            (customTemplatesService.galleryAttachmentTemplate$ | async) ||
+              defaultGallery;
             context: getAttachmentContext(attachment)
           "
         ></ng-container>
@@ -202,7 +204,8 @@
       <ng-container *ngIf="isVideo(attachment)">
         <ng-container
           *ngTemplateOutlet="
-            videoAttachmentTemplate || defaultVideo;
+            (customTemplatesService.videoAttachmentTemplate$ | async) ||
+              defaultVideo;
             context: getAttachmentContext(attachment)
           "
         ></ng-container>
@@ -249,7 +252,8 @@
       <ng-container *ngIf="isFile(attachment)">
         <ng-container
           *ngTemplateOutlet="
-            fileAttachmentTemplate || defaultFile;
+            (customTemplatesService.fileAttachmentTemplate$ | async) ||
+              defaultFile;
             context: getAttachmentContext(attachment)
           "
         ></ng-container>
@@ -314,7 +318,8 @@
       >
         <ng-container
           *ngTemplateOutlet="
-            cardAttachmentTemplate || defaultCard;
+            (customTemplatesService.cardAttachmentTemplate$ | async) ||
+              defaultCard;
             context: getAttachmentContext(attachment)
           "
         ></ng-container>
@@ -384,7 +389,8 @@
       <ng-container *ngIf="attachment.actions && attachment.actions.length > 0">
         <ng-container
           *ngTemplateOutlet="
-            attachmentActionsTemplate || defaultActions;
+            (customTemplatesService.attachmentActionsTemplate$ | async) ||
+              defaultActions;
             context: getAttachmentContext(attachment)
           "
         ></ng-container>

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

@@ -4,8 +4,6 @@ import {
   HostBinding,
   Input,
   OnChanges,
-  OnDestroy,
-  OnInit,
   Output,
   SimpleChanges,
   TemplateRef,
@@ -26,7 +24,6 @@ import { ChannelService } from '../channel.service';
 import { CustomTemplatesService } from '../custom-templates.service';
 import { AttachmentConfigurationService } from '../attachment-configuration.service';
 import { ThemeService } from '../theme.service';
-import { Subscription } from 'rxjs';
 
 /**
  * The `AttachmentList` component displays the attachments of a message
@@ -36,7 +33,7 @@ import { Subscription } from 'rxjs';
   templateUrl: './attachment-list.component.html',
   styles: [],
 })
-export class AttachmentListComponent implements OnChanges, OnInit, OnDestroy {
+export class AttachmentListComponent implements OnChanges {
   /**
    * The id of the message the attachments belong to
    */
@@ -60,12 +57,6 @@ export class AttachmentListComponent implements OnChanges, OnInit, OnDestroy {
   imagesToView: Attachment<DefaultStreamChatGenerics>[] = [];
   imagesToViewCurrentIndex = 0;
   themeVersion: '1' | '2';
-  imageAttachmentTemplate?: TemplateRef<AttachmentContext>;
-  videoAttachmentTemplate?: TemplateRef<AttachmentContext>;
-  galleryAttachmentTemplate?: TemplateRef<AttachmentContext>;
-  fileAttachmentTemplate?: TemplateRef<AttachmentContext>;
-  cardAttachmentTemplate?: TemplateRef<AttachmentContext>;
-  attachmentActionsTemplate?: TemplateRef<AttachmentContext>;
   @ViewChild('modalContent', { static: true })
   private modalContent!: TemplateRef<void>;
   private attachmentConfigurations: Map<
@@ -74,7 +65,6 @@ export class AttachmentListComponent implements OnChanges, OnInit, OnDestroy {
     | VideoAttachmentConfiguration
     | ImageAttachmentConfiguration
   > = new Map();
-  private subscriptions: Subscription[] = [];
 
   constructor(
     public readonly customTemplatesService: CustomTemplatesService,
@@ -84,38 +74,6 @@ export class AttachmentListComponent implements OnChanges, OnInit, OnDestroy {
   ) {
     this.themeVersion = themeService.themeVersion;
   }
-  ngOnInit(): void {
-    this.subscriptions.push(
-      this.customTemplatesService.imageAttachmentTemplate$.subscribe(
-        (t) => (this.imageAttachmentTemplate = t)
-      )
-    );
-    this.subscriptions.push(
-      this.customTemplatesService.galleryAttachmentTemplate$.subscribe(
-        (t) => (this.galleryAttachmentTemplate = t)
-      )
-    );
-    this.subscriptions.push(
-      this.customTemplatesService.videoAttachmentTemplate$.subscribe(
-        (t) => (this.videoAttachmentTemplate = t)
-      )
-    );
-    this.subscriptions.push(
-      this.customTemplatesService.fileAttachmentTemplate$.subscribe(
-        (t) => (this.fileAttachmentTemplate = t)
-      )
-    );
-    this.subscriptions.push(
-      this.customTemplatesService.cardAttachmentTemplate$.subscribe(
-        (t) => (this.cardAttachmentTemplate = t)
-      )
-    );
-    this.subscriptions.push(
-      this.customTemplatesService.attachmentActionsTemplate$.subscribe(
-        (t) => (this.attachmentActionsTemplate = t)
-      )
-    );
-  }
 
   ngOnChanges(changes: SimpleChanges): void {
     if (changes.attachments) {
@@ -137,10 +95,6 @@ export class AttachmentListComponent implements OnChanges, OnInit, OnDestroy {
     }
   }
 
-  ngOnDestroy(): void {
-    this.subscriptions.forEach((s) => s.unsubscribe());
-  }
-
   trackByUrl(_: number, attachment: Attachment) {
     return (
       attachment.image_url ||

projects/stream-chat-angular/src/lib/channel.service.ts

@@ -1169,13 +1169,16 @@ export class ChannelService<
       channel.on('message.read', (e) => {
         this.ngZone.run(() => {
           let latestMessage!: StreamMessage;
-          this.activeChannelMessages$.pipe(first()).subscribe((messages) => {
+          let messages!: StreamMessage[];
+          this.activeChannelMessages$.pipe(first()).subscribe((m) => {
+            messages = m;
             latestMessage = messages[messages.length - 1];
           });
           if (!latestMessage || !e.user) {
             return;
           }
           latestMessage.readBy = getReadBy(latestMessage, channel);
+          messages[messages.length - 1] = { ...latestMessage };
 
           this.activeChannelMessagesSubject.next(
             this.activeChannelMessagesSubject.getValue()
@@ -1251,14 +1254,17 @@ export class ChannelService<
       )
         .pipe(first())
         .subscribe((m) => (messages = m));
-      const message = messages.find((m) => m.id === e?.message?.id);
-      if (!message) {
+      const messageIndex = messages.findIndex((m) => m.id === e?.message?.id);
+      if (messageIndex === -1) {
         return;
       }
+      const message = messages[messageIndex];
       message.reaction_counts = { ...e.message?.reaction_counts };
       message.reaction_scores = { ...e.message?.reaction_scores };
       message.latest_reactions = [...(e.message?.latest_reactions || [])];
       message.own_reactions = [...(e.message?.own_reactions || [])];
+
+      messages[messageIndex] = { ...message };
       isThreadMessage
         ? this.activeThreadMessagesSubject.next([...messages])
         : this.activeChannelMessagesSubject.next([...messages]);

projects/stream-chat-angular/src/lib/chat-client.service.ts

@@ -118,7 +118,9 @@ export class ChatClientService<
         );
         throw error;
       }
-      this.userSubject.next(this.chatClient.user);
+      this.userSubject.next(
+        this.chatClient.user ? { ...this.chatClient.user } : undefined
+      );
       const sdkPrefix = 'stream-chat-angular';
       if (!this.chatClient.getUserAgent().includes(sdkPrefix)) {
         this.chatClient.setUserAgent(

projects/stream-chat-angular/src/lib/message-actions-box/message-actions-box.component.html

@@ -10,7 +10,8 @@
     >
       <ng-container
         *ngTemplateOutlet="
-          messageActionItemTemplate || defaultMessageActionItem;
+          (customTemplatesService.messageActionsBoxItemTemplate$ | async) ||
+            defaultMessageActionItem;
           context: getMessageActionTemplateContext(item)
         "
       ></ng-container>
@@ -37,7 +38,7 @@
 
 <ng-container
   *ngTemplateOutlet="
-    modalTemplate || defaultModal;
+    (customTemplatesService.modalTemplate$ | async) || defaultModal;
     context: getEditModalContext()
   "
 ></ng-container>
@@ -72,7 +73,7 @@
     </ng-template>
     <ng-container
       *ngTemplateOutlet="
-        messageInputTemplate || defaultInput;
+        (customTemplatesService.messageInputTemplate$ | async) || defaultInput;
         context: getMessageInputContext()
       "
     >

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

@@ -3,13 +3,12 @@ import {
   EventEmitter,
   Input,
   OnChanges,
-  OnDestroy,
   Output,
   SimpleChanges,
   TemplateRef,
   ViewChild,
 } from '@angular/core';
-import { Observable, Subject, Subscription } from 'rxjs';
+import { Observable, Subject } from 'rxjs';
 import { ChannelService } from '../channel.service';
 import { ChatClientService } from '../chat-client.service';
 import { CustomTemplatesService } from '../custom-templates.service';
@@ -30,7 +29,7 @@ import {
   templateUrl: './message-actions-box.component.html',
   styles: [],
 })
-export class MessageActionsBoxComponent implements OnChanges, OnDestroy {
+export class MessageActionsBoxComponent implements OnChanges {
   /**
    * Indicates if the list should be opened or closed. Adding a UI element to open and close the list is the parent's component responsibility.
    * @deprecated No need for this since [theme-v2](../theming/introduction.mdx)
@@ -66,7 +65,6 @@ export class MessageActionsBoxComponent implements OnChanges, OnDestroy {
     | TemplateRef<MessageActionBoxItemContext>
     | undefined;
   modalTemplate: TemplateRef<ModalContext> | undefined;
-  subscriptions: Subscription[] = [];
   visibleMessageActionItems: (MessageActionItem | CustomMessageActionItem)[] =
     [];
   sendMessage$: Observable<void>;
@@ -78,23 +76,8 @@ export class MessageActionsBoxComponent implements OnChanges, OnDestroy {
     private chatClientService: ChatClientService,
     private notificationService: NotificationService,
     private channelService: ChannelService,
-    private customTemplatesService: CustomTemplatesService
+    public readonly customTemplatesService: CustomTemplatesService
   ) {
-    this.subscriptions.push(
-      this.customTemplatesService.messageInputTemplate$.subscribe(
-        (template) => (this.messageInputTemplate = template)
-      )
-    );
-    this.subscriptions.push(
-      this.customTemplatesService.messageActionsBoxItemTemplate$.subscribe(
-        (template) => (this.messageActionItemTemplate = template)
-      )
-    );
-    this.subscriptions.push(
-      this.customTemplatesService.modalTemplate$.subscribe(
-        (template) => (this.modalTemplate = template)
-      )
-    );
     this.messageActionItems = [
       {
         actionName: 'quote',
@@ -185,10 +168,6 @@ export class MessageActionsBoxComponent implements OnChanges, OnDestroy {
     }
   }
 
-  ngOnDestroy(): void {
-    this.subscriptions.forEach((s) => s.unsubscribe());
-  }
-
   getActionLabel(
     actionLabelOrTranslationKey: ((message: StreamMessage) => string) | string
   ) {

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

@@ -54,7 +54,6 @@ export class MessageListComponent
    */
   @Input() messageOptionsTrigger: 'message-row' | 'message-bubble' =
     'message-row';
-  typingIndicatorTemplate: TemplateRef<TypingIndicatorContext> | undefined;
   /**
    * You can hide the "jump to latest" button while scrolling. A potential use-case for this input would be to [workaround a known issue on iOS Safar](https://github.com/GetStream/stream-chat-angular/issues/418)
    */
@@ -81,6 +80,7 @@ export class MessageListComponent
    * You can turn on and off the loading indicator that signals to users that more messages are being loaded to the message list
    */
   @Input() displayLoadingIndicator = true;
+  typingIndicatorTemplate: TemplateRef<TypingIndicatorContext> | undefined;
   messageTemplate: TemplateRef<MessageContext> | undefined;
   customDateSeparatorTemplate: TemplateRef<DateSeparatorContext> | undefined;
   customnewMessagesIndicatorTemplate: TemplateRef<void> | undefined;
@@ -358,6 +358,7 @@ export class MessageListComponent
   scrollToBottom(): void {
     this.scrollContainer.nativeElement.scrollTop =
       this.scrollContainer.nativeElement.scrollHeight;
+    this.forceRepaint();
   }
 
   scrollToTop() {
@@ -460,6 +461,14 @@ export class MessageListComponent
     this.scrollContainer.nativeElement.scrollTop =
       (this.prevScrollTop || 0) +
       (this.scrollContainer.nativeElement.scrollHeight - this.containerHeight!);
+    this.forceRepaint();
+  }
+
+  private forceRepaint() {
+    // Solves the issue of empty screen on iOS Safari when scrolling
+    this.scrollContainer.nativeElement.style.display = 'none';
+    this.scrollContainer.nativeElement.offsetHeight; // no need to store this anywhere, the reference is enough
+    this.scrollContainer.nativeElement.style.display = '';
   }
 
   private getScrollPosition(): 'top' | 'bottom' | 'middle' {