DHFPROD-7501: Use Worker for interval to avoid sleep

Author: ryanjdew

marklogic-data-hub-central/ui/src/hooks/use-interval-worker.js

@@ -0,0 +1,23 @@
+/* eslint-disable no-restricted-globals */
+
+// this worker will run an interval on a separate thread
+export default () => {
+  let started = false;
+  let interval;
+  self.addEventListener("message", function(e) {
+    switch (e.data.action) {
+    case "start":
+      if (!started) {
+        started = true;
+        interval = setInterval(function() {
+          self.postMessage({action: "tick"});
+        }, e.data.delay);
+      }
+      break;
+    case "stop":
+      clearInterval(interval);
+      started = false;
+      break;
+    }
+  }, false);
+};

marklogic-data-hub-central/ui/src/hooks/use-interval.tsx

@@ -1,6 +1,9 @@
 import {useEffect, useRef} from "react";
+import intervalWorkerJS from "./use-interval-worker";
 
 export const useInterval = (callback, delay) => {
+  const code = intervalWorkerJS.toString();
+
   const savedCallback = useRef<any>(null);
 
   // Remember the last callback ref
@@ -15,8 +18,24 @@ export const useInterval = (callback, delay) => {
     }
 
     if (delay !== null) {
-      let id = setInterval(tick, delay);
-      return () => clearInterval(id);
+      // Check for Worker available in modern browsers. If not, provide degraded experience (primarily for unit tests)
+      if (window.Worker) {
+        // Create an Object URL for the Worker JS file
+        const blobUrl = URL.createObjectURL(new Blob(["(" + code + ")()"]));
+        const intervalWorker = new Worker(blobUrl);
+        // tell the to start and pass the delay
+        intervalWorker.postMessage({action: "start", delay});
+        // add a listener on worker to call the callback
+        intervalWorker.addEventListener("message", tick);
+        // tell the worker to stop the interval and remove listener
+        return () => {
+          intervalWorker.postMessage({action: "stop"});
+          intervalWorker.removeEventListener("message", tick);
+        };
+      } else {
+        let id = setInterval(tick, delay);
+        return () => clearInterval(id);
+      }
     }
   }, [delay]);
 };