Choppy component animations during render


Using Semantic UI’s ember library for integration. I have a route where multiple components reside. One component has a couple actions that have related animations, specifically switches that move left and right; these actions also trigger calls to a service that pulls data from a remote API. The pulls repopulate existing data within another component in the same route.

I’m seeing some ‘chop’ in the button animation between the time the button is clicked and the time the data gets re-rendered in the sibling component. After the sibling component has all of its data, the animation completes. It’s not a huge deal, but on slower systems it becomes more noticeable and gives the UI a bit of a choppy feel.

There are probably quite a few ways to approach this issue, one of which is addressing whether or not Semantic UI is using CSS transitions or javascript to execute the animation. The method I’ve thought of is preventing execution of the action until the animation is complete, or vice-versa. This seems like it could come in useful in other areas as well.

Is there an accepted method of performing this ‘wait’ on an action in order to reduce chop in the UI?