O'Reilly logo

Meteor: Full-Stack Web Application Development by Marcelo Reyna, Isaac Strack, Fabian Vogelsteller

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Loading data

The performance of our frontend can suffer if we do not load data correctly because it can make the DOM redraw quickly multiple times. If the calculations are complex, then we need to wait for all our data to be available and calculate everything in one single sweep. If we do not wait for data, then calculations will run as the data is received, which in turn will cause the DOM to redraw multiple times very quickly.

To solve this issue, we can easily check whether our subscribers are ready and show a loading symbol until they are.

Designing the loading indicator

We start by creating a loading template. Let's use font awesome to handle our animations and make sure that we can easily change the color of the loader:

//- /loader/loader.jade ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required