diff --git a/src/lib/_loading.scss b/src/lib/_loading.scss
index a88292d0c..73a8369a7 100644
--- a/src/lib/_loading.scss
+++ b/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;
+ }
}
diff --git a/src/lib/constants.js b/src/lib/constants.js
index b847368cc..165d466ca 100644
--- a/src/lib/constants.js
+++ b/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}`;
diff --git a/src/lib/icons/loading.gif b/src/lib/icons/loading.gif
new file mode 100644
index 000000000..3f4bf06fa
Binary files /dev/null and b/src/lib/icons/loading.gif differ
diff --git a/src/lib/viewers/doc/DocBaseViewer.js b/src/lib/viewers/doc/DocBaseViewer.js
index 73dfd376b..a536a3df0 100644
--- a/src/lib/viewers/doc/DocBaseViewer.js
+++ b/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 = '';
- };
}
/**
diff --git a/src/lib/viewers/doc/DocPreloader.js b/src/lib/viewers/doc/DocPreloader.js
index 9f8758f66..db07da321 100644
--- a/src/lib/viewers/doc/DocPreloader.js
+++ b/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 = ``;
+const SPINNER_HTML = ``;
class DocPreloader extends EventEmitter {
/** @property {HTMLElement} - Viewer container */
diff --git a/src/lib/viewers/doc/__tests__/DocBaseViewer-test.js b/src/lib/viewers/doc/__tests__/DocBaseViewer-test.js
index ef84d25d1..bcbef545b 100644
--- a/src/lib/viewers/doc/__tests__/DocBaseViewer-test.js
+++ b/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()', () => {
diff --git a/src/lib/viewers/doc/__tests__/DocPreloader-test.js b/src/lib/viewers/doc/__tests__/DocPreloader-test.js
index d2cd60e8c..1ca9663cd 100644
--- a/src/lib/viewers/doc/__tests__/DocPreloader-test.js
+++ b/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;