Showing a css-based animation while running a computationally-intensive javascript script

Question

I'm using lunr.js to run a client-side-powered search on a static website. As the content grows, it takes longer for lunr.js to index all of the pages. This is fine, but I'd like to have an animated loading bar so that people know the page is actually doing something. I tried adding an animated twitter bootstrap 3.3.1 progress bar which is visible until the index finishes loading, but it doesn't seem to animate while the index is being loaded.

Here's the live example: http://rosindex.github.io/search/

The code that's running on each document to index is in jquery.lunr.search.js#L87

The progress bar defined in package_search.html#L15

Is this a limitation of the way that bootstrap renders the animation, or is there something I can do that will allow it to run while this index is being loaded?

Answer 1

While lunr is indexing the browser cannot do anything else, which includes, in your case, properly animating the progress bar.

You could try performing the indexing off the main ui thread by using a web worker. This is how lunr is used on the Angular docs site, there is a good article explaining some of the implementation here http://www.bacondarwin.co.uk/angularjs-docs-performance/

If your data is fairly static you might also look into pre-building the lunr index. Loading a pre-built index is much faster and you should see no issues with indexing locking up the browser.

You can use https://github.com/olivernn/lunr-index-builder for building the index from the command line and then loading the index in the browser like so:

var index = lunr.Index.load(serialised_index)