@@ -82,6 +82,7 @@ import {
82
82
supportsMicrotasks ,
83
83
errorHydratingContainer ,
84
84
scheduleMicrotask ,
85
+ requestPostPaintCallback ,
85
86
} from './ReactFiberHostConfig' ;
86
87
87
88
import {
@@ -350,6 +351,7 @@ export function getWorkInProgressTransitions() {
350
351
}
351
352
352
353
let currentPendingTransitionCallbacks : PendingTransitionCallbacks | null = null ;
354
+ let currentEndTime : number | null = null ;
353
355
354
356
export function addTransitionStartCallbackToPendingTransition (
355
357
transition : Transition ,
@@ -2514,6 +2516,24 @@ function commitRootImpl(
2514
2516
markCommitStopped ( ) ;
2515
2517
}
2516
2518
2519
+ const prevRootTransitionCallbacks = root . transitionCallbacks ;
2520
+ if ( prevRootTransitionCallbacks !== null ) {
2521
+ requestPostPaintCallback ( endTime => {
2522
+ const prevPendingTransitionCallbacks = currentPendingTransitionCallbacks ;
2523
+ if ( prevPendingTransitionCallbacks !== null ) {
2524
+ scheduleCallback ( IdleSchedulerPriority , ( ) => {
2525
+ processTransitionCallbacks (
2526
+ prevPendingTransitionCallbacks ,
2527
+ endTime ,
2528
+ prevRootTransitionCallbacks ,
2529
+ ) ;
2530
+ } ) ;
2531
+ } else {
2532
+ currentEndTime = endTime ;
2533
+ }
2534
+ } ) ;
2535
+ }
2536
+
2517
2537
return null ;
2518
2538
}
2519
2539
@@ -2655,28 +2675,23 @@ function flushPassiveEffectsImpl() {
2655
2675
if ( enableTransitionTracing ) {
2656
2676
const prevPendingTransitionCallbacks = currentPendingTransitionCallbacks ;
2657
2677
const prevRootTransitionCallbacks = root . transitionCallbacks ;
2678
+ const prevEndTime = currentEndTime ;
2658
2679
if (
2659
2680
prevPendingTransitionCallbacks !== null &&
2660
2681
prevRootTransitionCallbacks !== null
2661
2682
) {
2662
- // TODO(luna) Refactor this code into the Host Config
2663
- // TODO(luna) The end time here is not necessarily accurate
2664
- // because passive effects could be called before paint
2665
- // (synchronously) or after paint (normally). We need
2666
- // to come up with a way to get the correct end time for both cases.
2667
- // One solution is in the host config, if the passive effects
2668
- // have not yet been run, make a call to flush the passive effects
2669
- // right after paint.
2670
- const endTime = now ( ) ;
2671
2683
currentPendingTransitionCallbacks = null ;
2672
-
2673
- scheduleCallback ( IdleSchedulerPriority , ( ) =>
2674
- processTransitionCallbacks (
2675
- prevPendingTransitionCallbacks ,
2676
- endTime ,
2677
- prevRootTransitionCallbacks ,
2678
- ) ,
2679
- ) ;
2684
+ currentEndTime = null ;
2685
+
2686
+ if ( prevEndTime !== null ) {
2687
+ scheduleCallback ( IdleSchedulerPriority , ( ) =>
2688
+ processTransitionCallbacks (
2689
+ prevPendingTransitionCallbacks ,
2690
+ prevEndTime ,
2691
+ prevRootTransitionCallbacks ,
2692
+ ) ,
2693
+ ) ;
2694
+ }
2680
2695
}
2681
2696
}
2682
2697
0 commit comments