From b4a6d48963e18440e4c7b5f61d1f7204edebe175 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Fri, 27 Sep 2019 00:06:19 -0400
Subject: fixed loading of pdfs to show indicator

---
 src/client/views/nodes/PDFBox.scss |  2 +-
 src/client/views/pdf/PDFViewer.tsx | 16 ++++++++++++++--
 2 files changed, 15 insertions(+), 3 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/PDFBox.scss b/src/client/views/nodes/PDFBox.scss
index 69c4397aa..2917c81cb 100644
--- a/src/client/views/nodes/PDFBox.scss
+++ b/src/client/views/nodes/PDFBox.scss
@@ -1,6 +1,6 @@
 .pdfBox-cont,
 .pdfBox-cont-interactive {
-    display: flex;
+    display: inline-block;
     flex-direction: row;
     height: 100%;
     width:100%;
diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx
index 7ffe19ff5..058e94f77 100644
--- a/src/client/views/pdf/PDFViewer.tsx
+++ b/src/client/views/pdf/PDFViewer.tsx
@@ -68,6 +68,7 @@ export class PDFViewer extends React.Component<IViewerProps> {
     @observable private _marqueeWidth: number = 0;
     @observable private _marqueeHeight: number = 0;
     @observable private _marqueeing: boolean = false;
+    @observable private _showWaiting = true;
 
     public pdfViewer: any;
     private _isChildActive = false;
@@ -167,11 +168,10 @@ export class PDFViewer extends React.Component<IViewerProps> {
         }
     }
 
-
     @action
     setupPdfJsViewer = () => {
         document.addEventListener("pagesinit", () => this.pdfViewer.currentScaleValue = 1);
-        //  document.addEventListener("pagerendered", () => console.log("rendered")); // bcz: works, but not needed except to debug
+        document.addEventListener("pagerendered", action(() => this._showWaiting = false));
         var pdfLinkService = new PDFJSViewer.PDFLinkService();
         let pdfFindController = new PDFJSViewer.PDFFindController({
             linkService: pdfLinkService,
@@ -622,6 +622,18 @@ export class PDFViewer extends React.Component<IViewerProps> {
                 ContainingCollectionDoc={this.props.ContainingCollectionView && this.props.ContainingCollectionView.props.Document}
                 chromeCollapsed={true}>
             </CollectionFreeFormView>
+            {this._showWaiting ? <img
+                style={{
+                    width: "100%",
+                    height: "100%",
+                    top: 0,
+                    left: 0,
+                    transition: "0.4s opacity ease",
+                    opacity: 0.7,
+                    position: "absolute",
+                    zIndex: 10
+                }}
+                src={"/assets/loading.gif"}></img> : (null)}
         </div >);
     }
 }
-- 
cgit v1.2.3-70-g09d2