From 5b042deede2d00f56d78b86fcad2fe823660a89e Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Thu, 10 Oct 2024 20:00:04 -0700
Subject: [PATCH] Trying this out

---
 .../document-detail/document-detail.component.html           | 5 +++--
 .../document-detail/document-detail.component.scss           | 4 ++++
 .../components/document-detail/document-detail.component.ts  | 2 ++
 3 files changed, 9 insertions(+), 2 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 f4f189a67..668035ea2 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,8 +350,9 @@
 </ng-template>
 
 <ng-template #previewContent>
-  @if (!document) {
-    <div class="w-100 h-100 d-flex align-items-center justify-content-center">
+  @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>
         <div class="spinner-border spinner-border-sm me-2" role="status"></div>
         <ng-container i18n>Loading...</ng-container>
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 860c5722c..2c561b163 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
@@ -62,3 +62,7 @@ textarea.rtl {
   height: 100%;
   object-fit: contain;
 }
+
+.thumb-preview {
+  border: 8px solid var(--bs-secondary);
+}
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 3ed6703c0..e51ed4dbf 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
@@ -132,6 +132,7 @@ export class DocumentDetailComponent
   title: string
   titleSubject: Subject<string> = new Subject()
   previewUrl: string
+  thumbUrl: string
   previewText: string
   downloadUrl: string
   downloadOriginalUrl: string
@@ -338,6 +339,7 @@ export class DocumentDetailComponent
               }`
             },
           })
+          this.thumbUrl = this.documentsService.getThumbUrl(documentId)
           return this.documentsService.get(documentId)
         })
       )