diff --git a/package.json b/package.json
index 82f3d5078..e8dc67f99 100644
--- a/package.json
+++ b/package.json
@@ -78,7 +78,7 @@
"electron-updater": "^6.2.1",
"font-list": "1.5.1",
"foxact": "0.2.36",
- "framer-motion": "11.3.6",
+ "framer-motion": "11.0.10",
"franc-min": "6.2.0",
"fuse.js": "7.0.0",
"hast-util-to-jsx-runtime": "2.3.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bc7ffde05..12dda5a80 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -167,8 +167,8 @@ importers:
specifier: 0.2.36
version: 0.2.36(react@18.3.1)
framer-motion:
- specifier: 11.3.6
- version: 11.3.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+ specifier: 11.0.10
+ version: 11.0.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
franc-min:
specifier: 6.2.0
version: 6.2.0
@@ -930,6 +930,12 @@ packages:
engines: {node: '>=14.14'}
hasBin: true
+ '@emotion/is-prop-valid@0.8.8':
+ resolution: {integrity: sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==}
+
+ '@emotion/memoize@0.7.4':
+ resolution: {integrity: sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==}
+
'@es-joy/jsdoccomment@0.43.1':
resolution: {integrity: sha512-I238eDtOolvCuvtxrnqtlBaw0BwdQuYqK7eA6XIonicMdOOOb75mqdIzkGDUbS04+1Di007rgm9snFRNeVrOog==}
engines: {node: '>=16'}
@@ -4080,15 +4086,12 @@ packages:
react:
optional: true
- framer-motion@11.3.6:
- resolution: {integrity: sha512-olpX48qfoSIDjhw0RbolhOGBQmdMAXHHpSI0PFdTj5LeXChcf5F4ApShs0mQ6FPEPOj7dnEvSyB07UgRK5G9Jw==}
+ framer-motion@11.0.10:
+ resolution: {integrity: sha512-aaImib9FQlfno2yiZAdkvN6zLXLr8a9uGsGFlQO64hSm8NoCeiUng2//5ok7RHCW2ufzT74uuPsmWzUsrHPYDQ==}
peerDependencies:
- '@emotion/is-prop-valid': '*'
react: ^18.0.0
react-dom: ^18.0.0
peerDependenciesMeta:
- '@emotion/is-prop-valid':
- optional: true
react:
optional: true
react-dom:
@@ -7585,6 +7588,14 @@ snapshots:
transitivePeerDependencies:
- supports-color
+ '@emotion/is-prop-valid@0.8.8':
+ dependencies:
+ '@emotion/memoize': 0.7.4
+ optional: true
+
+ '@emotion/memoize@0.7.4':
+ optional: true
+
'@es-joy/jsdoccomment@0.43.1':
dependencies:
'@types/eslint': 8.56.10
@@ -11291,10 +11302,11 @@ snapshots:
optionalDependencies:
react: 18.3.1
- framer-motion@11.3.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+ framer-motion@11.0.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
dependencies:
tslib: 2.6.3
optionalDependencies:
+ '@emotion/is-prop-valid': 0.8.8
react: 18.3.1
react-dom: 18.3.1(react@18.3.1)
diff --git a/src/renderer/src/components/ui/modal/stacked/modal.tsx b/src/renderer/src/components/ui/modal/stacked/modal.tsx
index cf05454a5..fdd01ab39 100644
--- a/src/renderer/src/components/ui/modal/stacked/modal.tsx
+++ b/src/renderer/src/components/ui/modal/stacked/modal.tsx
@@ -3,11 +3,10 @@ import { useUISettingKey } from "@renderer/atoms/settings/ui"
import { AppErrorBoundary } from "@renderer/components/common/AppErrorBoundary"
import { m } from "@renderer/components/common/Motion"
import { ErrorComponentType } from "@renderer/components/errors"
-import { stopPropagation } from "@renderer/lib/dom"
+import { nextFrame, stopPropagation } from "@renderer/lib/dom"
import { cn } from "@renderer/lib/utils"
import { useAnimationControls, useDragControls } from "framer-motion"
-import { useAtomValue, useSetAtom } from "jotai"
-import { selectAtom } from "jotai/utils"
+import { useSetAtom } from "jotai"
import type { PointerEventHandler, SyntheticEvent } from "react"
import {
createElement,
@@ -18,6 +17,7 @@ import {
useEffect,
useMemo,
useRef,
+ useState,
} from "react"
import { useEventCallback } from "usehooks-ts"
@@ -43,20 +43,17 @@ export const ModalInternal: Component<{
ref: any,
) {
const setStack = useSetAtom(modalStackAtom)
+
+ const [currentIsClosing, setCurrentIsClosing] = useState(false)
+
const close = useEventCallback(() => {
- setStack((p) => p.filter((modal) => modal.id !== item.id))
+ setCurrentIsClosing(true)
+ nextFrame(() => {
+ setStack((p) => p.filter((modal) => modal.id !== item.id))
+ })
onPropsClose?.(false)
})
- const currentIsClosing = useAtomValue(
- useMemo(
- () =>
- selectAtom(modalStackAtom, (atomValue) =>
- atomValue.every((modal) => modal.id !== item.id)),
- [item.id],
- ),
- )
-
const onClose = useCallback(
(open: boolean): void => {
if (!open) {
@@ -159,13 +156,13 @@ export const ModalInternal: Component<{
}),
[ModalProps],
)
- const finalChildren = (
+ const finalChildren = useMemo(() => (