Adding Loader Before Component is Rendered

1

I have a component that requires a fair amount of DOM change, and I want there to be a loader just on the component when attempting to render the component. The loader should disappear after the component has finished loading.

Initially, I added the following to the component:

willRender() {
    this.set('isLoading', true);
    this.set('stillLoading', true);
},
didRender() {
    this.set('isLoading', false);
    this.set('stillLoading', false);
}

Inside the template for the component, I have something like

{{#if isLoading}}
  {{loading}}
{{else}}
....

However, I noticed that setting the isLoading variable ends up changing the DOM. This causes willRender and didRender to get called again. Where is the best area to hook this into for the component lifecycle?

I am using Ember 2.5x+.

2

bump… did you found the solution?