Show animated loading icon if page renders slow

diff --git a/web/images/loading-icon.gif b/web/images/loading-icon.gif
new file mode 100644 (file)
index 0000000..1c72ebb
Binary files /dev/null and b/web/images/loading-icon.gif differ

diff --git a/web/viewer.css b/web/viewer.css
index e355f7fc246cf3cb8c3a360a475c9cc3708a2060..65f2928fa6d0cbb3a8a0eb3f1ac280ca784fdd1c 100644 (file)
--- a/web/viewer.css
+++ b/web/viewer.css
@@ -235,6 +235,20 @@ canvas {
   -webkit-box-shadow: 0px 2px 10px #ff0;
 }
 
+.loadingIcon {
+  position: absolute;
+  display: none;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background: url('images/loading-icon.gif') center no-repeat; */
+}
+
+.loadingIcon.show {
+  display: block;
+}
+
 .textLayer {
   position: absolute;
   left: 0;

diff --git a/web/viewer.js b/web/viewer.js
index dd16b02820bb58b2dbfc15b711ad09c45fc43855..f319fcdc1cb3036aacb55fbc31fad57aa26d9f87 100644 (file)
--- a/web/viewer.js
+++ b/web/viewer.js
@@ -790,6 +790,10 @@ var PageView = function pageView(container, content, id, pageWidth, pageHeight,
     div.appendChild(canvas);
     this.canvas = canvas;
 
+    var loadingIconDiv = document.createElement('div');
+    loadingIconDiv.className = 'loadingIcon';
+    div.appendChild(loadingIconDiv);
+
     var textLayerDiv = null;
     if (!PDFJS.disableTextLayer) {
       textLayerDiv = document.createElement('div');
@@ -809,19 +813,30 @@ var PageView = function pageView(container, content, id, pageWidth, pageHeight,
     ctx.restore();
     ctx.translate(-this.x * scale, -this.y * scale);
 
+    // Rendering area
+
+    var self = this;
+
+    // Display loading icon if page hasn't finished rendering after XXXX ms
+    var loadingTimer = setTimeout(function loadingTimerCallback() {
+      loadingIconDiv.classList.add('show');
+    }, 1000);
+
     stats.begin = Date.now();
-    this.content.startRendering(ctx,
-      (function pageViewDrawCallback(error) {
-        if (error)
-          PDFView.error('An error occurred while rendering the page.', error);
-        this.updateStats();
-        if (this.onAfterDraw)
-          this.onAfterDraw();
-
-        cache.push(this);
-        callback();
-      }).bind(this), textLayer
-    );
+    this.content.startRendering(ctx, function pageViewDrawCallback(error) {
+      clearTimeout(loadingTimer);
+      loadingIconDiv.classList.remove('show');
+
+      if (error)
+        PDFView.error('An error occurred while rendering the page.', error);
+
+      self.updateStats();
+      if (self.onAfterDraw)
+        self.onAfterDraw();
+
+      cache.push(self);
+      callback();
+    }, textLayer);
 
     setupAnnotations(this.content, this.scale);
     div.setAttribute('data-loaded', true);