How to temporarily block view from refreshing

Design
1

My Ember app is auto-refreshing certain routes on a regular time basis like this:

import Ember from ‘ember’;

export default Ember.Route.extend({ model() { //returns a promise },

afterModel()
{
    Ember.run.later(this, function()
        {
            this.refresh();
        }
    , 2000);
}

});

and, as expected, the page’s data is updated accordingly by Ember. The app’s CSS defines some animations used to present document’s structure updates smoothly to the user, for example, when a component is resized by Javascript code event handler (“click to expand” effect). Unfortunately, when the data is updated while a CSS animation is running, the animation is truncated and jumps to the end.

Any way to prevent this? I was thinking about preventing the component’s data from being updated for the period of time in which the animation is running.

Thanks!

2

Ember Concurrency has the idea of task groups which allow one running task (your animation work?) to block the running of another task (your data refresh). Might be worth a look