fix(vue-app): always finish transition.leave asynchronously

[pimlie]

Fix: #5703

Types of changes

• Bug fix (a non-breaking change which fixes an issue)
• New feature (a non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Description

When transition.css = false and no leave listener with a callback/done argument is provided, the leave transition callback is called synchronously.

This causes a problem when switching layouts in Nuxt. Eg given page A with layout A and page B with layout B the following roughly happens (thus with transition.css = false):

1. when page A is loaded the component tree is: Layout A -> Nuxt -> NuxtChild -> Transition -> RouterView -> Page A
2. next user clicks link to page B
3. Client app loads page component B and determines it needs layout B
4. layout B is preloaded (App.loadLayout)
5. router.next() is called
6. leave transition for Page A is called
7. leave transition immediately finishes (synchronously)
8. Page B is loaded within Layout A
9. router.afterEach calls Client.fixPrepatch
10. Client.showNextPage is called
11. Layout B is loaded (App.setLayout)
12. Page B is loaded

By calling the leave callback in step 6/7 asynchronous (as would happen when eg transition.css is not false), all subsequent steps are called before the leave callback is called which means that Layout B will already be loaded and Page B is never loaded in Layout A.

Checklist:

• My change requires a change to the documentation.
• I have updated the documentation accordingly. (PR: #)
• I have added tests to cover my changes (if not applicable, please state why)
• All new and existing tests are passing.

[codecov-io]

Codecov Report

Merging #5891 into dev will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##              dev    #5891   +/-   ##
=======================================
  Coverage   95.68%   95.68%           
=======================================
  Files          82       82           
  Lines        2689     2689           
  Branches      690      690           
=======================================
  Hits         2573     2573           
  Misses         98       98           
  Partials       18       18

Flag	Coverage Δ
#e2e	100% <ø> (ø)	⬆️
#fixtures	50.35% <ø> (ø)	⬆️
#unit	92.67% <ø> (ø)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update d3f1f3b...b23c367. Read the comment docs.

[pimlie]

@pi0 @Atinux One consideration that we might take away from this issue is that Nuxt.js fully relies on the asynchronous nature of transition resolving to prevent page components to be loaded twice when switching layouts. Not sure if this was an explicitly known thing or not, it took me quite a while at least to discover that ;)

[Atinux]

Good catch @pimlie, these transitions makes it harder to work with the layouts actually, as well as the scrollBehaviour.