Showing the Loading Route when a promise is returned from an action handler

1

Hi All!

Just a quick question about the showing the “Loading” route during an action handler. We are using Stripe to process card details and need to do a few async processes with the Stripe API but we don’t want to setup a complicated set of routes where the model: handler is the one communicating with stripe.

I have stumbled across this document on the net https://gist.github.com/machty/6879857 and I can see that someone is looking into the specifics of the loading screen but i’m wondering if there is an easy way to get it to show when an action is taking a while?

Cheers,

  • Chris
2

This gist is a better overview of loading/error substates, and we’ll be moving something like this to the ember guides website when this releases in a week, but it sounds like that won’t be super useful in the case of what you’re doing; it seems like you want some loading UI right on the same route until a promise resolves; in this case it might make the most sense to, when you create the promise, set some isLoading property on the controller, and unset it when the promise resolves. Alternatively you could render into an outlet and then unrender when the promise fulfills. Other solutions exist too.

3

+1 on @machty’s suggestions. A single {{#if ...}} in your template is not too bad.

This kind of problem would benefit from routes allowing url-less substates, like the Ember Router of yore did.

4

Ok… So i understand that it is an easy thing to do it like @lukemelia suggests, i’m not about to argue that a single {{#if ...}} in my code will make it unreadable or hard to maintain but I like to think about the “idiomatic ember” way of doing things.

I had originally set this up to do the api calls in the model: function call of a subroute and then I would just transition to that route when someone preformed an action. This did seem a bit difficult to maintain and that’s why i’m looking for other solutions.

I might try making a helper method that generates a promise and on a finally it clears the loading screen, but i’m still not sure if what i’m doing would be the “right” way of doing things.

5

Right so i’m trying to implement the Legacy Loading view from here: Loading / Error Substates - Routing - Ember Guides but it is giving me some grief. I’m getting a deprecated warning and an error:

DEPRECATION: Using the defaultContainer is no longer supported. [defaultContainer#lookup] see: http://git.io/EKPpnA
    at Object.lookup (https://localauth.bloo.ie/app/bower_components/ember/ember.js:38130:11)
    at Ember.View.Ember.CoreView.extend.templateForName (https://localauth.bloo.ie/app/bower_components/ember/ember.js:22560:35)

so i’m thinking that right now the docs are wrong? :?

Also tried following this: http://emberjs.com/guides/views/defining-a-view/ but still getting the same error