The obvious thing to do was to show a sensible progress bar, so users could see that something was in fact happening. NProgress fit the bill very nicely – except that the various tasks involved in setting up crossfilter and building the charts block the UI thread, preventing any progress bar updates from actually taking effect.

This (in the general sense) is a common problem, and the common solution seems to be to use

window.setTimeout(myCode, 0);

to asynchronously queue the code up to be called after a zero millisecond delay (which means, after the stack is empty). This works great, but what if you have more than one thing you need to do?

I actually couldn’t find much in the way of people talking about this, which probably means that either there’s an incredibly obvious solution I don’t know about, or nobody is trying to show a progress bar for dc.js… After all, we do try to avoid big computations in the browser under usual circumstances. After you’ve read this, let me know if you’ve dealt with something similar!

Anyway, things are executed in the right order if you have a sequence of these calls, in Chrome at least:

This is basically what I did in my aforementioned app, and it works well – now I can increment the progress bar when the data is loaded, when dates have been parsed, when crossfilter has been set up, after creating each dimension, after creating each chart, etc and have a good indication of the actual loading progress – invaluable on a slower machine where there might be a several second wait.

Have you solved this problem a different way? I’m interested to hear any thoughts.