# Render blocking when returning a promise in Activate()

**URL:** <https://discourse.aurelia.io/t/render-blocking-when-returning-a-promise-in-activate/2395>\
**Category:** Help Requests\
**Created:** [March 21, 2019, 2:45am UTC](https://discourse.aurelia.io/t/render-blocking-when-returning-a-promise-in-activate/2395 "2019-03-21T02:45:38Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![brian](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/brian/32/490_2.png) [@brian](https://discourse.aurelia.io/u/brian)\
**Post date:** [March 21, 2019, 2:45am UTC](https://discourse.aurelia.io/t/render-blocking-when-returning-a-promise-in-activate/2395/1 "2019-03-21T02:45:38Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [March 21, 2019, 11:27am UTC](https://discourse.aurelia.io/t/render-blocking-when-returning-a-promise-in-activate/2395/2 "2019-03-21T11:27:58Z")

</div>

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:

```auto
  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

---

<div class="post-metadata">

**Author:** ![brian](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/brian/32/490_2.png) [@brian](https://discourse.aurelia.io/u/brian)\
**Post date:** [March 21, 2019, 1:43pm UTC](https://discourse.aurelia.io/t/render-blocking-when-returning-a-promise-in-activate/2395/3 "2019-03-21T13:43:20Z")

</div>

`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.