From a3b6de99fd08c529f8d0fd90394c1d7da643084c Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Tue, 1 Jul 2025 22:02:00 -0700
Subject: [PATCH] Lazy loading

---
 .../common/pdf-editor/pdf-editor.component.html           | 8 +++++++-
 .../components/common/pdf-editor/pdf-editor.component.ts  | 2 ++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src-ui/src/app/components/common/pdf-editor/pdf-editor.component.html b/src-ui/src/app/components/common/pdf-editor/pdf-editor.component.html
index 30dace698..648bc1ce4 100644
--- a/src-ui/src/app/components/common/pdf-editor/pdf-editor.component.html
+++ b/src-ui/src/app/components/common/pdf-editor/pdf-editor.component.html
@@ -53,7 +53,13 @@
           </div>
         </div>
         <div class="pdf-viewer-container w-100" [class.selected]="p.selected">
-          <pdf-viewer [src]="pdfSrc" [page]="p.page" [rotation]="p.rotate" [original-size]="false" [show-all]="false" [render-text]="false"></pdf-viewer>
+          @defer (on viewport) {
+            <pdf-viewer [class.opacity-0]="!p.loaded" [src]="pdfSrc" [page]="p.page" [rotation]="p.rotate" [original-size]="false" [show-all]="false" [render-text]="false" (page-rendered)="p.loaded = true"></pdf-viewer>
+          } @placeholder {
+            <div class="placeholder-glow w-100 h-100 z-10">
+              <span class="placeholder w-100"></span>
+            </div>
+          }
         </div>
         @if (p.splitAfter) {
           <div class="split-after rounded position-absolute top-0 end-0 bg-dark text-uppercase text-center h-100 px-1 small fw-bold">&mdash; <span i18n>Split here</span> &mdash;</div>
diff --git a/src-ui/src/app/components/common/pdf-editor/pdf-editor.component.ts b/src-ui/src/app/components/common/pdf-editor/pdf-editor.component.ts
index 95f85a8e2..3b52c4947 100644
--- a/src-ui/src/app/components/common/pdf-editor/pdf-editor.component.ts
+++ b/src-ui/src/app/components/common/pdf-editor/pdf-editor.component.ts
@@ -17,6 +17,7 @@ interface PageOperation {
   rotate: number
   splitAfter: boolean
   selected?: boolean
+  loaded?: boolean
 }
 
 @Component({
@@ -51,6 +52,7 @@ export class PDFEditorComponent extends ConfirmDialogComponent {
       rotate: 0,
       splitAfter: false,
       selected: false,
+      loaded: false,
     }))
   }