From a90cec770c753ac6b33bd95d3d21768790e55b82 Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Wed, 7 Aug 2024 19:19:27 +0900
Subject: [PATCH] feat: make sure toast is rendered as born first

---
 packages/react/components/Toast/Component.tsx | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/packages/react/components/Toast/Component.tsx b/packages/react/components/Toast/Component.tsx
index b77900a..1b0ea5a 100644
--- a/packages/react/components/Toast/Component.tsx
+++ b/packages/react/components/Toast/Component.tsx
@@ -46,9 +46,16 @@ const ToastTemplate = ({
 
   React.useEffect(() => {
     if (toastData.life === "born") {
-      requestAnimationFrame(() => {
-        // To make sure that the toast is rendered as "born" state
-        // and then change to "normal" state
+      requestAnimationFrame(function untilBorn() {
+        /*
+        To confirm that the toast is rendered as "born" state and then change to "normal" state
+        This way will make sure born -> normal stage transition animation will work.
+        */
+        const elm = document.querySelector(
+          `div[data-toaster-root] > div[data-toast-id="${id}"][data-toast-lifecycle="born"]`,
+        );
+        if (!elm) return requestAnimationFrame(untilBorn);
+
         toasts[id] = {
           ...toasts[id],
           life: "normal",
@@ -83,6 +90,8 @@ const ToastTemplate = ({
         life: toastData.life,
       })}
       ref={ref}
+      data-toast-id={id}
+      data-toast-lifecycle={toastData.life}
     >
       {toastData.closeButton && (
         <button