Performance: use NgOptimizedImage for thumbnail lazy loading (#13169)

src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html

@@ -2,7 +2,7 @@
   <div class="row g-0">
     <div class="col-md-2 doc-img-container rounded-start" (click)="this.toggleSelected.emit($event)" (dblclick)="dblClickDocument.emit()">
        @if (document()) {
-        <img [src]="getThumbUrl()" class="card-img doc-img border-end rounded-start" [class.inverted]="getIsThumbInverted()">
+        <img [ngSrc]="getThumbUrl()" fill class="card-img doc-img border-end rounded-start" [class.inverted]="getIsThumbInverted()">
 
         <div class="border-end border-bottom bg-light document-card-check">
           <div class="form-check">

src-ui/src/app/components/document-list/document-card-large/document-card-large.component.spec.ts

@@ -88,6 +88,12 @@ describe('DocumentCardLargeComponent', () => {
     expect(fixture.nativeElement.textContent).toContain('8 pages')
   })
 
+  it('should lazy load the thumbnail', () => {
+    const thumbnail: HTMLImageElement =
+      fixture.nativeElement.querySelector('img.doc-img')
+    expect(thumbnail.getAttribute('loading')).toEqual('lazy')
+  })
+
   it('should trim content', () => {
     expect(component.contentTrimmed).toHaveLength(503) // includes ...
   })

src-ui/src/app/components/document-list/document-card-large/document-card-large.component.ts

@@ -1,4 +1,4 @@
-import { AsyncPipe } from '@angular/common'
+import { AsyncPipe, NgOptimizedImage } from '@angular/common'
 import {
   AfterViewInit,
   Component,
@@ -46,6 +46,7 @@ import { LoadingComponentWithPermissions } from '../../loading-component/loading
     TagComponent,
     CustomFieldDisplayComponent,
     AsyncPipe,
+    NgOptimizedImage,
     UsernamePipe,
     CorrespondentNamePipe,
     DocumentTypeNamePipe,

src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html

@@ -2,7 +2,7 @@
   <div class="card h-100 shadow-sm document-card" [class.placeholder-glow]="!document()" [class.card-selected]="selected()" (mouseleave)="mouseLeaveCard()">
     <div class="border-bottom doc-img-container rounded-top" (click)="this.toggleSelected.emit($event)" (dblclick)="dblClickDocument.emit(this)">
        @if (document()) {
-        <img class="card-img doc-img" [class.inverted]="getIsThumbInverted()" [src]="getThumbUrl()">
+        <img class="card-img doc-img" [class.inverted]="getIsThumbInverted()" [ngSrc]="getThumbUrl()" fill>
 
         <div class="border-end border-bottom bg-light py-1 px-2 document-card-check">
           <div class="form-check">

src-ui/src/app/components/document-list/document-card-small/document-card-small.component.scss

@@ -22,10 +22,14 @@
   }
 }
 
+.doc-img-container {
+  position: relative;
+  height: 180px;
+}
+
 .doc-img {
   object-fit: cover;
   object-position: top left;
-  height: 180px;
 }
 
 .document-card-check {

src-ui/src/app/components/document-list/document-card-small/document-card-small.component.spec.ts

@@ -61,6 +61,12 @@ describe('DocumentCardSmallComponent', () => {
     expect(fixture.nativeElement.textContent).toContain('12 pages')
   })
 
+  it('should lazy load the thumbnail', () => {
+    const thumbnail: HTMLImageElement =
+      fixture.nativeElement.querySelector('img.doc-img')
+    expect(thumbnail.getAttribute('loading')).toEqual('lazy')
+  })
+
   it('should display a document, limit tags to 5', () => {
     expect(fixture.nativeElement.textContent).toContain('Document 10')
     expect(

src-ui/src/app/components/document-list/document-card-small/document-card-small.component.ts

@@ -1,4 +1,4 @@
-import { AsyncPipe } from '@angular/common'
+import { AsyncPipe, NgOptimizedImage } from '@angular/common'
 import {
   AfterViewInit,
   Component,
@@ -46,6 +46,7 @@ import { LoadingComponentWithPermissions } from '../../loading-component/loading
     TagComponent,
     CustomFieldDisplayComponent,
     AsyncPipe,
+    NgOptimizedImage,
     UsernamePipe,
     CorrespondentNamePipe,
     DocumentTypeNamePipe,