fix: Add changes to the zapping feature, c=boosts, b=no-bug (#13101)

I've added a fix for the zapping which will now only set the display to
none of a zapped element after the dissolve animation is fully complete.

I also plan on looking forward to fixing the color invalidation issue,
which is not done yet.

src/zen/boosts/ZenZapDissolve.sys.mjs

@@ -154,6 +154,8 @@ void main() {
   #hasTriggered = false;
   #rafId = null;
 
+  #onComplete = null;
+
   /**
    * @param {Document} document Webpage document
    */
@@ -482,12 +484,14 @@ void main() {
    *
    * @param {Element} element The element to dissolve
    */
-  dissolve(element) {
+  dissolve(element, onComplete) {
     if (!this.#initialized || this.#hasTriggered || !element) {
       return;
     }
     this.#hasTriggered = true;
 
+    this.#onComplete = onComplete;
+
     const rect = element.getBoundingClientRect();
     if (rect.width === 0 || rect.height === 0) {
       console.warn("[ZapDissolve]: element has zero size. Skipping dissolve");
@@ -581,6 +585,11 @@ void main() {
       this.window.cancelAnimationFrame(this.#rafId);
       this.#rafId = null;
     }
+
+    if(this.#onComplete){
+      this.#onComplete();
+      this.#onComplete = null;
+    }
   }
 
   /**

src/zen/boosts/ZenZapOverlayChild.sys.mjs

@@ -192,13 +192,21 @@ export class ZapOverlay {
         counter++;
 
         this.#getNextDissolveEffect().then(dissolve => {
-          dissolve.dissolve(element);
+          dissolve.dissolve(element, () => {
+            this.zenBoostsChild.addZapSelector(cssPath);
+            this.onZapUpdate();
+
+            this.window.requestAnimationFrame(() => {
+              element.style.visibility = 'initial';
+            });
+          });
+          element.style.visibility = 'hidden';
         });
       });
+    } else {
+      this.zenBoostsChild.addZapSelector(cssPath);
+      this.onZapUpdate();
     }
-
-    this.zenBoostsChild.addZapSelector(cssPath);
-    this.onZapUpdate();
   }
 
   /**