[Editor] Remove the stamp editor displayed when the image was loading (bug 1848313)

Make the annotation editor layer unclickable while the image is loading and
change the cursor to 'wait'.

src/display/editor/stamp.js

@@ -68,22 +68,34 @@ class StampEditor extends AnnotationEditor {
     );
   }
 
+  #getBitmapDone() {
+    this._uiManager.enableWaiting(false);
+    if (this.#canvas) {
+      this.div.focus();
+    }
+  }
+
   #getBitmap() {
     if (this.#bitmapId) {
-      this._uiManager.imageManager.getFromId(this.#bitmapId).then(data => {
-        if (!data) {
-          this.remove();
-          return;
-        }
-        this.#bitmap = data.bitmap;
-        this.#createCanvas();
-      });
+      this._uiManager.enableWaiting(true);
+      this._uiManager.imageManager
+        .getFromId(this.#bitmapId)
+        .then(data => {
+          if (!data) {
+            this.remove();
+            return;
+          }
+          this.#bitmap = data.bitmap;
+          this.#createCanvas();
+        })
+        .finally(() => this.#getBitmapDone());
       return;
     }
 
     if (this.#bitmapUrl) {
       const url = this.#bitmapUrl;
       this.#bitmapUrl = null;
+      this._uiManager.enableWaiting(true);
       this.#bitmapPromise = this._uiManager.imageManager
         .getFromUrl(url)
         .then(data => {
@@ -98,7 +110,8 @@ class StampEditor extends AnnotationEditor {
             isSvg: this.#isSvg,
           } = data);
           this.#createCanvas();
-        });
+        })
+        .finally(() => this.#getBitmapDone());
       return;
     }
 
@@ -116,6 +129,7 @@ class StampEditor extends AnnotationEditor {
         if (!input.files || input.files.length === 0) {
           this.remove();
         } else {
+          this._uiManager.enableWaiting(true);
           const data = await this._uiManager.imageManager.getFromFile(
             input.files[0]
           );
@@ -140,7 +154,7 @@ class StampEditor extends AnnotationEditor {
         this.remove();
         resolve();
       });
-    });
+    }).finally(() => this.#getBitmapDone());
     if (typeof PDFJSDev === "undefined" || !PDFJSDev.test("TESTING")) {
       input.click();
     }
@@ -218,11 +232,11 @@ class StampEditor extends AnnotationEditor {
     }
 
     super.render();
+    this.div.hidden = true;
 
     if (this.#bitmap) {
       this.#createCanvas();
     } else {
-      this.div.classList.add("loading");
       this.#getBitmap();
     }
 
@@ -267,11 +281,12 @@ class StampEditor extends AnnotationEditor {
       (height * parentHeight) / pageHeight
     );
 
+    this._uiManager.enableWaiting(false);
     const canvas = (this.#canvas = document.createElement("canvas"));
     div.append(canvas);
+    div.hidden = false;
     this.#drawBitmap(width, height);
     this.#createObserver();
-    div.classList.remove("loading");
     if (!this.#hasBeenAddedInUndoStack) {
       this.parent.addUndoableEditor(this);
       this.#hasBeenAddedInUndoStack = true;

src/display/editor/tools.js

@@ -547,6 +547,8 @@ class AnnotationEditorUIManager {
 
   #isEnabled = false;
 
+  #isWaiting = false;
+
   #lastActiveElement = null;
 
   #mode = AnnotationEditorType.NONE;
@@ -1159,6 +1161,21 @@ class AnnotationEditorUIManager {
     }
   }
 
+  enableWaiting(mustWait = false) {
+    if (this.#isWaiting === mustWait) {
+      return;
+    }
+    this.#isWaiting = mustWait;
+    for (const layer of this.#allLayers.values()) {
+      if (mustWait) {
+        layer.disableClick();
+      } else {
+        layer.enableClick();
+      }
+      layer.div.classList.toggle("waiting", mustWait);
+    }
+  }
+
   /**
    * Enable all the layers.
    */