View Transition Feedback

[TArch64]

Hey. I tried to use document.startViewTransition with vue router and I have some feedback. Generally it works good but currently it's lacking an ability to display route loading progress bar. The thing is all route navigation passed to view transition including downloading async components, before enter guards, etc therefore when you click on a link an app ui freezes until navigation completion

I did some demo in codepen. Here you can see delay to the sub route in 2 sec with transition

It would be nice to have calling startViewTransition directly on components update so while components/guards loading we can display some progress bar to inform a user that a navigation started and we're waiting for data

[posva]

The freezing of the DOM is indeed one of the hard parts of the view transitions. Depending on the case, you can handle it differently. Here you could start the view transition in a before resolve global hook where you await mouse up or specific transitions. A simpler solution would be to delay the whole navigation so the browser has the time to update. In practice you will find lots of different edge cases that can be a bit frustrating for full page view transitions

[TArch64]

I tied wrapping next call in startViewTransition but it leads to just an infinite transition. I don't know why but in this case next callback never fires so a transition promise never resolves.

I think it needs deeper integration with router itself to start a transition before a DOM update and finish it when the update completed

[TArch64]

I experimented some more and found out a working solution. When doing it this way it's possible to wrap only dom updates in transition so I can display a loading when my before enter guards work

router.beforeResolve(async (_, __, next) => {
  const transition = document.startViewTransition(async () => {
    next();
    await nextTick(); // make sure dom updated
    await nextTick(); // one more to hide loading icons
  });

  await transition.ready; // without await ready there are warning about missing next function's call
});