mercredi 13 avril 2016

showing promises' loading state

ok, this might be a complicated one:
I have a controller that loads additional data depending on several options. In the corresponding template a component is called that shall display that data.
What I want to achieve is to display a loading state while loading that data.
I finally managed to do that with that (here very reduced) code:
(basicly I set a parameter on the promise-callbacks an pass that into the component)

// controller
fetchedEvents: Ember.computed('filterEventsSwitchFuturePast', function() {
    let _this = this;
    this.set('loadingEvents', true);
    if(this.get('filterEventsSwitchFuturePast')) {
        let promise = this.store.query('event', {..some filters here...} });
        promise.then(function() { //promise resolved
                _this.set('loadingEvents', false);
            });
        return promise;
    } else {
        let promise = this.store.query('event', {..other filters here...});
        promise.then(function() { //promise resolved
                _this.set('loadingEvents', false);
            });
        return promise;
    }
}),

..

// template calling the component
    {{event/event-list
            events=fetchedEvents
            isLoading=loadingEvents
    }}

which gives me a loading State in that component which resolves once all the data is loaded. All fine til here.

Now here comes my problem:

I need to have the fetchedEvents computed property depetend on the model's related events - so that, when I add a new event, the list get's updated.
So I added model.events to the observed properties:

// controller
fetchedEvents: Ember.computed('filterEventsSwitchFuturePast', 'model.events', function() {
     //....the rest is the same as before!
}),

Now the list get's updated, but my beutiful property loadingEvents seems bouncing between it's states. It starts not loading, then loads for a second, goes back to not loading - but with zero results! - and finally hits it's correct final state.
The result is a UI that keeps saying - no results - loading - no results - here's the results.
Not a realy lovely UI, I'd say.

The route's/component's/template's model is loaded and shown far before that happening, so I don't think hooking in there might be a solution.

Do you guys have any suggestions how I could solve/improve that?
Any other hooks I can get into?

I'm on Ember 2.0




Aucun commentaire:

Enregistrer un commentaire