fix: rendering

Author: IsaccoSordo

packages/beacon-ui/src/ui/toast/index.tsx

@@ -17,6 +17,7 @@ const createToast = (config: ToastConfig) => {
 }
 
 const openToast = (config: ToastConfig) => {
+  console.error('open toast called', config)
   initDone ? config$.next(config) : createToast(config)
 
   if (lastTimer) {
@@ -25,7 +26,9 @@ const openToast = (config: ToastConfig) => {
   }
 
   lastTimer = config.timer ? setTimeout(() => show$.next(false), config.timer) : undefined
-  show$.next(true)
+
+  show$.next(false)
+  setTimeout(() => show$.next(true), 50)
 }
 
 const closeToast = () => {
@@ -54,6 +57,7 @@ const ToastRoot = (props: ToastConfig) => {
   }, [])
 
   useEffect(() => {
+    console.error('useEffect called', config)
     // unmount the component immediately
     // if the close icon is clicked
     // or whenever closeToast is called.