Chore: Replace loading doc loading animation with a GIF (#923)

src/lib/_loading.scss

@@ -1,5 +1,12 @@
 @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%,
@@ -109,45 +116,24 @@
     }
 }
 
-@keyframes bp-spinner {
-    0% {
-        transform: translate(-50%, -50%) rotate(0deg);
-    }
-
-    100% {
-        transform: translate(-50%, -50%) rotate(360deg);
+.bp .bp-doc.bp-doc-document {
+    // Overrides PDF.js loading spinner
+    .pdfViewer .page .loadingIcon {
+        @include spinner;
     }
 }
 
-.bp-spinner div,
-.bp-spinner div::after {
-    border: 25px solid #0061d5;
-    border-radius: 50%;
-    border-top-color: transparent;
-    height: 170px;
-    position: absolute;
-    width: 170px;
-}
-
-.bp-spinner div {
-    animation: bp-spinner 1s linear infinite;
-    left: 100px;
-    top: 100px;
-}
-
-.bp-spinner div::after {
-    transform: rotate(90deg);
-}
-
-// Center spinner horizontally and vertically within container
-.bp-spinner {
-    bottom: 0;
-    height: 30px;
-    left: 0;
-    margin: auto;
-    position: absolute;
-    right: 0;
-    top: 0;
-    transform: translate(-15px, -15px) scale(.15) translate(15px, 15px);
-    width: 30px;
+.bp-document-preload-wrapper {
+    .bp-preload-spinner {
+        @include spinner;
+
+        bottom: 0;
+        height: $spinner-size;
+        left: 0;
+        margin: auto;
+        position: absolute;
+        right: 0;
+        top: 0;
+        width: $spinner-size;
+    }
 }

src/lib/constants.js

@@ -26,6 +26,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_WRAPPER_DOCUMENT = 'bp-document-preload-wrapper';
 export const CLASS_BOX_PREVIEW_PRELOAD_WRAPPER_PRESENTATION = 'bp-presentation-preload-wrapper';
 export const CLASS_BOX_PREVIEW_PROGRESS_BAR = 'bp-progress-bar';
@@ -47,7 +48,6 @@ export const CLASS_IS_SELECTABLE = 'bp-is-selectable';
 export const CLASS_IS_BUFFERING = 'bp-is-buffering';
 export const CLASS_DARK = 'bp-dark';
 export const CLASS_CRAWLER = 'bp-crawler';
-export const CLASS_SPINNER = 'bp-spinner';
 
 export const SELECTOR_BOX_PREVIEW_CONTAINER = `.${CLASS_BOX_PREVIEW_CONTAINER}`;
 export const SELECTOR_BOX_PREVIEW = `.${CLASS_BOX_PREVIEW}`;

src/lib/viewers/doc/DocBaseViewer.js

@@ -13,7 +13,6 @@ import {
     CLASS_CRAWLER,
     CLASS_HIDDEN,
     CLASS_IS_SCROLLABLE,
-    CLASS_SPINNER,
     DOC_STATIC_ASSETS_VERSION,
     PERMISSION_DOWNLOAD,
     PRELOAD_REP_NAME,
@@ -813,16 +812,6 @@ class DocBaseViewer extends BaseViewer {
         // Do not disable create object URL in IE11 or iOS Chrome - pdf.js issues #3977 and #8081 are
         // not applicable to Box's use case and disabling causes performance issues
         PDFJS.disableCreateObjectURL = false;
-
-        // Customize pdf.js loading icon. We modify the prototype of PDFPageView to get around directly modifying
-        // pdf_viewer.js
-        const resetFunc = PDFJS.PDFPageView.prototype.reset;
-        PDFJS.PDFPageView.prototype.reset = function reset(...args) {
-            resetFunc.bind(this)(args);
-            this.loadingIconDiv.classList.add(CLASS_SPINNER);
-            this.loadingIconDiv.setAttribute('data-testid', 'page-loading-indicator');
-            this.loadingIconDiv.innerHTML = '<div></div>';
-        };
     }
 
     /**

src/lib/viewers/doc/DocPreloader.js

@@ -3,11 +3,11 @@ import {
     CLASS_BOX_PREVIEW_PRELOAD,
     CLASS_BOX_PREVIEW_PRELOAD_CONTENT,
     CLASS_BOX_PREVIEW_PRELOAD_OVERLAY,
+    CLASS_BOX_PREVIEW_PRELOAD_SPINNER,
     CLASS_BOX_PREVIEW_PRELOAD_WRAPPER_DOCUMENT,
     CLASS_INVISIBLE,
     CLASS_IS_TRANSPARENT,
     CLASS_PREVIEW_LOADED,
-    CLASS_SPINNER,
     PDFJS_CSS_UNITS,
     PDFJS_MAX_AUTO_SCALE,
     PDFJS_WIDTH_PADDING_PX,
@@ -23,7 +23,7 @@ const NUM_PAGES_MAX = 500; // Don't show more than 500 placeholder pages
 
 const ACCEPTABLE_RATIO_DIFFERENCE = 0.025; // Acceptable difference in ratio of PDF dimensions to image dimensions
 
-const SPINNER_HTML = `<div class="${CLASS_SPINNER}"><div></div></div>`;
+const SPINNER_HTML = `<div class="${CLASS_BOX_PREVIEW_PRELOAD_SPINNER}"></div>`;
 
 class DocPreloader extends EventEmitter {
     /** @property {HTMLElement} - Viewer container */

src/lib/viewers/doc/__tests__/DocBaseViewer-test.js

@@ -1374,12 +1374,6 @@ describe('src/lib/viewers/doc/DocBaseViewer', () => {
             docBase.setupPdfjs();
             expect(PDFJS.disableCreateObjectURL).to.equal(false);
         });
-
-        it('should override pdf.js PDFPageView reset with custom loading indicator logic', () => {
-            const resetFunc = PDFJS.PDFPageView.prototype.reset;
-            docBase.setupPdfjs();
-            expect(resetFunc).to.not.equal(PDFJS.PDFPageView.prototype.reset);
-        });
     });
 
     describe('initPrint()', () => {

src/lib/viewers/doc/__tests__/DocPreloader-test.js

@@ -6,8 +6,7 @@ import {
     CLASS_BOX_PREVIEW_PRELOAD_CONTENT,
     CLASS_BOX_PREVIEW_PRELOAD_OVERLAY,
     CLASS_INVISIBLE,
-    CLASS_PREVIEW_LOADED,
-    CLASS_SPINNER
+    CLASS_PREVIEW_LOADED
 } from '../../../constants';
 
 const PDFJS_CSS_UNITS = 96.0 / 72.0;
@@ -58,7 +57,6 @@ describe('lib/viewers/doc/DocPreloader', () => {
                 expect(docPreloader.wrapperEl).to.contain(`.${CLASS_BOX_PREVIEW_PRELOAD}`);
                 expect(docPreloader.preloadEl).to.contain(`.${CLASS_BOX_PREVIEW_PRELOAD_CONTENT}`);
                 expect(docPreloader.preloadEl).to.contain(`.${CLASS_BOX_PREVIEW_PRELOAD_OVERLAY}`);
-                expect(docPreloader.overlayEl).to.contain(`.${CLASS_SPINNER}`);
                 expect(docPreloader.imageEl.src).to.equal(imgSrc);
                 expect(containerEl).to.contain(docPreloader.wrapperEl);
                 expect(docPreloader.bindDOMListeners).to.be.called;