Weird router behaviour. Child view not loading

vNext
1

I just noticed some weird behaviour. I have a router and a child router in my app. The router is in my-app.js and the child router is in live.js.

main.js

import { RouterConfiguration } from '@aurelia/router'

Aurelia
  .register(RouterConfiguration.customize({
    useDirectRouting: false,
    useUrlFragmentHash: true,
    useHref: false,
  }))

my-app.js

@routes([
  { path: '', redirectTo: 'live' },
  { path: 'live', component: () => import('./resources/routes/live'), title: 'Live' }
])

live.js → child Router

@routes([
  { path: '', redirectTo: 'users' },
  { path: 'users', component: () => import('./live/users'), title: 'Users' }
])

When opening up a new browser window the app navigates to this url: http://localhost:9000/#/live/users

Which I think is correct. However, if I add in an async function to the loading hook of live.js the users view never loads.

live.js → child Router

@routes([
  { path: '', redirectTo: 'users' },
  { path: 'users', component: () => import('./live/users'), title: 'Users' }
])

export class Live {
  constructor() { ... }

  loading() {
    let p = new Promise(resolve => {
      setTimeout(() => { resolve() }, 500)
    })

    return p
  }
}

The browser only loads http://localhost:9000/#/live