Trying this out

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>

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);
+}

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)
         })
       )