Loading state for lazy-loaded routes

Flow
1

Hello!

I’m using vaadin-router’s RouteWithAction to lazy-load (i.e. code-split) my app’s routes:

{
    path: '/sites',
    name: 'Sites',
    component: 'my-sites',
    metadata: { icon: Icons.place },
    action: (): Promise<void> => import('./components/sites').then(() => void 0, console.error),
    children: (): Promise<Route[]> => import('./components/sites/routes').then(m => m.routes),
  }

This works well as far as loading goes, however, for some routes with large and complex module graphs, there can be a delay of several seconds while loading, during which time the UI is unresponsive.

I would like to show some loading UI (e.g. a spinner or skeleton UI) during that time, to indicate to the user that something is happening. How would I go about doing that?