From 2915f38bab834102f2a6d1269ba16904448d5927 Mon Sep 17 00:00:00 2001
From: Abdelrahman Ashraf <a.theashraf@gmail.com>
Date: Wed, 16 Oct 2024 10:53:11 +0700
Subject: [PATCH] refactor(react): simplify DotLottie and DotLottieWorker
 initialization

---
 packages/react/src/use-dotlottie-worker.tsx | 18 ++++-------
 packages/react/src/use-dotlottie.tsx        | 35 ++++++---------------
 2 files changed, 16 insertions(+), 37 deletions(-)

diff --git a/packages/react/src/use-dotlottie-worker.tsx b/packages/react/src/use-dotlottie-worker.tsx
index 6feaf636..d3b441e8 100644
--- a/packages/react/src/use-dotlottie-worker.tsx
+++ b/packages/react/src/use-dotlottie-worker.tsx
@@ -39,10 +39,12 @@ export const useDotLottieWorker = (config: DotLottieWorkerConfig): UseDotLottieW
   useEffect(() => {
     let dotLottieInstance: DotLottieWorker | null = null;
 
-    if (config.canvasRef.current) {
+    const canvas = configRef.current?.canvasRef.current;
+
+    if (canvas) {
       dotLottieInstance = new DotLottieWorker({
         ...config,
-        canvas: config.canvasRef.current,
+        canvas,
       });
 
       setDotLottie(dotLottieInstance);
@@ -54,15 +56,7 @@ export const useDotLottieWorker = (config: DotLottieWorkerConfig): UseDotLottieW
         setDotLottie(null);
       }
     };
-  }, [config.canvasRef]);
-
-  // hover reactivity
-  useEffect(() => {
-    if (config.canvasRef.current) {
-      config.canvasRef.current.addEventListener('mouseenter', hoverHandler);
-      config.canvasRef.current.addEventListener('mouseleave', hoverHandler);
-    }
-  }, [config.canvasRef, hoverHandler]);
+  }, []);
 
   // hover reactivity
   useEffect(() => {
@@ -77,7 +71,7 @@ export const useDotLottieWorker = (config: DotLottieWorkerConfig): UseDotLottieW
         config.canvasRef.current.removeEventListener('mouseleave', hoverHandler);
       }
     };
-  }, [config.canvasRef]);
+  }, [config.canvasRef, hoverHandler]);
 
   // speed reactivity
   useEffect(() => {
diff --git a/packages/react/src/use-dotlottie.tsx b/packages/react/src/use-dotlottie.tsx
index 51baa7c5..8d530b41 100644
--- a/packages/react/src/use-dotlottie.tsx
+++ b/packages/react/src/use-dotlottie.tsx
@@ -38,22 +38,15 @@ export const useDotLottie = (config: DotLottieConfig): UseDotLottieResult => {
   useEffect(() => {
     let dotLottieInstance: DotLottie | null = null;
 
-    if (config.canvasRef.current) {
-      // wait for canvas to be ready before initializing dotLottie
-      const interval = setInterval(() => {
-        if (
-          config.canvasRef.current &&
-          config.canvasRef.current.offsetWidth > 0 &&
-          config.canvasRef.current.offsetHeight > 0
-        ) {
-          clearInterval(interval);
-          dotLottieInstance = new DotLottie({
-            ...config,
-            canvas: config.canvasRef.current,
-          });
-          setDotLottie(dotLottieInstance);
-        }
-      }, 1);
+    const canvas = configRef.current?.canvasRef.current;
+
+    if (canvas) {
+      dotLottieInstance = new DotLottie({
+        ...config,
+        canvas,
+      });
+
+      setDotLottie(dotLottieInstance);
     }
 
     return () => {
@@ -62,15 +55,7 @@ export const useDotLottie = (config: DotLottieConfig): UseDotLottieResult => {
         setDotLottie(null);
       }
     };
-  }, [config.canvasRef]);
-
-  // hover reactivity
-  useEffect(() => {
-    if (config.canvasRef.current) {
-      config.canvasRef.current.addEventListener('mouseenter', hoverHandler);
-      config.canvasRef.current.addEventListener('mouseleave', hoverHandler);
-    }
-  }, [config.canvasRef, hoverHandler]);
+  }, []);
 
   // hover reactivity
   useEffect(() => {