@@ -27,7 +27,7 @@ view transition has finished its asynchronous `document.startViewTransition` cal
2727
2828## Detailed design
2929
30- Inside the ` Transition ` object inside the Ember Router a new method ` waitFor ` will be added .
30+ Inside the Ember Router package, the ` Transition ` object will receive a new method ` waitFor ` .
3131
3232``` ts
3333waitFor (promise : Promise < any > ) {
@@ -36,9 +36,9 @@ waitFor(promise: Promise<any>) {
3636```
3737
3838When called, the method will cause the transition to wait for the passed promise to resolve before
39- continuing the transition. The promise awaited after the ` routeWillChange ` event and before the
40- ` beforeModel ` hook in the new route. This allows users to call the ` waitFor ` sinde ` routeWillChange `
41- listeners.
39+ continuing the transition. The promise is awaited * after* the ` routeWillChange ` event is fired and
40+ * before * the ` beforeModel ` hook in the new route is called . This allows users to call the ` waitFor `
41+ inside ` routeWillChange ` listeners.
4242
4343``` js
4444router .on (' routeWillChange' , async (transition ) => {
@@ -66,6 +66,7 @@ transition to pause. The router will continue entering the new route, even thoug
6666as referred to above was not yet finished.
6767
6868``` js
69+ // although the callback is asynchronous, the router will continue anyhow
6970router .on (' routeWillChange' , async (transition ) => {
7071 const viewTransition = document .startViewTransition (async () => {
7172 });
@@ -74,12 +75,12 @@ router.on('routeWillChange', async (transition) => {
7475```
7576
7677An alternative solution to the ` waitFor ` method would be let the router await ` routeWillChange ` listeners. But
77- with probably many listeners being used by current users, it is hard to foresee if this would possibly break
78+ with probably many listeners being used by current users, it is hard to foresee if this would break
7879current applications. A new method allows users to opt-in to an asynchronous switch between old and new route.
7980
8081Finally, the ` waitFor ` accepts a single promise that replaces a possible other pausing promise. In the example
8182below only promise2 is waited for by the router. There is also no possibility to remove pausing promises. If
82- users would want to wait for multiple Promise, it could create an aggregate promise via ` Promise.all() ` .
83+ users would want to wait for multiple Promise, they have to create an aggregate promise via ` Promise.all() ` .
8384
8485``` js
8586const { promise: promise1 } = Promise .withResolvers ();
@@ -92,10 +93,11 @@ transition.waitFor(promise2);
9293
9394## How we teach this
9495
95- Since animation libraries liquid-fire and Ember animated have always been popuplar within Ember, there should a
96- separate section inside the [ Ember Routing guides] ( https://guides.emberjs.com/release/routing/ ) . It should be
97- a separate page View Transition between Asynchronous Routing and Controllers. The page should document how to
98- use view transitions within Ember.
96+ Since animation libraries, like [ liquid-fire] ( https://ember-animation.github.io/liquid-fire/ ) and
97+ [ Ember animated] ( https://ember-animation.github.io/ember-animated/ ) , have always been popuplar within Ember,
98+ there should a separate section inside the [ Ember Routing guides] ( https://guides.emberjs.com/release/routing/ ) .
99+ It should be a separate page View Transition between Asynchronous Routing and Controllers. The page should
100+ document how to use the View Transition API within Ember.
99101
100102## Drawbacks
101103
@@ -111,4 +113,4 @@ applications.
111113
112114## Unresolved questions
113115
114- ` waitFor ` or ` waitUntil ` , I have chosen former but the method might reconsidered.
116+ ` waitFor ` or ` waitUntil ` , I have chosen former but the name of the method might reconsidered.
0 commit comments