in progress

package.json

@@ -117,7 +117,7 @@
     "@ctrl/ngx-emoji-mart": "^8.2.0",
     "@floating-ui/dom": "^1.6.3",
     "@ngx-translate/core": "^14.0.0",
-    "@stream-io/stream-chat-css": "4.17.3",
+    "@stream-io/stream-chat-css": "4.17.4",
     "@stream-io/transliterate": "^1.5.2",
     "angular-mentions": "1.4.0",
     "dayjs": "^1.11.10",

projects/stream-chat-angular/.eslintrc.json

@@ -34,6 +34,18 @@
             "paths": ["stream-chat-angular"],
             "patterns": ["dist/*", "public-api"]
           }
+        ],
+        "@typescript-eslint/no-unused-vars": [
+          "error",
+          {
+            "args": "all",
+            "argsIgnorePattern": "^_",
+            "caughtErrors": "all",
+            "caughtErrorsIgnorePattern": "^error",
+            "destructuredArrayIgnorePattern": "^_",
+            "varsIgnorePattern": "^_",
+            "ignoreRestSiblings": true
+          }
         ]
       }
     },

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

@@ -63,7 +63,7 @@ export class ChannelListComponent implements OnDestroy {
     this.isLoadingMoreChannels = false;
   }
 
-  trackByChannelId(index: number, item: Channel<DefaultStreamChatGenerics>) {
+  trackByChannelId(_: number, item: Channel<DefaultStreamChatGenerics>) {
     return item.cid;
   }
 }

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

@@ -43,7 +43,7 @@ export class MessageActionsService<
       },
       isVisible: (
         enabledActions: string[],
-        isMine: boolean,
+        _: boolean,
         message: StreamMessage<T>
       ) => enabledActions.indexOf('read-events') !== -1 && !message.parent_id,
     },
@@ -64,7 +64,7 @@ export class MessageActionsService<
       },
       isVisible: (
         enabledActions: string[],
-        isMine: boolean,
+        _: boolean,
         message: StreamMessage<T>
       ) => enabledActions.indexOf('send-reply') !== -1 && !message.parent_id,
     },
@@ -91,7 +91,7 @@ export class MessageActionsService<
             'streamChat.Message has been successfully flagged',
             'success'
           );
-        } catch (err) {
+        } catch (error) {
           this.notificationService.addTemporaryNotification(
             'streamChat.Error adding flag'
           );

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

@@ -57,7 +57,12 @@
     </button>
   </div>
 </ng-template>
-<div #scrollContainer data-testid="scroll-container" class="str-chat__list">
+<div
+  #scrollContainer
+  data-testid="scroll-container"
+  class="str-chat__list"
+  style="overscroll-behavior-y: none"
+>
   <ng-container *ngIf="mode === 'main' && isEmpty && emptyListTemplate">
     <ng-container *ngTemplateOutlet="emptyListTemplate"></ng-container>
   </ng-container>
@@ -83,12 +88,16 @@
       <ng-container *ngIf="mode === 'thread' && isEmpty && emptyListTemplate">
         <ng-container *ngTemplateOutlet="emptyListTemplate"></ng-container>
       </ng-container>
-      <stream-loading-indicator
+      <stream-loading-indicator-placeholder
         *ngIf="
-          isLoading && direction === 'bottom-to-top' && displayLoadingIndicator
+          ((loadingState === 'loading-top' && direction === 'bottom-to-top') ||
+            (loadingState === 'loading-bottom' &&
+              direction === 'top-to-bottom')) &&
+            displayLoadingIndicator;
+          else loadingIndicatorPlaceholder
         "
         data-testid="top-loading-indicator"
-      ></stream-loading-indicator>
+      ></stream-loading-indicator-placeholder>
       <ng-container *ngIf="messages$ | async as messages">
         <ng-container
           *ngFor="
@@ -159,12 +168,20 @@
           </ng-container>
         </ng-container>
       </ng-container>
-      <stream-loading-indicator
+      <stream-loading-indicator-placeholder
         *ngIf="
-          isLoading && direction === 'top-to-bottom' && displayLoadingIndicator
+          ((loadingState === 'loading-bottom' &&
+            direction === 'bottom-to-top') ||
+            (loadingState === 'loading-top' &&
+              direction === 'top-to-bottom')) &&
+            displayLoadingIndicator;
+          else loadingIndicatorPlaceholder
         "
         data-testid="bottom-loading-indicator"
-      ></stream-loading-indicator>
+      ></stream-loading-indicator-placeholder>
+      <ng-template #loadingIndicatorPlaceholder>
+        <div class="str-chat__loading-indicator-placeholder"></div>
+      </ng-template>
     </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

@@ -953,53 +953,53 @@ describe('MessageListComponent', () => {
   });
 
   it('should set isLoading flag', () => {
-    expect(component.isLoading).toBeFalse();
+    expect(component.loadingState).toBe('idle');
 
     component['virtualizedList']?.['queryStateSubject'].next({
       state: 'loading-bottom',
     });
 
-    expect(component.isLoading).toBeTrue();
+    expect(component.loadingState).toBe('loading-bottom');
 
     component['virtualizedList']?.['queryStateSubject'].next({
       state: 'success',
     });
 
-    expect(component.isLoading).toBeFalse();
+    expect(component.loadingState).toBe('idle');
 
     component['virtualizedList']?.['queryStateSubject'].next({
       state: 'loading-top',
     });
 
-    expect(component.isLoading).toBeTrue();
+    expect(component.loadingState).toBe('loading-top');
 
     component['virtualizedList']?.['queryStateSubject'].next({
       state: 'error',
     });
 
-    expect(component.isLoading).toBeFalse();
+    expect(component.loadingState).toBe('idle');
   });
 
   it('should display loading indicator', () => {
-    component.isLoading = false;
+    component.loadingState = 'idle';
     fixture.componentRef.injector.get(ChangeDetectorRef).detectChanges();
 
     expect(queryLoadingIndicator('top')).toBeNull();
     expect(queryLoadingIndicator('bottom')).toBeNull();
 
     component.direction = 'top-to-bottom';
-    component.isLoading = true;
+    component.loadingState = 'loading-top';
     fixture.componentRef.injector.get(ChangeDetectorRef).detectChanges();
 
-    expect(queryLoadingIndicator('top')).toBeNull();
     expect(queryLoadingIndicator('bottom')).not.toBeNull();
+    expect(queryLoadingIndicator('top')).toBeNull();
 
     component.direction = 'bottom-to-top';
-    component.isLoading = true;
+    component.loadingState = 'loading-bottom';
     fixture.componentRef.injector.get(ChangeDetectorRef).detectChanges();
 
-    expect(queryLoadingIndicator('top')).not.toBeNull();
-    expect(queryLoadingIndicator('bottom')).toBeNull();
+    expect(queryLoadingIndicator('top')).toBeNull();
+    expect(queryLoadingIndicator('bottom')).not.toBeNull();
   });
 
   it('should tell if two messages are on separate dates', () => {

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

@@ -117,7 +117,7 @@ export class MessageListComponent
   lastSentMessageId: string | undefined;
   parentMessage: StreamMessage | undefined;
   highlightedMessageId: string | undefined;
-  isLoading = false;
+  loadingState: 'idle' | 'loading-top' | 'loading-bottom' = 'idle';
   scrollEndTimeout?: ReturnType<typeof setTimeout>;
   lastReadMessageId?: string;
   isUnreadNotificationVisible = true;
@@ -414,7 +414,7 @@ export class MessageListComponent
       this.anchorMessageTopOffset = undefined;
       return;
     }
-    if (this.messageIdToAnchorTo && !this.isLoading) {
+    if (this.messageIdToAnchorTo && this.loadingState === 'idle') {
       this.preserveScrollbarPosition();
     } else if (
       (!this.isUserScrolled &&
@@ -444,11 +444,11 @@ export class MessageListComponent
     this.disposeVirtualizedList();
   }
 
-  trackByMessageId(index: number, item: StreamMessage) {
+  trackByMessageId(_: number, item: StreamMessage) {
     return item.id;
   }
 
-  trackByUserId(index: number, user: UserResponse) {
+  trackByUserId(_: number, user: UserResponse) {
     return user.id;
   }
 
@@ -648,10 +648,13 @@ export class MessageListComponent
       this.channelService
     );
     this.queryStateSubscription = this.virtualizedList.queryState$.subscribe(
-      (s) => {
-        const isLoading = s.state.includes('loading');
-        if (isLoading !== this.isLoading) {
-          this.isLoading = isLoading;
+      (queryState) => {
+        let mappedState: 'idle' | 'loading-top' | 'loading-bottom' = 'idle';
+        if (queryState.state.includes('loading')) {
+          mappedState = (queryState.state as 'loading-top') || 'loading-bottom';
+        }
+        if (mappedState !== this.loadingState) {
+          this.loadingState = mappedState;
           if (this.isViewInited) {
             this.cdRef.detectChanges();
           }
@@ -759,6 +762,7 @@ export class MessageListComponent
     this.isLatestMessageInList = true;
     this.isJumpingToMessage = false;
     this.scrollPosition$.next('bottom');
+    this.loadingState = 'idle';
   }
 
   private disposeVirtualizedList() {

projects/stream-chat-angular/src/lib/virtualized-list.service.ts

@@ -152,22 +152,21 @@ export abstract class VirtualizedListService<T> {
         .pipe(distinctUntilChanged())
         .subscribe((position) => {
           if (
-            this.queryStateSubject.getValue().state ===
-            `loading-bottom-${position}`
+            this.queryStateSubject.getValue().state === `loading-${position}`
           ) {
             return;
           }
           if (position === 'top') {
             if (this.bufferOnTop < this.pageSize) {
               void this.loadMore(position);
             } else {
-              this.loadFromBuffer$.next();
+              this.loadMoreFromBuffer('top');
             }
           } else if (position === 'bottom') {
             if (this.bufferOnBottom < this.pageSize) {
               void this.loadMore(position);
             } else {
-              this.loadFromBuffer$.next();
+              this.loadMoreFromBuffer('bottom');
             }
           }
         })
@@ -364,6 +363,10 @@ export abstract class VirtualizedListService<T> {
     this.subscriptions.forEach((s) => s.unsubscribe());
   }
 
+  protected loadMoreFromBuffer(_: VirtualizedListQueryDirection) {
+    this.loadFromBuffer$.next();
+  }
+
   private async loadMore(direction: VirtualizedListQueryDirection) {
     this.queryStateSubject.next({ state: `loading-${direction}` });
     try {

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

@@ -75,6 +75,14 @@ export class VirtualizedMessageListService extends VirtualizedListService<Stream
     );
   }
 
+  protected loadMoreFromBuffer(direction: VirtualizedListQueryDirection): void {
+    this.queryStateSubject.next({ state: `loading-${direction}` });
+    setTimeout(() => {
+      this.loadFromBuffer$.next();
+      this.queryStateSubject.next({ state: 'success' });
+    });
+  }
+
   protected isEqual = (t1: StreamMessage, t2: StreamMessage) => t1.id === t2.id;
 
   protected query = (direction: VirtualizedListQueryDirection) => {

projects/stream-chat-angular/src/lib/voice-recording/voice-recording.component.ts

@@ -78,7 +78,7 @@ export class VoiceRecordingComponent implements OnChanges, AfterViewInit {
         ? await this.audioElement.nativeElement.play()
         : this.audioElement.nativeElement.pause();
       this.isError = false;
-    } catch (e) {
+    } catch (error) {
       this.isError = true;
     }
   }

projects/stream-chat-angular/src/public-api.ts

@@ -63,3 +63,5 @@ export * from './lib/voice-recording/voice-recording-wavebar/voice-recording-wav
 export * from './lib/is-on-separate-date';
 export * from './lib/message-reactions-selector/message-reactions-selector.component';
 export * from './lib/channel-query';
+export * from './lib/virtualized-list.service';
+export * from './lib/virtualized-message-list.service';