From 71ab7e99c825edfd2c9c9a5fb413bce8ca011f39 Mon Sep 17 00:00:00 2001
From: cyantree <cyantree@users.noreply.github.com>
Date: Tue, 5 Mar 2024 22:47:29 +0100
Subject: [PATCH] [@mantine/core] next try fixing transition issues by using
 `flushSync()` #3126 #5193

---
 .../core/src/components/Transition/use-transition.ts       | 6 +++++-
 .../@mantine/modals/src/use-modals/use-modals.test.tsx     | 7 +++++--
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/@mantine/core/src/components/Transition/use-transition.ts b/packages/@mantine/core/src/components/Transition/use-transition.ts
index 9cdcdcd0cd0..2ee15447961 100644
--- a/packages/@mantine/core/src/components/Transition/use-transition.ts
+++ b/packages/@mantine/core/src/components/Transition/use-transition.ts
@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
+import ReactDOM from 'react-dom';
 import { useDidUpdate, useReducedMotion } from '@mantine/hooks';
 import { useMantineTheme } from '../../core';
 
@@ -43,7 +44,6 @@ export function useTransition({
     const preHandler = shouldMount ? onEnter : onExit;
     const handler = shouldMount ? onEntered : onExited;
 
-    setStatus(shouldMount ? 'pre-entering' : 'pre-exiting');
     window.clearTimeout(timeoutRef.current);
 
     const newTransitionDuration = reduceMotion ? 0 : shouldMount ? duration : exitDuration;
@@ -56,6 +56,10 @@ export function useTransition({
     } else {
       // Make sure new status won't be set within the same frame as this would disrupt animation #3126
       rafRef.current = requestAnimationFrame(() => {
+        ReactDOM.flushSync(() => {
+          setStatus(shouldMount ? 'pre-entering' : 'pre-exiting');
+        });
+
         rafRef.current = requestAnimationFrame(() => {
           typeof preHandler === 'function' && preHandler();
           setStatus(shouldMount ? 'entering' : 'exiting');
diff --git a/packages/@mantine/modals/src/use-modals/use-modals.test.tsx b/packages/@mantine/modals/src/use-modals/use-modals.test.tsx
index cd9889fc044..68c2320495b 100644
--- a/packages/@mantine/modals/src/use-modals/use-modals.test.tsx
+++ b/packages/@mantine/modals/src/use-modals/use-modals.test.tsx
@@ -41,7 +41,7 @@ describe('@mantine/modals/use-modals', () => {
       const modals = useModals();
 
       useEffect(() => {
-        modals.openContextModal('contextTest', { innerProps: { text: testContent } });
+        modals.openContextModal('contextTest', { innerProps: { text: testContent }, transitionProps: { duration: 0 } });
       }, []);
 
       return <div>Empty</div>;
@@ -64,7 +64,7 @@ describe('@mantine/modals/use-modals', () => {
       const modals = useModals();
 
       useEffect(() => {
-        modals.openConfirmModal({});
+        modals.openConfirmModal({transitionProps: { duration: 0 }});
       }, []);
 
       return <div>Empty</div>;
@@ -90,6 +90,7 @@ describe('@mantine/modals/use-modals', () => {
       useEffect(() => {
         modals.openConfirmModal({
           labels: { confirm: 'Confirm', cancel: 'Cancel' },
+          transitionProps: { duration: 0 },
         });
       }, []);
 
@@ -117,6 +118,7 @@ describe('@mantine/modals/use-modals', () => {
             confirm: <span>Confirm</span>,
             cancel: <span>Cancel</span>,
           },
+          transitionProps: { duration: 0 },
         });
       }, []);
 
@@ -143,6 +145,7 @@ describe('@mantine/modals/use-modals', () => {
         modals.openModal({
           title: 'Test title',
           children: <h1>Children</h1>,
+          transitionProps: { duration: 0 },
         });
       }, []);