From ddc3008009053078b44f9ce27a86ad38717a1462 Mon Sep 17 00:00:00 2001
From: mitallast <mitallast@gmail.com>
Date: Tue, 5 Mar 2024 13:42:10 +0300
Subject: [PATCH] await worker is ready

---
 templates/widget/index.html        |  2 +-
 templates/widget/index.ts          | 20 +++++++++++++++++---
 templates/widget/service-worker.ts |  6 ++++++
 templates/widget/types.ts          |  1 +
 4 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/templates/widget/index.html b/templates/widget/index.html
index fad5bd16..dfdaa88d 100644
--- a/templates/widget/index.html
+++ b/templates/widget/index.html
@@ -21,7 +21,7 @@ SPDX-License-Identifier: MIT OR Apache-2.0
         <label class="widget__verification-container" for="widget__verification-checkbox">
           <span id="widget__verification-text"
             >I'm not a robot</span>
-          <input 
+          <input disabled
               id="widget__verification-checkbox"
               aria-valuenow="I'm not a robot"
                 aria-checked="false"
diff --git a/templates/widget/index.ts b/templates/widget/index.ts
index 08defd8f..230b4c42 100644
--- a/templates/widget/index.ts
+++ b/templates/widget/index.ts
@@ -12,7 +12,17 @@ import * as CONST from "./const";
 import "./main.scss";
 
 let LOCK = false;
-const worker = new Worker("/bench.js");
+
+const workerPromise = new Promise<Worker>((res) => {
+  const worker = new Worker("/bench.js");
+  worker.onmessage = (event: MessageEvent) => {
+    const message: ServiceWorkerMessage = event.data;
+    if(message.type === "ready") {
+      console.log("worker ready");
+      res(worker);
+    }
+  };
+});
 
 /** add  mcaptcha widget element to DOM */
 export const registerVerificationEventHandler = (): void => {
@@ -20,10 +30,14 @@ export const registerVerificationEventHandler = (): void => {
     document.querySelector(".widget__verification-container")
   );
   verificationContainer.style.display = "flex";
-  CONST.btn().addEventListener("click", (e) => solveCaptchaRunner(e));
+  workerPromise.then((worker: Worker) => {
+    const btn = CONST.btn();
+    btn.disabled = false;
+    btn.addEventListener("click", (e) => solveCaptchaRunner(worker, e));
+  });
 };
 
-export const solveCaptchaRunner = async (e: Event): Promise<void> => {
+export const solveCaptchaRunner = async (worker: Worker, e: Event): Promise<void> => {
   const PROGRESS_FILL = <HTMLElement>document.querySelector(".progress__fill");
 
   const setWidth = (width: number) => {
diff --git a/templates/widget/service-worker.ts b/templates/widget/service-worker.ts
index b8808618..99284d61 100644
--- a/templates/widget/service-worker.ts
+++ b/templates/widget/service-worker.ts
@@ -9,6 +9,12 @@ import prove from "./prove";
 import { PoWConfig, ServiceWorkerMessage, ServiceWorkerWork } from "./types";
 
 log.log("worker registered");
+
+const ready: ServiceWorkerMessage = {
+  type: "ready",
+};
+postMessage(ready);
+
 onmessage = async (e) => {
   console.debug("message received at worker");
   const config: PoWConfig = e.data;
diff --git a/templates/widget/types.ts b/templates/widget/types.ts
index 59843596..1b1ffb19 100644
--- a/templates/widget/types.ts
+++ b/templates/widget/types.ts
@@ -40,5 +40,6 @@ export type Token = {
 };
 
 export type ServiceWorkerMessage =
+  | { type: "ready" }
   | { type: "work"; value: ServiceWorkerWork }
   | { type: "progress"; nonce: number };