Show loading page when saving model data


#1

I have Route action that gets data from Component and saves it to the API server. Sometimes network is slow and I want to show message to user that app have not hangs, something is being done. Now since am basically in the same route, I guess there is no transition and so the conventional “loading” wisdom does not help here.

What can I do to show loading template when the waiting for model below to resolve or reject?

Thanks

The Code

export default Ember.Route.extend({  
    actions:{
        signUp(userInfo){  
            this.user = this.store.createRecord('user', userInfo); 
            this.user.save().then(function(){ // 
            }, function(error){ //error     
            }).catch(function(err) { 
            });  
        }
    }, 
});

#2

Perhaps use a spinner?

http://bloggr.exmer.com/

There is a bug in my code so don’t copy that 1:1


#3

Hi, My problem is rather how to do it. I already have template for progress indication but don’t know how to show it while saving model


#4

I just kick the spin in the adapter and it will stop if there are no more updates.

not sure if this is the best way.


#5

@broerse thanks for the code. Can you explain a bit on how I activate it in my model save? Is it possible to reuse my loading.hbs template *temporary transition to it) using your code?

Again thanks a lot


#6
      var appController = getOwner(this).lookup("controller:application");
      appController.send('kickSpin');

#7

You can use a spinner and a isShowingSpinner variable to show if it’s visible in the template or not. Initially set it to true before saving then set it to false after save success.

export default Ember.Route.extend({  
    isShowingSpinner: false,

    actions: {
        signUp(userInfo) {  
            this.user = this.store.createRecord('user', userInfo); 

            this.set('isShowingSpinner', true);

            this.user.save().then(function() { 
              this.set('isShowingSpinner', false);
            });  
        }
    }, 
});

#8

thanks @broerse and @rmmpaderes The solution work nicely.


#9

I built an addon to abstract this away since it’s such a common pattern.


#10

Thanks for that! Its nice addon


#11

You’d better clear the flag in a finally block, so that the spinner is turned off even when an error happens:

export default Ember.Route.extend({  
    isShowingSpinner: false,

    actions: {
        signUp(userInfo) {  
            this.user = this.store.createRecord('user', userInfo); 

            this.set('isShowingSpinner', true);

            this.user.save().finally(function() { 
              this.set('isShowingSpinner', false);
            });  
        }
    }, 
});