Merge pull request #526 from GetStream/perf-message-list

Perf message list

Author: szuperaz

.github/workflows/workflow.yml

@@ -6,7 +6,7 @@ on:
       - beta
       - test
       - theming-v2
-      - support-angular-17
+      - perf-message-list
   pull_request:
     branches:
       - master

package.json

@@ -52,7 +52,7 @@
         "prerelease": true
       },
       {
-        "name": "support-angular-17",
+        "name": "perf-message-list",
         "prerelease": true
       }
     ],

projects/customizations-example/src/app/app.component.html

@@ -35,6 +35,7 @@
   let-enabledMessageActions="enabledMessageActions"
   let-mode="mode"
   let-customActions="customActions"
+  let-isHighlighted="isHighlighted"
 >
   <div>
     <stream-message
@@ -43,6 +44,7 @@
       [enabledMessageActions]="enabledMessageActions"
       [mode]="mode"
       [customActions]="customActions"
+      [isHighlighted]="isHighlighted"
     ></stream-message>
   </div>
 </ng-template>

projects/stream-chat-angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stream-chat-angular",
-  "version": "4.55.1",
+  "version": "4.56.0-perf-message-list.2",
   "description": "Angular components to create chat conversations or livestream style chat",
   "author": "GetStream",
   "homepage": "https://getstream.io/chat/",

projects/stream-chat-angular/src/assets/version.ts

@@ -1 +1 @@
-export const version = '4.55.1';
+export const version = '4.56.0-perf-message-list.2';

projects/stream-chat-angular/src/lib/attachment-configuration.service.ts

@@ -228,7 +228,7 @@ export class AttachmentConfigurationService<
       sizeRestriction = undefined;
       if (displayWarning) {
         console.warn(
-          `Invalid value set for height/max-height and/or max-width for HTML element, this can cause scrolling issues inside the message list, more info https://getstream.io/chat/docs/sdk/angular/components/AttachmentListComponent/#image-and-video-sizing`
+          `Invalid value set for height/max-height and/or max-width for HTML element, this can cause scrolling issues inside the message list, more info https://getstream.io/chat/docs/sdk/angular/components/AttachmentListComponent/#image-and-video-sizing, attachment URL: ${url.toString()}`
         );
       }
     }

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

@@ -106,6 +106,8 @@
                 "
               >
                 <img
+                  fetchpriority="low"
+                  loading="lazy"
                   #imgElement
                   [src]="
                     getImageAttachmentConfiguration(
@@ -334,6 +336,8 @@
               class="str-chat__message-attachment-card--header"
             >
               <img
+                fetchpriority="low"
+                loading="lazy"
                 data-testclass="card-img"
                 alt="{{ attachmentConfiguration.url }}"
                 src="{{ attachmentConfiguration.url }}"

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

@@ -1,4 +1,9 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {
+  ComponentFixture,
+  TestBed,
+  fakeAsync,
+  tick,
+} from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { TranslateModule } from '@ngx-translate/core';
 import { ModalComponent } from '../modal/modal.component';
@@ -46,10 +51,12 @@ describe('AttachmentListComponent', () => {
     TestBed.inject(StreamI18nService).setTranslation();
   });
 
-  beforeEach(() => {
+  beforeEach(fakeAsync(() => {
     fixture = TestBed.createComponent(AttachmentListComponent);
     component = fixture.componentInstance;
     nativeElement = fixture.nativeElement as HTMLElement;
+    fixture.detectChanges();
+    tick();
     queryAttachments = () =>
       Array.from(
         nativeElement.querySelectorAll(
@@ -70,7 +77,6 @@ describe('AttachmentListComponent', () => {
       Array.from(nativeElement.querySelectorAll('[data-testclass="url-link"]'));
     queryCardImages = () =>
       Array.from(nativeElement.querySelectorAll('[data-testclass="card-img"]'));
-    fixture.detectChanges();
     queryActions = () =>
       Array.from(
         nativeElement.querySelectorAll('[data-testclass="attachment-action"]')
@@ -102,7 +108,7 @@ describe('AttachmentListComponent', () => {
           '[data-testclass="video-attachment-parent"]'
         )
       );
-  });
+  }));
 
   it('should display received #attachments ordered', () => {
     component.attachments = [];

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

@@ -74,7 +74,6 @@ export class AttachmentListComponent implements OnChanges {
   ) {
     this.themeVersion = themeService.themeVersion;
   }
-
   ngOnChanges(changes: SimpleChanges): void {
     if (changes.attachments) {
       const images = this.attachments.filter(this.isImage);

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

@@ -16,20 +16,18 @@
 >
   <img
     *ngIf="(imageUrl || fallbackChannelImage) && !isError; else fallback"
-    class="str-chat__avatar-image str-chat__avatar-image{{
-      isLoaded ? ' str-chat__avatar-image--loaded' : ''
-    }}"
+    class="str-chat__avatar-image str-chat__avatar-image"
     src="{{ imageUrl || fallbackChannelImage }}"
     alt="{{ initials }}"
     data-testid="avatar-img"
-    (load)="isLoaded = true"
     (error)="isError = true"
     [style]="{
       flexBasis: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')',
       height: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')',
       objectFit: 'cover',
       width: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')'
     }"
+    fetchpriority="high"
   />
   <ng-template #fallback>
     <div