feat: Add loading indicator to message list

Author: szuperaz

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

@@ -23,6 +23,10 @@
           replies' | translate:replyCountParam)}}
         </div>
       </li>
+      <stream-loading-indicator
+        data-testid="top-loading-indicator"
+        *ngIf="isLoading && direction === 'bottom-to-top'"
+      ></stream-loading-indicator>
       <li
         tabindex="0"
         data-testclass="message"
@@ -41,6 +45,10 @@
           "
         ></ng-container>
       </li>
+      <stream-loading-indicator
+        data-testid="bottom-loading-indicator"
+        *ngIf="isLoading && direction === 'top-to-bottom'"
+      ></stream-loading-indicator>
     </ul>
     <ng-template #defaultTypingIndicator let-usersTyping$="usersTyping$">
       <!-- eslint-disable-next-line @angular-eslint/template/no-any -->

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

@@ -40,6 +40,7 @@ describe('MessageListComponent', () => {
   let queryParentMessageReplyCount: () => HTMLElement | null;
   let queryTypingIndicator: () => HTMLElement | null;
   let queryTypingUsers: () => HTMLElement | null;
+  let queryLoadingIndicator: (pos: 'top' | 'bottom') => HTMLElement | null;
 
   beforeEach(() => {
     channelServiceMock = mockChannelService();
@@ -90,6 +91,8 @@ describe('MessageListComponent', () => {
       nativeElement.querySelector('[data-testid="typing-users"]');
     queryParentMessageReplyCount = () =>
       nativeElement.querySelector('[data-testid="reply-count"]');
+    queryLoadingIndicator = (pos: 'top' | 'bottom') =>
+      nativeElement.querySelector(`[data-testid="${pos}-loading-indicator"]`);
     TestBed.inject(StreamI18nService).setTranslation('en');
     fixture.detectChanges();
     const scrollContainer = queryScrollContainer()!;
@@ -870,4 +873,41 @@ describe('MessageListComponent', () => {
       );
     });
   });
+
+  it('should set isLoading flag', () => {
+    expect(component.isLoading).toBeFalse();
+
+    const scrollContainer = queryScrollContainer()!;
+    scrollContainer.scrollTo({ top: 0 });
+    scrollContainer.dispatchEvent(new Event('scroll'));
+    fixture.detectChanges();
+
+    expect(component.isLoading).toBeTrue();
+
+    channelServiceMock.activeChannelMessages$.next(generateMockMessages());
+
+    expect(component.isLoading).toBeFalse();
+  });
+
+  it('should display loading indicator', () => {
+    component.isLoading = false;
+    fixture.detectChanges();
+
+    expect(queryLoadingIndicator('top')).toBeNull();
+    expect(queryLoadingIndicator('bottom')).toBeNull();
+
+    component.direction = 'top-to-bottom';
+    component.isLoading = true;
+    fixture.detectChanges();
+
+    expect(queryLoadingIndicator('top')).toBeNull();
+    expect(queryLoadingIndicator('bottom')).not.toBeNull();
+
+    component.direction = 'bottom-to-top';
+    component.isLoading = true;
+    fixture.detectChanges();
+
+    expect(queryLoadingIndicator('top')).not.toBeNull();
+    expect(queryLoadingIndicator('bottom')).toBeNull();
+  });
 });

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

@@ -58,6 +58,7 @@ export class MessageListComponent
   lastSentMessageId: string | undefined;
   parentMessage: StreamMessage | undefined;
   highlightedMessageId: string | undefined;
+  isLoading = false;
   @ViewChild('scrollContainer')
   private scrollContainer!: ElementRef<HTMLElement>;
   @ViewChild('parentMessageElement')
@@ -276,6 +277,7 @@ export class MessageListComponent
       this.mode === 'main'
         ? void this.channelService.loadMoreMessages(direction)
         : void this.channelService.loadMoreThreadReplies(direction);
+      this.isLoading = true;
     }
     this.prevScrollTop = this.scrollContainer.nativeElement.scrollTop;
   }
@@ -346,6 +348,7 @@ export class MessageListComponent
         : this.channelService.activeThreadMessages$
     ).pipe(
       tap((messages) => {
+        this.isLoading = false;
         if (messages.length === 0) {
           return;
         }