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

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 {Promise} Promise to load bunch of images
+     */
+
+    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 => {

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')