feat: make polling interval longer (#38)

* feat: make polling interval longer

* feat: throttle document change

* fix: waiting for element

workspaces/e2e/tests/tooltip-error/tooltip-error.spec.ts

@@ -12,6 +12,7 @@ test("should not emit any error event if it gets invalidates quickly", async ({
   await page.locator(".start-flow").click();
   await expect(page.locator("[data-type='tooltipError']")).toHaveCount(0);
   await page.locator(".add-target").click();
+  await expect(page.locator(".flows-tooltip")).toBeVisible();
   await page.locator(".remove-target").click();
   await page.locator(".add-target").click();
   await expect(page.locator("[data-type='tooltipError']")).toHaveCount(0);

workspaces/js/src/core/document-change.ts

@@ -1,6 +1,7 @@
+import { throttle } from "../lib/throttle";
 import { FlowsContext } from "./flows-context";
 
-export const handleDocumentChange = (): void => {
+const _handleDocumentChange = (): void => {
   FlowsContext.getInstance().instances.forEach((state) => {
     if (state.waitingForElement) return state.render();
 
@@ -12,3 +13,5 @@ export const handleDocumentChange = (): void => {
     }
   });
 };
+
+export const handleDocumentChange = throttle(_handleDocumentChange, 250);

workspaces/js/src/core/flow-state.ts

@@ -86,7 +86,7 @@ export class FlowState {
           type: "tooltipError",
           targetElement: step.targetElement,
         });
-      }, 1000);
+      }, 2000);
 
     const isFork = Array.isArray(step);
     if (isFork) {
@@ -217,8 +217,8 @@ export class FlowState {
    * Remove the flow element from the DOM. Used before rendering next step and when flow is finished.
    */
   unmount(): this {
-    if (!this.flowElement) return this;
     this.waitingForElement = false;
+    if (!this.flowElement) return this;
     this.flowElement.cleanup?.();
     this.flowElement.element.remove();
     return this;

workspaces/js/src/core/init.ts

@@ -166,7 +166,7 @@ const _init = (options: FlowsInitOptions): void => {
   if (locationChangeInterval !== null) clearInterval(locationChangeInterval);
   locationChangeInterval = window.setInterval(() => {
     handleLocationChange();
-  }, 50);
+  }, 250);
 
   addHandlers([
     { type: "click", handler: handleClick },

workspaces/js/src/core/render.tsx

@@ -290,11 +290,11 @@ const getBoundaryEl = (state: FlowState): Element | undefined => {
 };
 
 export const render = (state: FlowState): void => {
+  state.unmount();
+
   const step = state.currentStep;
   if (!step) return;
 
-  state.unmount();
-
   if (isTooltipStep(step)) {
     const target = document.querySelector(step.targetElement);
     if (target) {

workspaces/js/src/lib/throttle.ts

@@ -0,0 +1,17 @@
+/* eslint-disable @typescript-eslint/no-explicit-any -- handy in this file */
+
+export const throttle = <T extends (...args: any[]) => any>(
+  fn: T,
+  delay: number,
+): ((...args: Parameters<T>) => void) => {
+  let timerFlag: number | null = null;
+
+  return (...args) => {
+    if (timerFlag === null) {
+      timerFlag = window.setTimeout(() => {
+        timerFlag = null;
+        fn(...args);
+      }, delay);
+    }
+  };
+};