From f780ca1dd00a1bc7cedd8bf431c1c421f82ac4e4 Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Wed, 29 May 2024 20:52:14 +0900
Subject: [PATCH] fix: use requestAnimationFrame instead of setTimeout to make
sure toast is born
---
packages/react/components/Toast.tsx | 6 ++++--
1 file changed, 4 insertions(+), 2 deletions(-)
diff --git a/packages/react/components/Toast.tsx b/packages/react/components/Toast.tsx
index e34140a..a8f380d 100644
--- a/packages/react/components/Toast.tsx
+++ b/packages/react/components/Toast.tsx
@@ -170,13 +170,15 @@ const ToastTemplate = ({
React.useEffect(() => {
if (toastData.life === "born") {
- setTimeout(() => {
+ requestAnimationFrame(() => {
+ // To make sure that the toast is rendered as "born" state
+ // and then change to "normal" state
toasts[id] = {
...toasts[id],
life: "normal",
};
notifySingle(id);
- }, 5 /* transition not working on fast toast creation with small timeout value */);
+ });
}
if (toastData.life === "normal" && toastData.closeTimeout !== null) {
const timeout = setTimeout(() => {