feat(loading): Update loading ux for pages, thumbnails, preloaders (#…

…1355)
box · Apr 21, 2021 · fa5dd30 · fa5dd30
1 parent 5e35537
commit fa5dd30
Show file tree

Hide file tree

Showing 15 changed files with 106 additions and 144 deletions.
diff --git a/cypress.json b/cypress.json
@@ -1,6 +1,6 @@
 {
     "baseUrl": "http://localhost:8000/#",
-    "defaultCommandTimeout": 8000,
+    "defaultCommandTimeout": 15000,
     "fileServerFolder": "test",
     "fixturesFolder": "test/fixtures",
     "integrationFolder": "test/integration",

diff --git a/src/lib/_loading.scss b/src/lib/_loading.scss
@@ -1,12 +1,5 @@
 @import 'boxuiVariables';
 
-$spinner-size: 15px;
-
-@mixin spinner() {
-    background: url('icons/loading.gif') center no-repeat;
-    background-size: $spinner-size $spinner-size;
-}
-
 @keyframes box-crawler {
     0%,
     80%,
@@ -21,17 +14,6 @@ $spinner-size: 15px;
     }
 }
 
-@keyframes fadeIn {
-    0%,
-    50% {
-        opacity: 0;
-    }
-
-    100% {
-        opacity: 1;
-    }
-}
-
 .bp-loading-wrapper {
     position: absolute;
     top: 0;
@@ -100,27 +82,3 @@ $spinner-size: 15px;
         animation-delay: .2s;
     }
 }
-
-.bp .bp-doc.bp-doc-document,
-.bp .bp-doc.bp-doc-presentation {
-    // Overrides PDF.js loading spinner
-    .pdfViewer .page .loadingIcon {
-        @include spinner;
-    }
-}
-
-.bp-document-preload-wrapper,
-.bp-presentation-preload-wrapper {
-    .bp-preload-spinner {
-        @include spinner;
-
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        width: $spinner-size;
-        height: $spinner-size;
-        margin: auto;
-    }
-}
diff --git a/src/lib/constants.js b/src/lib/constants.js
@@ -29,7 +29,7 @@ export const CLASS_BOX_PREVIEW_OVERLAY_WRAPPER = 'bp-overlay-wrapper';
 export const CLASS_BOX_PREVIEW_PRELOAD = 'bp-preload';
 export const CLASS_BOX_PREVIEW_PRELOAD_CONTENT = 'bp-preload-content';
 export const CLASS_BOX_PREVIEW_PRELOAD_OVERLAY = 'bp-preload-overlay';
-export const CLASS_BOX_PREVIEW_PRELOAD_SPINNER = 'bp-preload-spinner';
+export const CLASS_BOX_PREVIEW_PRELOAD_PLACEHOLDER = 'bp-preload-placeholder';
 export const CLASS_BOX_PREVIEW_PRELOAD_WRAPPER_DOCUMENT = 'bp-document-preload-wrapper';
 export const CLASS_BOX_PREVIEW_PRELOAD_WRAPPER_PRESENTATION = 'bp-presentation-preload-wrapper';
 export const CLASS_BOX_PREVIEW_NOTIFICATION = 'bp-notification';

diff --git a/src/lib/icons/loading.gif b/src/lib/icons/loading.gif
diff --git a/src/lib/icons/loading_ghost.gif b/src/lib/icons/loading_ghost.gif
diff --git a/src/lib/viewers/BaseViewer.js b/src/lib/viewers/BaseViewer.js
@@ -88,9 +88,6 @@ class BaseViewer extends EventEmitter {
     /** @property {number} - Zoom scale, if zoomed */
     scale = 1;
 
-    /** @property {string} - Viewer-specific file loading icon */
-    fileLoadingIcon;
-
     /** @property {Object} - Viewer options */
     options;
 

diff --git a/src/lib/viewers/doc/DocPreloader.js b/src/lib/viewers/doc/DocPreloader.js
@@ -4,28 +4,26 @@ import {
     CLASS_BOX_PREVIEW_PRELOAD,
     CLASS_BOX_PREVIEW_PRELOAD_CONTENT,
     CLASS_BOX_PREVIEW_PRELOAD_OVERLAY,
-    CLASS_BOX_PREVIEW_PRELOAD_SPINNER,
+    CLASS_BOX_PREVIEW_PRELOAD_PLACEHOLDER,
     CLASS_BOX_PREVIEW_PRELOAD_WRAPPER_DOCUMENT,
     CLASS_INVISIBLE,
     CLASS_IS_TRANSPARENT,
     CLASS_PREVIEW_LOADED,
     PDFJS_CSS_UNITS,
+    PDFJS_HEIGHT_PADDING_PX,
     PDFJS_MAX_AUTO_SCALE,
     PDFJS_WIDTH_PADDING_PX,
-    PDFJS_HEIGHT_PADDING_PX,
 } from '../../constants';
 import { setDimensions, handleRepresentationBlobFetch } from '../../util';
 
 const EXIF_COMMENT_TAG_NAME = 'UserComment'; // Read EXIF data from 'UserComment' tag
 const EXIF_COMMENT_REGEX = /pdfWidth:([0-9.]+)pts,pdfHeight:([0-9.]+)pts,numPages:([0-9]+)/;
 
 const NUM_PAGES_DEFAULT = 2; // Default to 2 pages for preload if true number of pages cannot be read
-const NUM_PAGES_MAX = 500; // Don't show more than 500 placeholder pages
+const NUM_PAGES_MAX = 20;
 
 const ACCEPTABLE_RATIO_DIFFERENCE = 0.025; // Acceptable difference in ratio of PDF dimensions to image dimensions
 
-const SPINNER_HTML = `<div class="${CLASS_BOX_PREVIEW_PRELOAD_SPINNER}"></div>`;
-
 class DocPreloader extends EventEmitter {
     /** @property {Api} - Api layer used for XHR calls */
     api = new Api();
@@ -39,12 +37,12 @@ class DocPreloader extends EventEmitter {
     /** @property {HTMLElement} - Maximum auto-zoom scale */
     maxZoomScale = PDFJS_MAX_AUTO_SCALE;
 
-    /** @property {HTMLElement} - Preload overlay element */
-    overlayEl;
-
     /** @property {Object} - The EXIF data for the PDF */
     pdfData;
 
+    /** @property {HTMLElement} - Preload placeholder element */
+    placeholderEl;
+
     /** @property {HTMLElement} - Preload container element */
     preloadEl;
 
@@ -101,17 +99,17 @@ class DocPreloader extends EventEmitter {
                 this.wrapperEl.className = this.wrapperClassName;
                 this.wrapperEl.innerHTML = `
                 <div class="${CLASS_BOX_PREVIEW_PRELOAD} ${CLASS_INVISIBLE}">
-                    <img class="${CLASS_BOX_PREVIEW_PRELOAD_CONTENT}" src="${this.srcUrl}" />
-                    <div class="${CLASS_BOX_PREVIEW_PRELOAD_CONTENT} ${CLASS_BOX_PREVIEW_PRELOAD_OVERLAY}">
-                        ${SPINNER_HTML}
+                    <div class="${CLASS_BOX_PREVIEW_PRELOAD_PLACEHOLDER}">
+                        <img class="${CLASS_BOX_PREVIEW_PRELOAD_CONTENT}" src="${this.srcUrl}" />
+                        <div class="${CLASS_BOX_PREVIEW_PRELOAD_OVERLAY}"></div>
                     </div>
                 </div>
             `.trim();
 
                 this.containerEl.appendChild(this.wrapperEl);
+                this.placeholderEl = this.wrapperEl.querySelector(`.${CLASS_BOX_PREVIEW_PRELOAD_PLACEHOLDER}`);
                 this.preloadEl = this.wrapperEl.querySelector(`.${CLASS_BOX_PREVIEW_PRELOAD}`);
-                this.imageEl = this.preloadEl.querySelector(`img.${CLASS_BOX_PREVIEW_PRELOAD_CONTENT}`);
-                this.overlayEl = this.preloadEl.querySelector(`.${CLASS_BOX_PREVIEW_PRELOAD_OVERLAY}`);
+                this.imageEl = this.preloadEl.querySelector(`.${CLASS_BOX_PREVIEW_PRELOAD_CONTENT}`);
                 this.bindDOMListeners();
             });
     }
@@ -129,22 +127,17 @@ class DocPreloader extends EventEmitter {
             return;
         }
 
-        // Set image and overlay dimensions
-        setDimensions(this.imageEl, scaledWidth, scaledHeight);
-        setDimensions(this.overlayEl, scaledWidth, scaledHeight);
+        // Set initial placeholder dimensions
+        setDimensions(this.placeholderEl, scaledWidth, scaledHeight);
 
         // Add and scale correct number of placeholder elements
         for (let i = 0; i < numPages - 1; i += 1) {
             const placeholderEl = document.createElement('div');
-            placeholderEl.className = CLASS_BOX_PREVIEW_PRELOAD_CONTENT;
-            placeholderEl.innerHTML = SPINNER_HTML;
+            placeholderEl.className = CLASS_BOX_PREVIEW_PRELOAD_PLACEHOLDER;
             setDimensions(placeholderEl, scaledWidth, scaledHeight);
             this.preloadEl.appendChild(placeholderEl);
         }
 
-        // Hide the preview-level loading indicator
-        this.previewUI.hideLoadingIndicator();
-
         // Show preload element after content is properly sized
         this.preloadEl.classList.remove(CLASS_INVISIBLE);
 
@@ -292,7 +285,7 @@ class DocPreloader extends EventEmitter {
 
         const { scaledWidth, scaledHeight } = dimensionData;
         // Scale preload and placeholder elements
-        const preloadEls = this.preloadEl.getElementsByClassName(CLASS_BOX_PREVIEW_PRELOAD_CONTENT);
+        const preloadEls = this.preloadEl.getElementsByClassName(CLASS_BOX_PREVIEW_PRELOAD_PLACEHOLDER);
         for (let i = 0; i < preloadEls.length; i += 1) {
             setDimensions(preloadEls[i], scaledWidth, scaledHeight);
         }

diff --git a/src/lib/viewers/doc/Document.scss b/src/lib/viewers/doc/Document.scss
@@ -34,21 +34,28 @@
         }
     }
 
-    // Position preload content as if they were blank loading pages
+    .bp-preload-content,
+    .bp-preload-overlay {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+    }
+
     .bp-preload-content {
+        width: 100%;
+    }
+
+    .bp-preload-overlay {
+        background-color: rgba(255, 255, 255, .4);
+    }
+
+    .bp-preload-placeholder {
+        @include bp-LoadingGhost;
+
         position: relative;
-        display: block;
         margin: 15px auto 30px;
-        padding-left: 1px; // Slight padding to help image text align with real text
-        background-color: $white;
-
-        &.bp-preload-overlay {
-            position: absolute;
-            top: 0;
-            right: 0;
-            bottom: 0;
-            left: 0;
-            background-color: rgba(255, 255, 255, .4);
-        }
+        overflow: hidden;
     }
 }
diff --git a/src/lib/viewers/doc/Presentation.scss b/src/lib/viewers/doc/Presentation.scss
@@ -53,19 +53,28 @@
         }
     }
 
-    // Absolutely center preload content
-    .bp-preload-content {
+    .bp-preload-content,
+    .bp-preload-overlay,
+    .bp-preload-placeholder {
         position: absolute;
         top: 0;
         right: 0;
         bottom: 0;
-        left: 1px; // Slight padding to help image text align with real text
-        display: block;
-        margin: auto;
-        background-color: $white;
+        left: 0;
+    }
 
-        &.bp-preload-overlay {
-            background-color: rgba(255, 255, 255, .4);
-        }
+    .bp-preload-content {
+        width: 100%;
+    }
+
+    .bp-preload-overlay {
+        background-color: rgba(255, 255, 255, .4);
+    }
+
+    .bp-preload-placeholder {
+        @include bp-LoadingGhost;
+
+        margin: auto;
+        overflow: hidden;
     }
 }
diff --git a/src/lib/viewers/doc/PresentationPreloader.js b/src/lib/viewers/doc/PresentationPreloader.js
@@ -3,18 +3,10 @@ import { CLASS_INVISIBLE, CLASS_BOX_PREVIEW_PRELOAD_WRAPPER_PRESENTATION } from
 import { setDimensions } from '../../util';
 
 class PresentationPreloader extends DocPreloader {
-    /**
-     * @property {HTMLELement} - Maximum auto-zoom scale, set to 0 for no limit since presentation viewer doesn't
-     * have a maximum zoom scale and scales up to available viewport
-     */
+    /** @inheritdoc */
     maxZoomScale = 0;
 
-    /**
-     * [constructor]
-     *
-     * @param {PreviewUI} previewUI - UI instance
-     * @return {PresentationPreloader} PresentationPreloader instance
-     */
+    /** @inheritdoc */
     constructor(previewUI, options) {
         super(previewUI, options);
 
@@ -35,11 +27,8 @@ class PresentationPreloader extends DocPreloader {
             return;
         }
 
-        setDimensions(this.imageEl, scaledWidth, scaledHeight);
-        setDimensions(this.overlayEl, scaledWidth, scaledHeight);
-
-        // Hide the preview-level loading indicator
-        this.previewUI.hideLoadingIndicator();
+        // Set initial placeholder dimensions
+        setDimensions(this.placeholderEl, scaledWidth, scaledHeight);
 
         // Show preload element after content is properly sized
         this.preloadEl.classList.remove(CLASS_INVISIBLE);