p-sw/pswui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: use requestAnimationFrame instead of setTimeout to make sure toast is born

Browse Source
This commit is contained in:
p-sw 2024-05-29 20:52:14 +09:00
parent f4f931b0f4
commit f780ca1dd0
1 changed files with 4 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/react/components/Toast.tsx
View File

@ -170,13 +170,15 @@ const ToastTemplate = ({
React.useEffect(() => { React.useEffect(() => {
if (toastData.life === "born") { 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] = {
...toasts[id], ...toasts[id],
life: "normal", life: "normal",
}; };
notifySingle(id); notifySingle(id);
}, 5 /* transition not working on fast toast creation with small timeout value */); });
} }
if (toastData.life === "normal" && toastData.closeTimeout !== null) { if (toastData.life === "normal" && toastData.closeTimeout !== null) {
const timeout = setTimeout(() => { const timeout = setTimeout(() => {