[css-view-transitions-2] Extend `waitUntil` so that it can delay the start of the View Transition (animating phase)

[bramus]

In #9901 we resolved on adding ViewTransition.waitUntil() which delays the view transition finish until the given promise is settled.

In WebKit/standards-positions#564 @nt1m brought up the following point:

• Not clear from the name that it delays completion, it could also delay the start of the transition.

Authors can currently to this manually by pausing the View Transition right after the snapshots have been taken:

const t = document.startViewTransition(…);

…

await t.ready;
pauseViewTransition(t);
await somePromise;
resumeViewTransition(t);

(Try it in a live demo: https://codepen.io/bramus/pen/NPxMvVE/45d641af16538a491532ca1dbcc1a741)

The code for pauseViewTransition and resumeViewTransition relies on getting all animations associated with the View Transition and then pausing those animations. This is a bit stupid, because one of the reasons we added ViewTransition.waitUntil() was so that authors would no longer need to extract and pause all the VT animations. So essentially, we are requiring them to do the same thing again.

To make this easier for authors, perhaps we could extend waitUntil to accept an object? I’m thinking of an extra phase option to indicate which phase should be delayed. By default it would be "finished"

ViewTransition.waitUntil({
  promise: myPromise,
  phase: 'animating',
});

/cc @vmpstr @noamr @jakearchibald

[bramus]

Also see #13014, which also suggests to extend waitUntil to accept an object (for a different reason).