CODEWITHSUNDEEP
ember.js
NicholasJohn16
NicholasJohn16

Reputation: 2409

Create loading substate for application route

I'm trying to create a loading substate for the Application route using the new named substate options added recently, but for some reason, I can't get it to work. Originally, I just had created a simple template, loading.hbs, and it worked automatically, but because of the issues with substates on the application route, some of my UI was still visible. I'd like to correct this now.

I've tried renaming and moving the template around to the following places:

/templates/application_loading.hbs 
/templates/application-loading.hbs
/templates/application/loading.hbs

None seem to work though. I don't need any custom routing behavior so the default generated route should do me, unless its a requirement for this to work. Documentation on this feature seems to be sparse. I found the jsbin for this feature and I should be doing it correctly according to it unless there's some issue with ember-cli.

Thank you for any assistance.

DEBUG: -------------------------------
DEBUG: Ember      : 1.11.1
DEBUG: Ember Data : 1.0.0-beta.16.1
DEBUG: jQuery     : 1.11.2
DEBUG: -------------------------------

Upvotes: 5

Views: 888

Answers (3)

varblob
varblob

Reputation: 158

It looks like you must have a moduleBasedResolver

https://github.com/emberjs/ember.js/blob/06e41ad7ccd28558dd4e651aa070bc06f7757821/packages/ember-application/lib/system/application-instance.js#L153

https://github.com/emberjs/ember.js/blob/b80d66f71d75ad0db9022438ed58a41ac84f45f5/packages/ember-routing/lib/system/router.js#L79

When I look at this value in an ember-cli app it's undefined. Which seems odd because ember-cli is es6 module based.

Then I found this https://github.com/emberjs/ember.js/issues/10756 looks like you can add a route application-loading or hack in moduleBasedResolver onto the registry as a temporary solution.

and

https://github.com/emberjs/ember.js/pull/10944 should fix the issue in the longer term.

It appears you already found this, it did not appear loaded when I wrote this answer. Sorry for the noise.

Upvotes: 0

NicholasJohn16
NicholasJohn16

Reputation: 2409

Really should've google it before adding the bounty.

Evidently, this feature is broken. There's a fix already though, just needs to be merged and released.

Upvotes: 1

mpowered
mpowered

Reputation: 13525

I believe that loading.hbs and error.hbs are the application's loading and error substates. Your application-loading.hbs doesn't exist to Ember, which is why it's not working.

As for the additional UI elements: I believe the rest of application.hbs is going to render regardless, so the only suggestion I would have is to nest all those elements one level deeper. It sounds like a big ordeal, but it's actually not that bad:

In router.js:

this.resource('whatever', {path: '/'} function() {
  // All your existing routes
});

Then rename application.hbs to whatever.hbs and change application.hbs to just have {{outlet}} in it. This should really change very little else in practice, but it will keep the rest of your UI elements from rendering until loading is complete.

Upvotes: 1

Related Questions