Update: Add Instant Preview loading overlay #350
Conversation
tonyjin
commented
Aug 30, 2017
tonyjin
commented
- Add transparent overlay over document Instant Preview to better indicate that file is still loading
- Replace document loading icon GIF with CSS
- Add transparent overlay over document Instant Preview to better indicate that file is still loading - Replace document loading icon GIF with CSS
| height: 30px; | ||
| transform: translate(-15px, -15px) scale(.15) translate(15px, 15px); | ||
| width: 30px; | ||
| } |
There was a problem hiding this comment.
This is what it looks like:
https://codepen.io/box-platform/pen/225158cd7ec46b0bd504620808e59748
| resetFunc.bind(this)(args); | ||
| this.loadingIconDiv.classList.add(CLASS_SPINNER); | ||
| this.loadingIconDiv.innerHTML = '<div></div>'; | ||
| }; |
There was a problem hiding this comment.
This is so we don't have to go into pdf.js and modify their code after each upgrade.
These are the relevant lines in pdf.js: https://github.com/mozilla/pdf.js/blob/1419b7ffe7fb34aa48002fd388d7a3848c668709/web/pdf_page_view.js#L183
| this.wrapperEl.classList.add(CLASS_IS_TRANSPARENT); | ||
|
|
||
| // Cleanup preload DOM after fade out | ||
| this.wrapperEl.addEventListener('transitionend', this.cleanupPreload); |
There was a problem hiding this comment.
Here we fade out the preload image into the real page and then remove the preload elements. This seems to be a better experience than swapping out the preload instantaneously.
| // Only show page loading indicator when viewer has loaded | ||
| .bp-loaded & .loadingIcon { | ||
| background: url('loadingIcon.gif') center no-repeat; | ||
| margin: auto; |
There was a problem hiding this comment.
Using this absolute centering strategy: https://www.smashingmagazine.com/2013/08/absolute-horizontal-vertical-centering-css/
| margin: auto; | ||
| position: absolute; | ||
| right: 0; | ||
| top: 0; |
There was a problem hiding this comment.
Using this absolute centering strategy: https://www.smashingmagazine.com/2013/08/absolute-horizontal-vertical-centering-css/
