Animated gif pauses when ember.js objects are loading

Question

Having a problem with a spinner actually spinning while ember.js is doing it's thing. I have a very generic jsfiddle example that illustrates the issue:

http://jsfiddle.net/h4ZcZ/2/

I assume there has to be a simple way to make this work as expected, but I am not finding it. I have tried using a JavaScript/CSS implementation of a spinner (spin.js) with the same results. I saw some stuff indicating this was typically an IE issue, but that is not the case here. This happens on all browser on Windows and i have tested on Mac Safari as well.

Answer 1

The problem is your for loop--you're basically locking up the thread. I would use timeouts and chunk up the work to be done to give other processing needs on the page the ability to execute.

Answer 2

As far as root cause, @ChristopherSwasey is correct. I asked a few other Ember developers about this. No solution, but two interesting thoughts that might help:

1) One developer reported that he has run into this problem and gotten around it by making sure the animated gif started before the long javascript execution.

2) Another developer suggested that using a virtualized list is the right path, so that only visible nodes are rendered. However, I'm afraid I don't know of an open source Ember virtualized list class yet.

Hope that helps.