Async components do not render loading component

[nek4life]

Version

3.4.3

Reproduction link

https://codesandbox.io/s/lucid-haze-mr425

Steps to reproduce

https://vuejs.org/v2/guide/components-dynamic-async.html#Handling-Loading-State

Create a route with an Async component as showed in the documentation.

const AsyncComponent = () => ({
  // The component to load (should be a Promise)
  component: import('./MyComponent.vue'),
  // A component to use while the async component is loading
  loading: LoadingComponent,
  // A component to use if the load fails
  error: ErrorComponent,
  // Delay before showing the loading component. Default: 200ms.
  delay: 200,
  // The error component will be displayed if a timeout is
  // provided and exceeded. Default: Infinity.
  timeout: 3000
})

Reload page.

Loading component is never rendered.

What is expected?

Loading component should load while chunk is being fetched

What is actually happening?

Loading component does not render

---

This functionality is needed for the initial render of the app when using code splitting. Otherwise there is a blank screen while the partial downloads. I tried putting a loader behind the Vue app, but as soon as the app renders the router the page blanks out again so I'd like to have a loader for the actual route itself.

[posva]

See #2140

The problem with async components like those is that they need to be loaded in order to check existing navigation guards to confirm the navigation and actually display the component. At which time, it's already loaded, so it never displays in its loading state