How to temporarily block view from refreshing


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 },

{, function()
    , 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.



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