From 7717df836df90a2abfac0cc9342f819b0bd5e799 Mon Sep 17 00:00:00 2001
From: Zita Szupera <szuperaz@gmail.com>
Date: Thu, 27 Jun 2024 14:53:33 +0200
Subject: [PATCH] fix: thread small UI fixes

---
 .../code-examples/responsive-layout.mdx       |  4 +--
 projects/sample-app/src/styles.scss           |  2 +-
 .../src/lib/channel.service.ts                | 25 +++++++++++--------
 .../message-list/message-list.component.ts    |  9 ++++++-
 4 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/docusaurus/angular_versioned_docs/version-5/code-examples/responsive-layout.mdx b/docusaurus/angular_versioned_docs/version-5/code-examples/responsive-layout.mdx
index fd9bd25f..3d282df7 100644
--- a/docusaurus/angular_versioned_docs/version-5/code-examples/responsive-layout.mdx
+++ b/docusaurus/angular_versioned_docs/version-5/code-examples/responsive-layout.mdx
@@ -75,7 +75,7 @@ Let's start with the thread component:
     width: 100%;
     height: 100%;
     position: fixed;
-    z-index: 2;
+    z-index: 3;
   }
 
   @media screen and (min-width: 768px) {
@@ -176,7 +176,7 @@ Provide the layout based on the menu state and hide the menu on bigger screens:
     width: 100%;
     height: 100%;
     position: fixed;
-    z-index: 2;
+    z-index: 3;
   }
 
   @media screen and (min-width: 768px) {
diff --git a/projects/sample-app/src/styles.scss b/projects/sample-app/src/styles.scss
index f5cb8c71..47c295cc 100644
--- a/projects/sample-app/src/styles.scss
+++ b/projects/sample-app/src/styles.scss
@@ -38,7 +38,7 @@ body {
     width: 100%;
     height: 100%;
     position: fixed;
-    z-index: 2;
+    z-index: 3;
   }
 
   @media screen and (min-width: 768px) {
diff --git a/projects/stream-chat-angular/src/lib/channel.service.ts b/projects/stream-chat-angular/src/lib/channel.service.ts
index 64655f97..db0aa596 100644
--- a/projects/stream-chat-angular/src/lib/channel.service.ts
+++ b/projects/stream-chat-angular/src/lib/channel.service.ts
@@ -715,26 +715,29 @@ export class ChannelService<
    * Loads the next page of messages of the active thread. The page size can be set in the [query option](https://getstream.io/chat/docs/javascript/query_channels/?language=javascript#query-options) object.
    * @param direction
    */
-  async loadMoreThreadReplies(direction: 'older' | 'newer' = 'older') {
+  loadMoreThreadReplies(direction: 'older' | 'newer' = 'older') {
     if (direction === 'newer') {
       // Thread replies aren't broke into different message sets, activeThreadMessages$ will be refreshed by WS events, no need for a request
-      return;
+      return false;
     }
     const activeChnannel = this.activeChannelSubject.getValue();
     const parentMessageId = this.activeParentMessageIdSubject.getValue();
-    if (!parentMessageId) {
-      return;
+    if (!parentMessageId || !activeChnannel) {
+      return false;
     }
     const threadMessages = this.activeThreadMessagesSubject.getValue();
     const lastMessageId =
       threadMessages[direction === 'older' ? 0 : threadMessages.length - 1]?.id;
-    await activeChnannel?.getReplies(parentMessageId, {
-      limit: this.messagePageSize,
-      [direction === 'older' ? 'id_lt' : 'id_gt']: lastMessageId,
-    });
-    this.activeThreadMessagesSubject.next(
-      activeChnannel?.state.threads[parentMessageId] || []
-    );
+    return activeChnannel
+      .getReplies(parentMessageId, {
+        limit: this.messagePageSize,
+        [direction === 'older' ? 'id_lt' : 'id_gt']: lastMessageId,
+      })
+      .then(() => {
+        this.activeThreadMessagesSubject.next(
+          activeChnannel?.state.threads[parentMessageId] || []
+        );
+      });
   }
 
   /**
diff --git a/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts b/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts
index efc1af9e..800642bb 100644
--- a/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts
+++ b/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts
@@ -571,6 +571,11 @@ export class MessageListComponent
       this.scrollContainer.nativeElement.scrollHeight ===
       this.scrollContainer.nativeElement.clientHeight
     ) {
+      if (this.isJumpToLatestButtonVisible) {
+        this.isJumpToLatestButtonVisible = false;
+        this.newMessageCountWhileBeingScrolled = 0;
+        this.cdRef.detectChanges();
+      }
       return;
     }
     this.scroll$.next();
@@ -738,7 +743,9 @@ export class MessageListComponent
         : this.channelService.activeThreadMessages$
     ).pipe(
       tap((messages) => {
-        this.isLoading = false;
+        if (this.isLoading) {
+          this.isLoading = false;
+        }
         if (messages.length === 0) {
           this.chatClientService.chatClient?.logger?.(
             'info',