title: How do I keep view template from loading until all Promise data has resolved? [Angular2, JavaScript]
body: <p>I'm trying to get my app to render data that is the result of async http requests which return Promises. I've set up my code so that its executed in the <code>ngOnInit</code> method, so that all the logic will process before the view renders. However, I'm having an issue where most of the Promise data loads before its rendered, but some of the data lags (probably due to multiple HTTP requests), so the rest of the view is already rendered and then that data pops in several seconds later.</p>
  
  <p><a href="https://github.com/mattlayton1986/pokedex-onsen" rel="nofollow noreferrer">Here is the full codebase on Github</a>. </p>
  
  <p>I'm fairly new to Angular2 and ES6 Promises, so I'm still playing around with how Promises resolve and send back data so bear with me.</p>
  
  <p>My <code>loadMore()</code> method is called from <code>ngOnInit</code> to load initial data when the page is loaded. </p>
  
  <pre><code>loadMore() {
      this.isLoading = true;
  
      this.pokedexService.getPokemon(this.pokemon.length, 9)
      .then(pokemon =&gt; {
        pokemon = pokemon.map(p =&gt; {
          p.imageLoaded = false;
          this.pokedexService.getPokemonTypes(p.id)
          .then(types =&gt; {
            p.types = types;
          });
          return p;
        });
  
        this.pokemon = this.pokemon.concat(pokemon);
        this.isLoading = false;
        this.error = false;
      })
      .catch(() =&gt; {
        this.error = true;
        this.isLoading = false;
      })
    }
  </code></pre>
  
  <p>Part of the issue (I think) is the number of calls to the API: <code>getPokemon()</code> makes one call to retrieve 9 Pokemon API resources, and then <code>getPokemonTypes()</code> makes one call for each of those 9 API resources. Both methods return Promises -- however, the data loaded from <code>getPokemon()</code> loads into the view properly; its the Pokemon types that are loaded from each call to <code>getPokemonTypes()</code> that pops into the view after the fact. Here is the logic from <code>pokedex.service.ts</code> for both <code>get</code> methods:</p>
  
  <pre><code>getPokemon(offset: number, limit: number): Promise&lt;any&gt; {
      return this.http.get(`${this.baseUrl}?offset=${offset}&amp;limit=${limit}`)
      .toPromise()
      .then(response =&gt; response.json().results)
      .then(items =&gt; items.map((item, idx) =&gt; {
        const id: number = idx + offset + 1;
        return {
          name: item.name,
          sprite: `${this.baseSpriteUrl}${id}.png`,
          id
        };
      }));
    }
  
    getPokemonTypes(id: number): Promise&lt;any&gt; {
      return this.http.get(`${this.baseUrl}${id}/`)
      .toPromise()
      .then(response =&gt; response.json())
      .then(details =&gt; {
        const types = details.types
        .map(t =&gt; {
          return t.type.name;
        });
        return types;
      });
  </code></pre>
  
  <p>What would be the best way to optimize the code to make ALL the data load together without creating a several (5-7) second delay in rendering the data?</p>