feat: Make it posisble to hide loading indicator in message list

Author: szuperaz

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

@@ -30,7 +30,9 @@
       </li>
       <stream-loading-indicator
         data-testid="top-loading-indicator"
-        *ngIf="isLoading && direction === 'bottom-to-top'"
+        *ngIf="
+          isLoading && direction === 'bottom-to-top' && displayLoadingIndicator
+        "
       ></stream-loading-indicator>
       <ng-container *ngIf="messages$ | async as messages">
         <ng-container
@@ -108,7 +110,9 @@
       </ng-container>
       <stream-loading-indicator
         data-testid="bottom-loading-indicator"
-        *ngIf="isLoading && direction === 'top-to-bottom'"
+        *ngIf="
+          isLoading && direction === 'top-to-bottom' && displayLoadingIndicator
+        "
       ></stream-loading-indicator>
     </ul>
     <ng-template #defaultTypingIndicator let-usersTyping$="usersTyping$">

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

@@ -77,6 +77,10 @@ export class MessageListComponent
    */
   @Input() openMessageListAt: 'last-message' | 'last-unread-message' =
     'last-message';
+  /**
+   * 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;
   messageTemplate: TemplateRef<MessageContext> | undefined;
   customDateSeparatorTemplate: TemplateRef<DateSeparatorContext> | undefined;
   customnewMessagesIndicatorTemplate: TemplateRef<void> | undefined;
@@ -369,7 +373,7 @@ export class MessageListComponent
     const scrollPosition = this.getScrollPosition();
     this.chatClientService.chatClient?.logger?.(
       'info',
-      `Scrolled - scroll position: ${scrollPosition}`,
+      `Scrolled - scroll position: ${scrollPosition}, container height: ${this.scrollContainer.nativeElement.scrollHeight}`,
       { tags: `message list ${this.mode}` }
     );
 
@@ -391,6 +395,11 @@ export class MessageListComponent
       this.mode === 'main'
         ? void this.channelService.loadMoreMessages(direction)
         : void this.channelService.loadMoreThreadReplies(direction);
+      this.chatClientService.chatClient?.logger?.(
+        'info',
+        `Displaying loading indicator`,
+        { tags: `message list ${this.mode}` }
+      );
       this.isLoading = true;
     }
     this.prevScrollTop = this.scrollContainer.nativeElement.scrollTop;