fix(router): Delay the view transition to ensure renders in microtasks complete (#56494)

atscott · AndrewKushnir · commit 0d52c6b18275 · 2024-06-20T08:56:49.000-07:00
This commit delays makes two changes: * Use the `read` phase for `afterNextRender` hook. We really want to wait for any write hooks to complete before starting the animation * In addition, wait a macrotask before resolve (really, this makes the above change unnecessary but it's still conceptually the right thing). This ensures any follow-up rendering in the microtask queue is flushed before the animation starts. Important note: This only affects the timing of the animation start, delaying it longer to allow additional rendering/change detections to flush. This promise already resolves in an `afterNextRender` hook and is only used directly by the browser's view transition machinery. PR Close #56494
diff --git a/packages/router/src/utils/view_transition.ts b/packages/router/src/utils/view_transition.ts
@@ -139,6 +139,9 @@ export function createViewTransition(
  */
 function createRenderPromise(injector: Injector) {
   return new Promise<void>((resolve) => {
-    afterNextRender(resolve, {injector});
+    // Wait for the microtask queue to empty after the next render happens (by waiting a macrotask).
+    // This ensures any follow-up renders in the microtask queue are completed before the
+    // view transition starts animating.
+    afterNextRender({read: () => setTimeout(resolve)}, {injector});
   });
 }
