Can't get a loading template to display

1

I’ve been trying for hours now to get a “loading” template to display. If I try to manually add the loading route, it says one already exists. If I try to show the template in the browser, I just see a blank page.

UPDATE: (solved) I checked another post here and tried something. It seems to have worked. I added a folder called “loading” and added template.hbs to that folder (pods), and it displayed. Success! https://discuss.emberjs.com/t/pods-loading-error-templates/8575/3

I have some nested routes under a “logged-in” route. On all the child routes, I do a “resetNamespace: true”. I don’t know if this is the right way to do that, but it achieves what I want and got the example from another thread.

My router:

Router.map(function() {
  this.route('logged-in', {path: '/'}, function() {
    // all logged in routes nested under here
    this.route('index', {path:'/', resetNamespace:true}),
    this.route('dashboard', {path:'/dashboard', resetNamespace:true}),
    this.route('customers', {path:'/customers', resetNamespace:true})
    this.route('test', {path:'/test', resetNamespace:true})
  })
  this.route('login')
});

All of my routes are working fine. Authentication is working fine (ember-simple-auth). But no matter what, a loading template will never be displayed. The one test I am trying is on the “customers” route. When created the route, I used the --pod switch so the route and template are created in a folder called “customers”. The model is loaded from a Web API on a local server. I rebuild the server or set a breakpoint to force the API call to take a few seconds to return data. When I click on a link to the customers route, the dashboard route/template (as an example) just stays there until the API call is done and the model is fetched. At that point, the customers template renders and displays all the records. A loading template never shows.

I have tried adding a loading.hbs file in the customers folder. I tried placing the loading.hbs in the app/templates folder. I tried naming it logged-in-loading. I tried naming it customers-loading. No matter what, it never displays.

It’s one of those issues where I need this to work or users are going to wonder what’s going on. The pages work, but this is just not good if I can’t display something while data is being loaded. I want to move onto the next hurdle with this project, but I am stuck on something that I thought was going to be really easy.

Appreciate anyone’s input and/or insight as to what I am doing wrong here. Admittedly, I am brand new to Ember. But I am determined to put this to use. My application is well-suited for this framework.

2

Glad to see you got it working. Loading states are a bit more complicated when using the pod structure. Once the new pods format lands, things should get easier (and easier to document well in the guides) again.

3

I was just dealing with this issue and finally found this post. Could this be something we add to the guides? I wouldn’t mind making a PR

4

We’d love to make loading states clearer, but pretty specifically have avoided documenting pods info in guides too much, as pods rapidly get confusing. But if you open a PR with your revisions we can see what we can work out!

2 Likes
5

@tleskin @acorncom It would be great if there is somewhat like a temporary solution in the guides for loading states for something like pods where there hasn’t been any usable alternative yet. It has been sometime. Talk about the value of incremental :slight_smile: This is somewhat akin to prematurely trying to avoid controllers because routable components is coming…

6

I think the loading template needs to be a default. It’s too hidden of a thing.

It should be to opt out of loading state handling rather than opt in

2 Likes
7

I agree with what you are saying @NullVoxPopuli

8

If we could make that idea happen, how do you think it could work?