[BUG] Animating after suspense fails with react compiler

[Pinpickle]

1. Read the FAQs 👇

✅

2. Describe the bug

Animations interrupted with suspense are not resumed when the React Compiler is enabled.

Fairly simply:

<Suspense>
  <ComponentThatSuspends />
  <motion.div initial={{ opacity: 0 }} exit={{ opacity: 1 }} />
</Suspense>

When the React Compiler is enabled will cause the animation to stop and not re-play on re-mount.

This happens when the reference to motion.div is stable across re-renders (which the compiler enables) - so motion.div does not re-render. The test suite doesn't use the compiler, it just keeps the reference to motion.div stable.

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

https://stackblitz.com/edit/node-rczx2erx?file=suspense.test.tsx

The repro is AI-generated

4. Steps to reproduce

Run npm install and npm test in the Stackblitz link

5. Expected behavior

The re-mounted component ends up with opacity: 1 (all the tests pass)

Extra context

Adding this layout effect to useVisualElement appears to fix the issue with all tests passing

const hasConnectedOnce = useRef(false);
useIsomorphicLayoutEffect(() => {
  if (!hasConnectedOnce.current) {
    hasConnectedOnce.current = true;
    return;
  }
  visualElement.animationState?.animateChanges();
  visualElement.enteringChildren = undefined;
}, []);

Because layout effects re-run when suspense ends. I'm not confident enough with the internals to know whether this is OK or not.

This is a very similar bug to: #2269

[wahajahmed010]

I worked up a fix for this and pushed it to a branch on my fork: https://github.com/wahajahmed010/motion/tree/fix/3832-suspense-react-compiler

The fix adds a useIsomorphicLayoutEffect to useVisualElement that calls animateChanges() on every layout commit after the first one. The first commit bails out so the existing initial-animation path is unchanged; subsequent commits replay the animation, which is exactly what Suspense remount needs.

Why this works: when a stable reference to a motion component is reused across a Suspense unmount/remount (which the React Compiler can produce by memoizing JSX elements), the same component instance is re-committed without the empty-deps useEffect in useVisualElement firing again. The animation gets stuck at whatever frame it was at when the suspension started. Layout effects re-run on every commit, so replaying animateChanges() and clearing enteringChildren here makes the resumed animation play as it would without the compiler.

Changes (3 files, +120 lines):

• packages/framer-motion/src/motion/utils/use-visual-element.ts - the fix and a new hasPlayedInitialAnimation ref to gate it.
• packages/framer-motion/src/motion/__tests__/animate-prop.test.tsx - regression test that hoists motion.div to a stable reference outside the render tree (the shape the React Compiler produces), suspends mid-animation, resolves, and asserts the resumed animation reaches its target.
• CHANGELOG.md - Unreleased entry.

I couldn't open a PR directly because the repo's PR creation policy is collaborators_only, so the diff lives on my fork. Happy to address any feedback or rework the approach if a different direction is preferred. Full diff: https://github.com/wahajahmed010/motion/commit/6b93e14a3fcd55eca606f8261cee30eacf7fe900.patch