From d77cb8ec008d2f4decae2bca74550d55765fa618 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Sun, 13 Oct 2024 20:52:06 -0700
Subject: [PATCH] Make this better

---
 .../document-detail/document-detail.component.html  |  9 +++++----
 .../document-detail/document-detail.component.scss  | 13 ++++++++++++-
 .../document-detail/document-detail.component.ts    |  8 ++++++++
 3 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/src-ui/src/app/components/document-detail/document-detail.component.html b/src-ui/src/app/components/document-detail/document-detail.component.html
index 668035ea2..0e52096fd 100644
--- a/src-ui/src/app/components/document-detail/document-detail.component.html
+++ b/src-ui/src/app/components/document-detail/document-detail.component.html
@@ -350,15 +350,16 @@
 </ng-template>
 
 <ng-template #previewContent>
-  @if (!metadata) {
-    <img [src]="thumbUrl | safeUrl" class="thumb-preview" width="100%" height="auto" alt="Document loading..." i18n-alt />
-    <div class="position-absolute top-0 left-0 p-2 d-flex align-items-center justify-content-center">
+  <div class="thumb-preview position-absolute pe-none" [class.fade]="previewLoaded">
+    <img [src]="thumbUrl | safeUrl" class="" width="100%" height="auto" alt="Document loading..." i18n-alt />
+    <div class="position-absolute top-0 start-0 m-2 p-2 d-flex align-items-center justify-content-center">
       <div>
         <div class="spinner-border spinner-border-sm me-2" role="status"></div>
         <ng-container i18n>Loading...</ng-container>
       </div>
     </div>
-  } @else {
+  </div>
+  @if (metadata) {
     @switch (archiveContentRenderType) {
       @case (ContentRenderType.PDF) {
         @if (!useNativePdfViewer) {
diff --git a/src-ui/src/app/components/document-detail/document-detail.component.scss b/src-ui/src/app/components/document-detail/document-detail.component.scss
index 2c561b163..3abd069de 100644
--- a/src-ui/src/app/components/document-detail/document-detail.component.scss
+++ b/src-ui/src/app/components/document-detail/document-detail.component.scss
@@ -64,5 +64,16 @@ textarea.rtl {
 }
 
 .thumb-preview {
-  border: 8px solid var(--bs-secondary);
+  top: 0;
+  left: calc(.5 * var(--bs-gutter-x));
+  height: calc(100vh - 160px);
+  overflow: hidden;
+  background-color: gray;
+  padding: 10px 8px; // border
+  width: calc(100% - var(--bs-gutter-x));
+  z-index: 1000;
+
+  > div {
+    mix-blend-mode: difference;
+  }
 }
diff --git a/src-ui/src/app/components/document-detail/document-detail.component.ts b/src-ui/src/app/components/document-detail/document-detail.component.ts
index e51ed4dbf..f77a2c59f 100644
--- a/src-ui/src/app/components/document-detail/document-detail.component.ts
+++ b/src-ui/src/app/components/document-detail/document-detail.component.ts
@@ -136,6 +136,7 @@ export class DocumentDetailComponent
   previewText: string
   downloadUrl: string
   downloadOriginalUrl: string
+  previewLoaded: boolean = false
 
   correspondents: Correspondent[]
   documentTypes: DocumentType[]
@@ -538,6 +539,9 @@ export class DocumentDetailComponent
       .subscribe({
         next: (result) => {
           this.metadata = result
+          if (this.archiveContentRenderType !== ContentRenderType.PDF) {
+            this.previewLoaded = true
+          }
         },
         error: (error) => {
           this.metadata = {} // allow display to fallback to <object> tag
@@ -904,11 +908,15 @@ export class DocumentDetailComponent
   pdfPreviewLoaded(pdf: PDFDocumentProxy) {
     this.previewNumPages = pdf.numPages
     if (this.password) this.requiresPassword = false
+    setTimeout(() => {
+      this.previewLoaded = true
+    }, 300)
   }
 
   onError(event) {
     if (event.name == 'PasswordException') {
       this.requiresPassword = true
+      this.previewLoaded = true
     }
   }