diff --git a/‎dev/react/src/tests/suspense-reveal-memoized.tsx‎
Lines changed: 43 additions & 0 deletions b/‎dev/react/src/tests/suspense-reveal-memoized.tsx‎
Lines changed: 43 additions & 0 deletions
diff --git a/‎packages/framer-motion/cypress/integration/suspense-reveal-memoized.ts‎
Lines changed: 23 additions & 0 deletions b/‎packages/framer-motion/cypress/integration/suspense-reveal-memoized.ts‎
Lines changed: 23 additions & 0 deletions
@@ -0,0 +1,43 @@
+import { motion } from "framer-motion"
+import { Suspense, useState } from "react"
+
+/**
+ * The suspending sibling owns the state, so when the boundary reveals the
+ * motion.div again it bails out of rendering - the same thing happens when
+ * the React Compiler memoizes JSX (issue #3832).
+ */
+const Suspender = () => {
+    const [promise, setPromise] = useState<Promise<void> | null>(null)
+
+    if (promise) throw promise
+
+    return (
+        <button
+            id="suspend"
+            onClick={() => {
+                const pending = new Promise<void>((resolve) =>
+                    setTimeout(() => {
+                        setPromise(null)
+                        resolve()
+                    }, 200)
+                )
+                setPromise(pending)
+            }}
+        >
+            Suspend
+        </button>
+    )
+}
+
+export const App = () => (
+    <Suspense fallback={<div id="fallback">Suspended</div>}>
+        <Suspender />
+        <motion.div
+            id="box"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.2 }}
+            style={{ width: 100, height: 100, background: "blue" }}
+        />
+    </Suspense>
+)
@@ -0,0 +1,23 @@
+const getOpacity = ([$element]: any) =>
+    parseFloat(window.getComputedStyle($element).opacity)
+
+describe("Suspense reveal of memoized content", () => {
+    it("replays the enter animation when a re-suspended boundary reveals", () => {
+        cy.visit("?test=suspense-reveal-memoized")
+            .get("#box")
+            .should(($element: any) => {
+                expect(getOpacity($element)).to.equal(1)
+            })
+            .get("#suspend")
+            .trigger("click", 1, 1, { force: true })
+            .get("#fallback")
+            .should("exist")
+            .get("#fallback", { timeout: 2000 })
+            .should("not.exist")
+            .wait(500)
+            .get("#box")
+            .then(($element: any) => {
+                expect(getOpacity($element)).to.equal(1)
+            })
+    })
+})