From d922ec4d6e47b74a80e651b039de1754f9096b2d Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Wed, 2 Jul 2025 12:42:15 -0700
Subject: [PATCH] Better loading behavior / styling

---
 .../common/pdf-editor/pdf-editor.component.html          | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

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 2b1623c1f..9d9cc510b 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
@@ -54,10 +54,15 @@
         </div>
         <div class="pdf-viewer-container w-100" [class.selected]="p.selected">
           @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>
+            @if (!p.loaded) {
+              <div class="placeholder-glow w-100 h-100 z-10">
+                <span class="placeholder w-100 h-100"></span>
+              </div>
+            }
+            <pdf-viewer class="fade" [class.show]="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>
+              <span class="placeholder w-100 h-100"></span>
             </div>
           }
         </div>