From b0fed61a019074b700964be2b0ce7fc779894987 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Sat, 6 Feb 2021 14:28:26 -0800
Subject: [PATCH] Pre-load pdf contents

---
 .../document-card-small.component.html                |  6 +++---
 .../document-card-small.component.scss                |  5 +++++
 .../document-card-small.component.ts                  | 11 ++++++++++-
 3 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
index a6ac18b83..e689bfcbd 100644
--- a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
+++ b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
@@ -1,5 +1,5 @@
 <div class="col p-2 h-100">
-  <div class="card h-100 shadow-sm document-card" [class.card-selected]="selected">
+  <div class="card h-100 shadow-sm document-card" [class.card-selected]="selected" [class.popover-hidden]="popoverHidden">
     <div class="border-bottom doc-img-container" [class.doc-img-background-selected]="selected" (click)="this.toggleSelected.emit($event)">
       <img class="card-img doc-img rounded-top" [src]="getThumbUrl()">
 
@@ -48,10 +48,10 @@
           <ng-template #previewContent>
             <ng-container *ngIf="getContentType() == 'application/pdf'">
                 <div class="preview pdf-viewer-container" *ngIf="!useNativePdfViewer ; else nativePdfViewer">
-                  <div class="spinner-border spinner-border-sm" role="status">
+                  <div class="spinner-border text-primary spinner-border-sm" role="status">
                     <span class="sr-only">Loading...</span>
                   </div>
-                  <pdf-viewer [src]="previewUrl" [original-size]="false" [show-borders]="false" [show-all]="true" [render-text-mode]="2" (after-load-complete)="pdfPreviewLoaded($event)"></pdf-viewer>
+                  <pdf-viewer [src]="previewUrl" [original-size]="false" [show-borders]="false" [show-all]="true" [render-text-mode]="2"></pdf-viewer>
                 </div>
                 <ng-template #nativePdfViewer>
                     <object [data]="previewUrl | safe" type="application/pdf" class="preview" width="100%"></object>
diff --git a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.scss b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.scss
index ba3a180c7..089072135 100644
--- a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.scss
+++ b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.scss
@@ -52,3 +52,8 @@
     z-index: 0;
   }
 }
+
+.popover-hidden ::ng-deep .popover {
+  opacity: 0;
+  pointer-events: none;
+}
diff --git a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.ts b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.ts
index a19e19533..4725add10 100644
--- a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.ts
+++ b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.ts
@@ -37,6 +37,9 @@ export class DocumentCardSmallComponent implements OnInit {
 
   @ViewChild('popover') popover: NgbPopover
 
+  mouseOnPreview = false
+  popoverHidden = true
+
   metadata: PaperlessDocumentMetadata
 
   ngOnInit(): void {
@@ -81,10 +84,16 @@ export class DocumentCardSmallComponent implements OnInit {
   mouseEnterPreview() {
     this.mouseOnPreview = true
     if (!this.popover.isOpen()) {
+      // we're going to open but hide to pre-load content during hover delay
+      this.popover.open()
+      this.popoverHidden = true
       setTimeout(() => {
         if (this.mouseOnPreview) {
+          // show popover
+          this.popoverHidden = false
           this.showPreview.emit(this)
-          this.popover.open()
+        } else {
+          this.popover.close()
         }
       }, 600);
     }