Merge pull request #14276 from Snuffleupagus/issue-14242-2

Only show the `loadingIcon`-spinner on visible pages (issue 14242)

test/unit/base_viewer_spec.js

@@ -40,7 +40,7 @@ describe("BaseViewer", function () {
         buffer.push(view);
       }
       // Ensure that the correct views are inserted.
-      expect(buffer._buffer).toEqual([
+      expect([...buffer]).toEqual([
         viewsMap.get(1),
         viewsMap.get(2),
         viewsMap.get(3),
@@ -51,7 +51,7 @@ describe("BaseViewer", function () {
         buffer.push(view);
       }
       // Ensure that the correct views are evicted.
-      expect(buffer._buffer).toEqual([
+      expect([...buffer]).toEqual([
         viewsMap.get(3),
         viewsMap.get(4),
         viewsMap.get(5),
@@ -71,7 +71,7 @@ describe("BaseViewer", function () {
       // Ensure that keeping the size constant won't evict any views.
       buffer.resize(5);
 
-      expect(buffer._buffer).toEqual([
+      expect([...buffer]).toEqual([
         viewsMap.get(1),
         viewsMap.get(2),
         viewsMap.get(3),
@@ -82,7 +82,7 @@ describe("BaseViewer", function () {
       // Ensure that increasing the size won't evict any views.
       buffer.resize(10);
 
-      expect(buffer._buffer).toEqual([
+      expect([...buffer]).toEqual([
         viewsMap.get(1),
         viewsMap.get(2),
         viewsMap.get(3),
@@ -93,7 +93,7 @@ describe("BaseViewer", function () {
       // Ensure that decreasing the size will evict the correct views.
       buffer.resize(3);
 
-      expect(buffer._buffer).toEqual([
+      expect([...buffer]).toEqual([
         viewsMap.get(3),
         viewsMap.get(4),
         viewsMap.get(5),
@@ -114,7 +114,7 @@ describe("BaseViewer", function () {
       // while re-ordering them correctly.
       buffer.resize(5, new Set([1, 2]));
 
-      expect(buffer._buffer).toEqual([
+      expect([...buffer]).toEqual([
         viewsMap.get(3),
         viewsMap.get(4),
         viewsMap.get(5),
@@ -126,7 +126,7 @@ describe("BaseViewer", function () {
       // while re-ordering them correctly.
       buffer.resize(10, new Set([3, 4, 5]));
 
-      expect(buffer._buffer).toEqual([
+      expect([...buffer]).toEqual([
         viewsMap.get(1),
         viewsMap.get(2),
         viewsMap.get(3),
@@ -138,7 +138,7 @@ describe("BaseViewer", function () {
       // while re-ordering the remaining ones correctly.
       buffer.resize(3, new Set([1, 2, 5]));
 
-      expect(buffer._buffer).toEqual([
+      expect([...buffer]).toEqual([
         viewsMap.get(1),
         viewsMap.get(2),
         viewsMap.get(5),

web/base_viewer.js

@@ -99,17 +99,6 @@ class PDFPageViewBuffer {
 
   constructor(size) {
     this.#size = size;
-
-    if (
-      typeof PDFJSDev === "undefined" ||
-      PDFJSDev.test("!PRODUCTION || TESTING")
-    ) {
-      Object.defineProperty(this, "_buffer", {
-        get() {
-          return [...this.#buf];
-        },
-      });
-    }
   }
 
   push(view) {
@@ -158,6 +147,10 @@ class PDFPageViewBuffer {
     return this.#buf.has(view);
   }
 
+  [Symbol.iterator]() {
+    return this.#buf.keys();
+  }
+
   #destroyFirstView() {
     const firstView = this.#buf.keys().next().value;
 
@@ -1406,6 +1399,23 @@ class BaseViewer {
     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);
@@ -1419,6 +1429,8 @@ class BaseViewer {
       scrollAhead,
       preRenderExtra
     );
+    this.#toggleLoadingIconSpinner(visiblePages.ids);
+
     if (pageView) {
       this._ensurePdfPageLoaded(pageView).then(() => {
         this.renderingQueue.renderView(pageView);

web/pdf_page_view.js

@@ -291,7 +291,10 @@ class PDFPageView {
     }
 
     this.loadingIconDiv = document.createElement("div");
-    this.loadingIconDiv.className = "loadingIcon";
+    this.loadingIconDiv.className = "loadingIcon notVisible";
+    if (this._isStandalone) {
+      this.toggleLoadingIconSpinner(/* viewVisible = */ true);
+    }
     this.loadingIconDiv.setAttribute("role", "img");
     this.l10n.get("loading").then(msg => {
       this.loadingIconDiv?.setAttribute("aria-label", msg);
@@ -529,6 +532,13 @@ 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");

web/pdf_viewer.css

@@ -130,6 +130,9 @@
   bottom: 0;
   background: url("images/loading-icon.gif") center no-repeat;
 }
+.pdfViewer .page .loadingIcon.notVisible {
+  background: none;
+}
 
 .pdfPresentationMode .pdfViewer {
   margin-left: 0;