Only display the page-loadingIcon when rendering is currently running

Given that we only render one page at a time, this will lead to only *one* page-loadingIcon being displayed at a time even if multiple pages are visible in the viewer. However, this will make it clearer which page is the currently parsing/rendering one.

To simplify toggling of the page-loadingIcon visibility, the existing `PDFPageView.renderingState` is changed into a getter/setter-pair with the latter also handling the page-loadingIcon state.
An additional benefit of these changes is that the `PDFViewer` no longer needs to handling toggling of page-loadingIcon visibility during rendering, since there can only ever be *one* page rendering.
Finally, this may also simplify future changes w.r.t. page-loadingIcon visibility toggling (using e.g. a show-timeout).
This commit is contained in:
Jonas Jenwald 2022-12-26 15:00:22 +01:00
parent 3110d1f29a
commit a578571f59
2 changed files with 26 additions and 47 deletions

View File

@ -120,6 +120,8 @@ class PDFPageView {
#previousRotation = null;
#renderingState = RenderingStates.INITIAL;
#useThumbnailCanvas = {
initialOptionalContent: true,
regularAnnotations: true,
@ -167,7 +169,6 @@ class PDFPageView {
this.paintTask = null;
this.paintedViewportMap = new WeakMap();
this.renderingState = RenderingStates.INITIAL;
this.resume = null;
this._renderError = null;
if (
@ -227,6 +228,30 @@ class PDFPageView {
}
}
get renderingState() {
return this.#renderingState;
}
set renderingState(state) {
this.#renderingState = state;
switch (state) {
case RenderingStates.INITIAL:
case RenderingStates.PAUSED:
this.loadingIconDiv?.classList.add("notVisible");
break;
case RenderingStates.RUNNING:
this.loadingIconDiv?.classList.remove("notVisible");
break;
case RenderingStates.FINISHED:
if (this.loadingIconDiv) {
this.loadingIconDiv.remove();
delete this.loadingIconDiv;
}
break;
}
}
#setDimensions() {
const { viewport } = this;
if (this.pdfPage) {
@ -496,17 +521,6 @@ class PDFPageView {
this.loadingIconDiv?.setAttribute("aria-label", msg);
});
div.append(this.loadingIconDiv);
} else {
this.toggleLoadingIconSpinner();
div.append(this.loadingIconDiv);
}
if (
(typeof PDFJSDev === "undefined" ||
PDFJSDev.test("!PRODUCTION || GENERIC")) &&
this._isStandalone
) {
this.toggleLoadingIconSpinner(/* viewVisible = */ true);
}
}
@ -775,13 +789,6 @@ class PDFPageView {
return this.viewport.convertToPdfPoint(x, y);
}
/**
* @ignore
*/
toggleLoadingIconSpinner(viewVisible = false) {
this.loadingIconDiv?.classList.toggle("notVisible", !viewVisible);
}
draw() {
if (this.renderingState !== RenderingStates.INITIAL) {
console.error("Must be in new state before drawing");
@ -791,11 +798,6 @@ class PDFPageView {
if (!pdfPage) {
this.renderingState = RenderingStates.FINISHED;
if (this.loadingIconDiv) {
this.loadingIconDiv.remove();
delete this.loadingIconDiv;
}
return Promise.reject(new Error("pdfPage is not loaded"));
}
@ -888,11 +890,6 @@ class PDFPageView {
this._renderError = error;
this.renderingState = RenderingStates.FINISHED;
if (this.loadingIconDiv) {
this.loadingIconDiv.remove();
delete this.loadingIconDiv;
}
this._resetZoomLayer(/* removeFromDOM = */ true);
// Ensure that the thumbnails won't become partially (or fully) blank,

View File

@ -1626,23 +1626,6 @@ class PDFViewer {
return this.scroll.down;
}
/**
* Only show the `loadingIcon`-spinner on visible pages (see issue 14242).
*/
#toggleLoadingIconSpinner(visibleIds) {
for (const id of visibleIds) {
const pageView = this._pages[id - 1];
pageView?.toggleLoadingIconSpinner(/* viewVisible = */ true);
}
for (const pageView of this.#buffer) {
if (visibleIds.has(pageView.id)) {
// Handled above, since the "buffer" may not contain all visible pages.
continue;
}
pageView.toggleLoadingIconSpinner(/* viewVisible = */ false);
}
}
forceRendering(currentlyVisiblePages) {
const visiblePages = currentlyVisiblePages || this._getVisiblePages();
const scrollAhead = this.#getScrollAhead(visiblePages);
@ -1656,7 +1639,6 @@ class PDFViewer {
scrollAhead,
preRenderExtra
);
this.#toggleLoadingIconSpinner(visiblePages.ids);
if (pageView) {
this.#ensurePdfPageLoaded(pageView).then(() => {