Top level router isNavigating still true when child router is activating view model

1

I use the isNavigating property of the router to show a spinner when the page is loading. This works fine on the top level router, because the app.html loads, then the spinner shows.

When using a child router, I want the view to show for the viewmodel that owns the child router while it is activating its routed viewmodel. But it won’t show, because the top level router isNavigating property is still true.

Eg, given a hierarchy of App > Parent > Child.

This is what happens:

  1. App view displays
  2. App router isNavigating is true, spinner shown instead of app router-view
  3. Parent viewmodel activated
  4. App router isNavigating still true
  5. Child viewmodel activated
  6. App router isNavigating now false, so router-view displayed with parent > child

I would like:

  1. App view displays
  2. App router isNavigating is true, spinner shown instead of app router-view
  3. Parent viewmodel activated
  4. App router isNavigating now false, so parent view shown in app router-view
  5. Parent router isNavigating is true, spinner shown instead of parent router-view
  6. Child viewmodel activated
  7. Parent router isNavigating now false, so child view shown in parent router-view

Is there any way to make this work?

1 Like
2

I’ve discovered I can access the parent router in the activate method of the child and set isNavigating:

this.router.parent.isNavigating = false;

But this doesn’t achieve what I want, because the activation chain of the parent is still waiting for the child to finish. I’d like to say something like this.router.parent.stopActivation() or this.router.parent.bindView().

Anyone any ideas? The only way I can see to achieve what I want is to not use a child router and manually activate the child viewmodels.

3

I have another workaround now, which is to put the spinner in each child view (with related busy property in each child viewmodel) and use the created life cycle function rather than activate. Would still be much nicer to be able to control the activation of the routers though and still think the default should be for the page to compose in stages, so the parent isNavigating will be false when its immediate routed child view model’s activation has finished.

1 Like