From 5e06987102ec9707621f674ccd18c397c72db692 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Wed, 22 Jul 2026 10:15:56 -0700
Subject: [PATCH] Chore (beta): mark first batch of thumbnails as priorty for
 LCP warning (#13196)

---
 .../document-card-large.component.html                   | 6 +++++-
 .../document-card-large.component.spec.ts                | 9 +++++++++
 .../document-card-large/document-card-large.component.ts | 1 +
 .../document-card-small.component.html                   | 6 +++++-
 .../document-card-small.component.spec.ts                | 9 +++++++++
 .../document-card-small/document-card-small.component.ts | 1 +
 .../document-list/document-list.component.html           | 6 ++++--
 7 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html
index facd0ca27..30acc44e2 100644
--- a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html
+++ b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html
@@ -2,7 +2,11 @@
   <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 [ngSrc]="getThumbUrl()" fill class="card-img doc-img border-end rounded-start" [class.inverted]="getIsThumbInverted()">
+        @if (priority()) {
+          <img [ngSrc]="getThumbUrl()" fill priority class="card-img doc-img border-end rounded-start" [class.inverted]="getIsThumbInverted()" alt="{{ document().title | documentTitle }} thumbnail" i18n-alt>
+        } @else {
+          <img [ngSrc]="getThumbUrl()" fill class="card-img doc-img border-end rounded-start" [class.inverted]="getIsThumbInverted()" alt="{{ document().title | documentTitle }} thumbnail" i18n-alt>
+        }
 
         <div class="border-end border-bottom bg-light document-card-check">
           <div class="form-check">
diff --git a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.spec.ts b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.spec.ts
index 421754618..4737f5337 100644
--- a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.spec.ts
+++ b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.spec.ts
@@ -94,6 +94,15 @@ describe('DocumentCardLargeComponent', () => {
     expect(thumbnail.getAttribute('loading')).toEqual('lazy')
   })
 
+  it('should prioritize the thumbnail when requested', () => {
+    fixture.componentRef.setInput('priority', true)
+    fixture.detectChanges()
+    const thumbnail: HTMLImageElement =
+      fixture.nativeElement.querySelector('img.doc-img')
+    expect(thumbnail.getAttribute('loading')).toEqual('eager')
+    expect(thumbnail.getAttribute('fetchpriority')).toEqual('high')
+  })
+
   it('should trim content', () => {
     expect(component.contentTrimmed).toHaveLength(503) // includes ...
   })
diff --git a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.ts b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.ts
index 9304d1168..d0ff0ea3e 100644
--- a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.ts
+++ b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.ts
@@ -66,6 +66,7 @@ export class DocumentCardLargeComponent
   private documentService = inject(DocumentService)
   settingsService = inject(SettingsService)
   readonly selected = input(false)
+  readonly priority = input(false)
   readonly displayFields = input<string[]>(
     DEFAULT_DISPLAY_FIELDS.map((f) => f.id)
   )
diff --git a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
index 7a0a507e6..4e55e4936 100644
--- a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
+++ b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
@@ -2,7 +2,11 @@
   <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()" [ngSrc]="getThumbUrl()" fill>
+        @if (priority()) {
+          <img class="card-img doc-img" [class.inverted]="getIsThumbInverted()" [ngSrc]="getThumbUrl()" fill priority alt="{{ document().title | documentTitle }} thumbnail" i18n-alt>
+        } @else {
+          <img class="card-img doc-img" [class.inverted]="getIsThumbInverted()" [ngSrc]="getThumbUrl()" fill alt="{{ document().title | documentTitle }} thumbnail" i18n-alt>
+        }
 
         <div class="border-end border-bottom bg-light py-1 px-2 document-card-check">
           <div class="form-check">
diff --git a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.spec.ts b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.spec.ts
index c6127494b..88f143d71 100644
--- a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.spec.ts
+++ b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.spec.ts
@@ -67,6 +67,15 @@ describe('DocumentCardSmallComponent', () => {
     expect(thumbnail.getAttribute('loading')).toEqual('lazy')
   })
 
+  it('should prioritize the thumbnail when requested', () => {
+    fixture.componentRef.setInput('priority', true)
+    fixture.detectChanges()
+    const thumbnail: HTMLImageElement =
+      fixture.nativeElement.querySelector('img.doc-img')
+    expect(thumbnail.getAttribute('loading')).toEqual('eager')
+    expect(thumbnail.getAttribute('fetchpriority')).toEqual('high')
+  })
+
   it('should display a document, limit tags to 5', () => {
     expect(fixture.nativeElement.textContent).toContain('Document 10')
     expect(
diff --git a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.ts b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.ts
index 633ad3e2e..a0e8bd2ab 100644
--- a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.ts
+++ b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.ts
@@ -66,6 +66,7 @@ export class DocumentCardSmallComponent
   private documentService = inject(DocumentService)
   settingsService = inject(SettingsService)
   readonly selected = input(false)
+  readonly priority = input(false)
   readonly document = input<Document>(undefined)
   readonly displayFields = input<string[]>(
     DEFAULT_DISPLAY_FIELDS.map((f) => f.id)
diff --git a/src-ui/src/app/components/document-list/document-list.component.html b/src-ui/src/app/components/document-list/document-list.component.html
index f29d2dca8..cf2088e78 100644
--- a/src-ui/src/app/components/document-list/document-list.component.html
+++ b/src-ui/src/app/components/document-list/document-list.component.html
@@ -164,9 +164,10 @@
   } @else {
     @if (list.displayMode === DisplayMode.LARGE_CARDS) {
       <div>
-        @for (d of list.documents; track d.id) {
+        @for (d of list.documents; track d.id; let i = $index) {
           <pngx-document-card-large
             [selected]="list.isSelected(d)"
+            [priority]="i < 2"
             (toggleSelected)="toggleSelected(d, $event)"
             (dblClickDocument)="openDocumentDetail(d)"
             [document]="d"
@@ -398,9 +399,10 @@
     }
     @if (list.displayMode === DisplayMode.SMALL_CARDS) {
       <div class="row row-cols-paperless-cards">
-        @for (d of list.documents; track d.id) {
+        @for (d of list.documents; track d.id; let i = $index) {
           <pngx-document-card-small class="p-0"
             [selected]="list.isSelected(d)"
+            [priority]="i < 6"
             (toggleSelected)="toggleSelected(d, $event)"
             (dblClickDocument)="openDocumentDetail(d)"
             [document]="d"