5

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: -------------------------------
NicholasJohn16
  • 2,390
  • 2
  • 21
  • 45

3 Answers3

1

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.

mpowered
  • 13,162
  • 2
  • 15
  • 18
1

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.

NicholasJohn16
  • 2,390
  • 2
  • 21
  • 45
0

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.

varblob
  • 158
  • 9
  • Because part of the UI, what's in the application template, is still visible. You should read the paragraph right after what you quoted: "Named substates add a new lookup method for substates. The name of the route is pre-pended onto the substate. So a valid loading substate for application can be defined as application_loading." Named substates are meant specifically to fix this problem, but for some reason it isn't working. – NicholasJohn16 May 03 '15 at 21:10
  • Aha yah I misread that one. I think I found out where the problem is though. Updating answer. – varblob May 04 '15 at 12:52
  • Gave you the bounty for the effort. :P – NicholasJohn16 May 04 '15 at 21:25