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?

https://github.com/broerse/ember-cli-blog/blob/master/app/templates/components/refresh-indicator.hbs

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.

https://github.com/broerse/ember-cli-blog/blob/master/app/components/refresh-indicator.js

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');

https://github.com/broerse/ember-cli-blog/blob/master/app/controllers/application.js

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.

https://github.com/jasonmit/async-container#conditionally-disable-while-promise-is-resolving

1 Like
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);
            });  
        }
    }, 
});
1 Like