fix: framer modal enter motion

Signed-off-by: Innei <i@innei.in>

src/components/ui/modal/stacked/modal.tsx

@@ -25,7 +25,7 @@ import { Divider } from '~/components/ui/divider'
 import { microReboundPreset } from '~/constants/spring'
 import { useEventCallback } from '~/hooks/common/use-event-callback'
 import { useIsUnMounted } from '~/hooks/common/use-is-unmounted'
-import { stopPropagation } from '~/lib/dom'
+import { nextFrame, stopPropagation } from '~/lib/dom'
 import { clsxm } from '~/lib/helper'
 import { jotaiStore } from '~/lib/store'
 
@@ -90,7 +90,9 @@ export const Modal: Component<{
   const animateController = useAnimationControls()
   useEffect(() => {
     if (isMobile) return
-    animateController.start(enterStyle)
+    nextFrame(() => {
+      animateController.start(enterStyle)
+    })
   }, [animateController, isMobile])
   const noticeModal = useCallback(() => {
     animateController

src/lib/dom.ts

@@ -20,3 +20,6 @@ export const transitionViewIfSupported = (updateCb: () => any) => {
 export function escapeSelector(selector: string) {
   return selector.replace(/[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g, '\\$&')
 }
+
+export const nextFrame = (fn: () => void) =>
+  requestAnimationFrame(() => requestAnimationFrame(fn))