Render blocking when returning a promise in Activate()

Help Requests
1

I should clarify that I have already found a workaround for this, but it’s behaving in a way that I feel is incorrect, and seeing no one else complain about this makes me feel like maybe something is set up incorrectly.

This project is using webpack. I have one router in my application. The view models on my routes each have a promise that fetches data from my server in the Activate() method. If the route loads from a fresh site load (f5) the router will delay the rendering of the entire application, even assets outside of the <router-view>. It’s just a blank white page while pending load.

activate(params, routeConfig, navInstruction: NavigationInstruction) {
  
        if (!navInstruction.previousInstruction) {
            this.getMyData();
            return;
        }

        return new Promise(resolve => {
            this.getMyData()
                .then(() => {
                    resolve();
                });
        });
    }

You can see that I “fixed” this by checking for a previous route and handling things different if there is none. If you take that code away, the problem described above happens.

1 Like
2

There are a few ways to handle this.

  1. show a flash screen with loading icon, if it’s important to have all relevant data loaded
  2. move logic to more reactive style, and add proper guard:
  propChanged() {
    if (this.dataReady) {
      // ...
    }
  }

then you can just ignore returning the promise in activate
3. … there should be more ways to handle this, but it would depend though, maybe more folks can help with you on this matter

3

this.getMyData() shows a full screen loading indicator that exists at the app context (so it can exist between routes) so it’s not so much a question of alternate ways to handle this. I think I’ve already handled it gracefully. I suppose my question is if I’m missing anything. It doesn’t seem right to me that operations happening from within a router-view can defer the rendering of the context that calls the router-view.