Merge pull request #490 from GetStream/performance

Performance

Author: szuperaz

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

@@ -499,6 +499,12 @@ export class ChannelService<
     this.watchForActiveChannelEvents(channel);
     this.addChannel(channel);
     this.activeChannelSubject.next(channel);
+    const channelStateLength = channel.state.latestMessages.length;
+    if (channelStateLength > 2 * this.messagePageSize) {
+      channel.state.latestMessages = channel.state.latestMessages.slice(
+        channelStateLength - 2 * this.messagePageSize
+      );
+    }
     this.setChannelState(channel);
   }
 

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

@@ -153,10 +153,7 @@
 <div class="str-chat__jump-to-latest-message">
   <button
     data-testid="scroll-to-latest"
-    *ngIf="
-      isUserScrolled &&
-      (!isScrollInProgress || !hideJumpToLatestButtonDuringScroll)
-    "
+    *ngIf="isUserScrolled"
     class="
       str-chat__message-notification-scroll-to-latest
       str-chat__message-notification-scroll-to-latest-right

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

@@ -99,7 +99,6 @@ export class MessageListComponent
   parentMessage: StreamMessage | undefined;
   highlightedMessageId: string | undefined;
   isLoading = false;
-  isScrollInProgress = false;
   scrollEndTimeout: any;
   lastReadMessageId?: string;
   isJumpingToLatestUnreadMessage = false;
@@ -368,15 +367,6 @@ export class MessageListComponent
   }
 
   scrolled() {
-    this.isScrollInProgress = true;
-    if (this.scrollEndTimeout) {
-      clearTimeout(this.scrollEndTimeout);
-    }
-    this.scrollEndTimeout = setTimeout(() => {
-      this.ngZone.run(() => {
-        this.isScrollInProgress = false;
-      });
-    }, 100);
     if (
       this.scrollContainer.nativeElement.scrollHeight ===
       this.scrollContainer.nativeElement.clientHeight

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

@@ -36,7 +36,7 @@
           class="str-chat__message-simple__actions str-chat__message-options"
           data-testid="message-options"
           [class.str-chat__message-edit-in-progress]="isEditing"
-          *ngIf="areOptionsVisible"
+          *ngIf="areOptionsVisible && optionsRenderTimeoutEnded"
         >
           <div
             data-testid="message-actions-container"

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

@@ -145,6 +145,7 @@ describe('MessageComponent', () => {
     queryReplyInThreadIcon = () =>
       nativeElement.querySelector('[data-testid="reply-in-thread"]');
     message = mockMessage();
+    component.optionsRenderTimeoutEnded = true;
     component.message = message;
     component.ngOnChanges({ message: {} as SimpleChange });
     fixture.detectChanges();

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

@@ -110,6 +110,7 @@ export class MessageComponent
   canDisplayReadStatus = false;
   private quotedMessageAttachments: Attachment[] | undefined;
   user: UserResponse<DefaultStreamChatGenerics> | undefined;
+  optionsRenderTimeoutEnded = false;
   private subscriptions: Subscription[] = [];
   @ViewChild('container') private container:
     | ElementRef<HTMLElement>
@@ -222,6 +223,10 @@ export class MessageComponent
         this.mouseLeft()
       );
     });
+    setTimeout(() => {
+      this.optionsRenderTimeoutEnded = true;
+      this.cdRef.detectChanges();
+    }, 0);
   }
 
   ngOnDestroy(): void {