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.
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 template(name="loader") div#loader.template div(class="{{color_class}}").vertical-align.text-center i.fa.fa-5x.fa-cog.fa-spin // /loader/loader.styl #loader height:100%
In this case, we are using the fa-spin class to make the cog...