Freezes with a component

1

Hi all! I have page freezes (few seconds lags) when I go to or from page with certain component. Here is this component: hbs:

{{#if hasData}}
  <span>Some text!</span>
  {{#each wholePhrases as |suggestion|}}
    {{markdown-to-html suggestion extensions="internal-links"}}
  {{/each}}
{{else if initialized}}
  <span>Yet another text!</span>
{{else}}
{{spinkit-three-bounce}}
{{/if}}

js:

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['suggestions-box'],
  simpleStore: Ember.inject.service(),
  currentUser: Ember.inject.service(),
  initialized: false,

  hasData: Ember.computed('suggestedIngredients.[]', function() {
    return this.get('suggestedIngredients.length') > 0;
  }),

  ingredientsCocktails: Ember.computed('suggestedIngredients.[]', function() {
    let ingredientsCocktails = [];
    const store = this.get('simpleStore');
    const user = this.get('currentUser');
    for (var i = 0; i < this.get('suggestedIngredients.length'); i++) {
      let sugIngredient = this.get('suggestedIngredients').objectAt(i);
      let ingredient = store.find('ingredient', sugIngredient.get('ingredientId'));
      let recipes = sugIngredient.get('recipeIds').map((item) => store.find('recipe', item));
      recipes = recipes.filter((item) => item.get('published') || user.get('role') == 'ADMIN');
      ingredientsCocktails.push({
        name: ingredient.get('name'),
        recipes: recipes,
        hasData: recipes.length > 0
      });
    }
    ingredientsCocktails = ingredientsCocktails.sort((a1, a2) => a2.recipes.length - a1.recipes.length);
    return ingredientsCocktails;
  }),

  wholePhrases: Ember.computed('ingredientsCocktails.[]', function() {
    let phrases = [];
    const cocktailsCount = 3;
    for (var i = 0; i < this.get('ingredientsCocktails.length'); i++) {
      let phrase = '**' + this.get('ingredientsCocktails')[i].name + '** - ';
      let cocktails = this.get('ingredientsCocktails')[i].recipes;
      for (var k = 0; k < cocktails.length; k++) {
        if (k == cocktailsCount) {
          break;
        }
        phrase += '[' + cocktails[k].get('name') + '](/recipes/' + cocktails[k].get('id') + '), ';
      }

      if (cocktails.length > cocktailsCount) {
        phrase += 'и еще ' + (cocktails.length - cocktailsCount).toString();
      } else {
        phrase = phrase.substr(0, phrase.length - 2) + '.';
      }
      phrases.push(phrase);
    }
    return phrases;
  }),
});

When I just have removed each loop from component’s template all starts to work fine. Could you give me an advice how to deal with it?

2

I tried to remove markdown component (show just text w/o formatting) and tried to show just indices instead of text. But it doesn’t help - lags still here. Only when I removed the whole each section lags disappeared.

UPDATE: Looks like any request to ingredientsCocktails in wholePhrases causes these lags.