[@mantine/core] next try fixing transition issues by using `flushSync…

…()` #3126 #5193
mantinedev · Mar 5, 2024 · 40db9b6 · 40db9b6
1 parent 7b1457f
commit 40db9b6
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git 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
@@ -41,7 +41,10 @@ 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 +67,7 @@ describe('@mantine/modals/use-modals', () => {
       const modals = useModals();
 
       useEffect(() => {
-        modals.openConfirmModal({});
+        modals.openConfirmModal({ transitionProps: { duration: 0 } });
       }, []);
 
       return <div>Empty</div>;
@@ -90,6 +93,7 @@ describe('@mantine/modals/use-modals', () => {
       useEffect(() => {
         modals.openConfirmModal({
           labels: { confirm: 'Confirm', cancel: 'Cancel' },
+          transitionProps: { duration: 0 },
         });
       }, []);
 
@@ -117,6 +121,7 @@ describe('@mantine/modals/use-modals', () => {
             confirm: <span>Confirm</span>,
             cancel: <span>Cancel</span>,
           },
+          transitionProps: { duration: 0 },
         });
       }, []);
 
@@ -143,6 +148,7 @@ describe('@mantine/modals/use-modals', () => {
         modals.openModal({
           title: 'Test title',
           children: <h1>Children</h1>,
+          transitionProps: { duration: 0 },
         });
       }, []);