Improve useInstantTransition

packages/framer-motion/src/utils/use-instant-transition.ts

@@ -1,19 +1,30 @@
 import { frame } from "../frameloop"
-import { useEffect } from "react"
+import { useEffect, useRef } from "react"
 import { useInstantLayoutTransition } from "../projection/use-instant-layout-transition"
 import { useForceUpdate } from "./use-force-update"
 import { instantAnimationState } from "./use-instant-transition-state"
 
 export function useInstantTransition() {
     const [forceUpdate, forcedRenderCount] = useForceUpdate()
     const startInstantLayoutTransition = useInstantLayoutTransition()
+    const unlockOnFrameRef = useRef<number>()
 
     useEffect(() => {
         /**
          * Unblock after two animation frames, otherwise this will unblock too soon.
          */
         frame.postRender(() =>
-            frame.postRender(() => (instantAnimationState.current = false))
+            frame.postRender(() => {
+                /**
+                 * If the callback has been called again after the effect
+                 * triggered this 2 frame delay, don't unblock animations. This
+                 * prevents the previous effect from unblocking the current
+                 * instant transition too soon. This becomes more likely when
+                 * used in conjunction with React.startTransition().
+                 */
+                if (forcedRenderCount !== unlockOnFrameRef.current) return
+                instantAnimationState.current = false
+            })
         )
     }, [forcedRenderCount])
 
@@ -22,6 +33,7 @@ export function useInstantTransition() {
             instantAnimationState.current = true
             forceUpdate()
             callback()
+            unlockOnFrameRef.current = forcedRenderCount + 1
         })
     }
 }