From 47f24cd27bf524b9738129abc83bd68f4bc2aef4 Mon Sep 17 00:00:00 2001
From: Artur Adib <arturadib@gmail.com>
Date: Tue, 31 Jan 2012 16:20:09 -0500
Subject: [PATCH] Show animated loading icon if page renders slow

---
 web/images/loading-icon.gif | Bin 0 -> 2545 bytes
 web/viewer.css              |  14 +++++++++++++
 web/viewer.js               |  39 +++++++++++++++++++++++++-----------
 3 files changed, 41 insertions(+), 12 deletions(-)
 create mode 100644 web/images/loading-icon.gif

diff --git a/web/images/loading-icon.gif b/web/images/loading-icon.gif
new file mode 100644
index 0000000000000000000000000000000000000000..1c72ebb554be018511ae972c3f2361dff02dce02
GIT binary patch
literal 2545
zcma*pX;2es8VB%~zPr=ibVMCx-JQ^BhLDAsK)^**h(ZDp9YGuzZ%~j!<xu1hb_^th
zKn@N$1VO{01`9<%h4l=A4vwQT&bVsTZjFw9P-l<Qoe!f`yKYB!tM&t1HSgzstKVP0
z|L5r^POpntls*s413v-q_U&5$!0p?&-@JMA=+UFor%yk7_RQgMOifL7c6L5^@WADA
zx!vwpuU-`w7n{xIv9Yo2>}+w%FI;|aC7){7CdVvG)P{bng1y9Te*f}~*`1kQl$jwb
z$tlW~rRS!X?#xfm_&6tTdp_`cjgYwbRFLNdo<jokluYIjz_QHsEcJTHQ)iQD!j=@a
z(6q$rjW28VVTg$%mdEiR9l+h)kxeZ7LLaM|)R`u{(l?gI8P$gSzw(<Tzh500Jb!LY
z)tcOfHs7@?s*FkqB}o)AGDR3;w$#}im8LfMi#8sk(TqKtIw%ySI|7SZv7^B})CzJI
z$48Ci9Z$;Iv_*-~RzRIvGo+^JN@zSzAI;FWZ=P`#3lo<PVYzC*nFyyn1h+~gAY}{s
zRIc7aS??2DV&8Ocs>JCN$S-yhg`ZnC-yvedRSmOh%;Y`Gl6bY$Z-}#C=#F4%9!I1b
zWQ~f+9P?;vhCxWwlwl=lrWG|7IYo;{jjmzJ5R9?f>n%<BEwzWU%!e6>-d@>kLINUc
z4wM5dAO;kq<$}Dk{2-u0$I6@2N}&cUx9nmV1dYc8jfC}%=F9WCg^OQK9C6poh#2!A
z3^EU*UFZvS^)?bu3T?J;@Ahb~%I?+@4!l5!*TjC}GIslNan-RCrrd~PdHYnNLJ<pJ
zKX>k+m&`$Y+NV(e>CCu%R#_8GqY4cv#j`#uRWdsg9DxWy(?oOvgCU}&@jy%c!H&-Q
zqXJxajAtmQRoRa9V-RFXXh-bK*;Fum{BjpkYQGX~i@OZ^<z1=R^!fUZypHVq2|@OU
zpzGFe_uqWfc3n9mX264y5h4a#H(LmC^(HB{HQA=Vx!ZGpbpXGBbvO37iL1a0SN%~I
zLXG%13m@1sc-Xj%W4L?1DU+oU1=n7NEsBU(uxd?=TjTWsOJ*uzwT8*j*9Br!02Qt0
zyroia&R*ZBIndH(b#_~WkVCekW;uf#wPFLc@agb=5OiXo|Lh=d(H=Ux?<ByY2WvHd
z&>Dx0n&H}kvGKqQ?w(6iGXu_g08T|_hp#ZvFzIwKF*a=oMJ~3UGAjZ?g}GOxm44td
zXoyYrU*I=y*vHv89hkYH(v5R#wc)BC3dZJKb3K)f>zaM3%JP(mpecViP0eKKYf3zy
z->jx_mc?mCtPEvCQ?uppk?eLJt}_IR7giW%Jr)RyI!+E-voIs*lXI*z`GQc_&D#X(
z{6G};HPYj6O|$lXxBJeDaweqa{4L=tOZCjTI^&UOxXg})LRG_cr^B9Rqt(i5ORbQX
zq`_xCRsH>xEYY%&*Nyi#{S_JZNlTm#K56`RI%7^amom;*h90Si&g1<Q42_J{H5#6^
z1j3mHQ&?%)wrGOHagtzauv)cP8`bUYOtZYCY=wl~>CfaFV3D|a!`3Y-GKKbL*KSbl
z>I96`TR@CqPJl(>QqB~RvK~-U)`e`l4LIqj+IU^~yyIe*|BRVB>4Bup%j{tLdKz4j
zY^<8P8m~GRGz*yv0&-RJE+-keJ+%m3wNeopzsltWd->eWmBVwUr)p<cFSpSfSI>X`
zK~CD<;~Z*Uy3W`3+MrEYxm5qYQ!z%YI;y7DTG`UVH0;@{M{!B&id_}3DBQ?zsotuR
zEGLdRx25nLm%-wjlnEi;-aN_1S7???rO~WgA67jjr&(vRa3y$u#kq<Z1%n>JbeKnw
z{!T!1li9>M+sJ6AUe+*9d}2uG<Al`U$E1o=q^Ub^f!W{a5bViA_fk7CRIpv+>jhzd
z|L1Rtp8uTGYyZoQ*`DS^m2dw-X{a)l+3m?ncvn^+O>)hdd3(hMtlhkRGns{<8c0I!
zDDjpmwtj?@!6kA|iu3q+Ai;@JR+<V}md7p@QDWY{loNQf|7XI@v~xv6`7;{c#p%C>
zfk+ln&YFC{4bhK6IxVgLs4W%^8Lk`qzWU*L>yq0A3;l}{!wKZ!ue)C)SKI)9dl1hl
zhIRLV@8E}rwvE{gX(}$f6x*k)_`*<J8)s4#$the)>Ijt1=EU-Ls6-(phomeQBgtUs
z5Xz~Cd*nE)Ac!0i4ep}Z1AugMB(&F?)#CU{Qc{Sp^vKsdL}vRB30H+Bbzrn`M##H3
z{W8dc_mDroEE+p8_}mnJtzZ4!RNe)zhB)Ds;S57nYSJxtek>^~&(7B+N5MPf2+2xx
z5Dl&4X|c@f{Kd|z1r+N|$DmsoVp*3yOdxT^J^-VAk)Z@$4^XrPrFP-Co+MXZ+KJ(W
z{JNYvraLLWA;&tRhIKOvhW|HC|L-dLvAUF(MG0(Nl?4tB{RzN7I(}Cb%hwN{crFC8
zji#aJElKvDFV+<nM6h%jvlC;)yQnfP+-ENdg>&VI1V?oUMA>*kto0^;3W8FQBSZ|{
z$v~TqE=(8DZa^i$^oht&h};P1N&wMXorKh*Z68gPV&ouy>%f36Oqkwemyeas$Qbz#
zV?7Jy%o7KY6^I=P@eCji%W`o5sf(5hySYo9$l4e2`(hIV_?=H-#R6}0$WVA|*(K@3
z<A|axbLZ@~f}p0ti9^k+-n>=5?@RlcLh(meW%A4)hGzcvEpm(_w?>zhL*i&s9$2>r
zAtk{8Cia|+Y+V!uX9BtpXoF%lswuRKsM!pSs!?<U-NiryhtbPpT>yhlCy!269K0|b
M?FSZn2B>%I-}ej|s{jB1

literal 0
HcmV?d00001

diff --git a/web/viewer.css b/web/viewer.css
index e355f7fc2..65f2928fa 100644
--- 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 dd16b0282..f319fcdc1 100644
--- 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);
 
-    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();
+    // Rendering area
 
-        cache.push(this);
-        callback();
-      }).bind(this), textLayer
-    );
+    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) {
+      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);