Reputation: 38583

Ember Loading Template never displaying

I have tried

/app/routes/loading.hbs
/app/pods/loading/template.hbs
/app/pods/loading.hbs
/app/pods/application/loading/template.hbs
/app/pods/application/loading.hbs
/app/templates/loading.hbs
/app/templates/application-loading.hbs

None of the above work.

I added this to my application route and it works, but it is only rendering the spinner in the application template, not the appropriate outlet of the current route.

  //app/pods/application/template.hbs
  {{#if isLoading}}
      <i class="fa fa-spinner fa-pulse fa-5x"></i>
  {{/if}}

  //app/pods/application/route.js
  actions: {
    loading(transition, originRoute) {
      let controller = this.controllerFor('application');
      controller.set('isLoading', true);
      transition.promise.finally(function() {
        controller.set('isLoading', false);
      });
    }
  }

What am I doing wrong? Why are the templates not rendering? I am using [email protected] with [email protected].

Upvotes: 4

Answers (5)

Roy Bao

Reputation: 76

Been struggling on this as well, Patrick's answer helped a lot but calling super according to that thread didn't help either. Removing the loading action did help, but the root cause is actually not because of having the loading action. You can keep the loading action but in order to have the loading template render you need to return true; from the loading action, if you don't return true then the loading template will not be rendered.

My guess is that if you don't return true the event stops propagating which prevents the default behaviour from happening

Upvotes: 3

Benny Alex

Reputation: 156

You dont need to overwrite the loading-action in the route. Just define a app/templates/loading.hbs. Whenever you load a model from any route, the loading template will shown automatically. if you want to use a attribute to show a loading state you shoud make an loading-service, which you can then access in every route, controller or component.

EDIT: You should also read the guide: https://guides.emberjs.com/v2.5.0/routing/loading-and-error-substates/

If you follow the guide you shoud see how the loading-template works.

Upvotes: 0

Patrick Ng

Reputation: 30

I have been struggling with this problem for two days. I'm using Ember 2.5.0 and a pod structure. My loading template is located in app/templates/loading.hbs. Diving deeper into it led me to ember-resolver and this issue. If you get rid of the loading action, it will show the loading template - very strange. The thread says to call super if you need to catch the event but that has not worked for me.

Upvotes: 1

Anil Maurya

Reputation: 2328

If you look at docs more carefully then you will see

It implies that you need to add

/app/pods/application-loading/template.hbs

Upvotes: 2

Jevado

Reputation: 392

Have you tried

/app/templates/loading.hbs

without using the loading action?

The loading action stops the propagation of the loading event, unless you return true from the action.

Upvotes: 0

Ember Loading Template never displaying

Answers (5)

Related Questions