fix(images): Show UI earlier for large multi-page images (#1061)

* fix(images): Show UI earlier for large multi-page images
box · Aug 29, 2019 · a41eba7 · a41eba7
1 parent da531a9
commit a41eba7
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 6 deletions.
diff --git a/src/lib/viewers/image/MultiImageViewer.js b/src/lib/viewers/image/MultiImageViewer.js
@@ -23,6 +23,7 @@ class MultiImageViewer extends ImageBaseViewer {
         this.handlePageChangeFromScroll = this.handlePageChangeFromScroll.bind(this);
         this.handleMultiImageDownloadError = this.handleMultiImageDownloadError.bind(this);
         this.handleAssetAndRepLoad = this.handleAssetAndRepLoad.bind(this);
+        this.finishLoading = this.finishLoading.bind(this);
     }
 
     /**
@@ -90,6 +91,17 @@ class MultiImageViewer extends ImageBaseViewer {
             .catch(this.handleAssetError);
     }
 
+    /**
+     * Handles the load event for the first image.
+     *
+     * @return {void}
+     */
+
+    finishLoading() {
+        super.finishLoading();
+        this.setOriginalImageSizes();
+    }
+
     /**
      * Loads the multipart image for viewing
      *
@@ -151,8 +163,14 @@ class MultiImageViewer extends ImageBaseViewer {
         this.singleImageEls[index].src = imageUrl;
     }
 
-    /** @inheritdoc */
-    setOriginalImageSize() {
+    /**
+     * Sets the original image width and height on the img element. Can be removed when
+     * naturalHeight and naturalWidth attributes work correctly in IE 11.
+     *
+     * @protected
+     * @return {Promise} A promise that is resolved if the original image dimensions were set.
+     */
+    setOriginalImageSizes() {
         const promises = [];
 
         this.singleImageEls.forEach(imageEl => {

diff --git a/src/lib/viewers/image/__tests__/MultiImageViewer-test.js b/src/lib/viewers/image/__tests__/MultiImageViewer-test.js
@@ -157,7 +157,7 @@ describe('lib/viewers/image/MultiImageViewer', () => {
                 .catch(() => {});
         });
 
-        it('should make the images invisible', () => {
+        it('should ensure load timer is started', () => {
             sandbox.stub(multiImage, 'startLoadTimer');
             return multiImage
                 .load('file/100/content/{page}.png')
@@ -232,19 +232,19 @@ describe('lib/viewers/image/MultiImageViewer', () => {
         });
     });
 
-    describe('setOriginalImageSize()', () => {
+    describe('setOriginalImageSizes()', () => {
         beforeEach(() => {
             multiImage.singleImageEls = [stubs.singleImageEl, stubs.singleImageEl, stubs.singleImageEl];
         });
 
         it('should return a promise', () => {
-            const promise = multiImage.setOriginalImageSize();
+            const promise = multiImage.setOriginalImageSizes();
             expect(promise).to.be.a('Promise');
         });
 
         it('should return a promise that resolves after each image has a proper size', done => {
             // We've overridden super.setOriginalImageSize() to resolve immediately
-            multiImage.setOriginalImageSize().then(() => {
+            multiImage.setOriginalImageSizes().then(() => {
                 done();
             });
         });