Page loader - Trying to keep track of global data loads

blaze
1

Hi, I’ve created a global page loader template and didn’t want to rely on a router based solution. The following code seemed to work in the beginning for me:

Template.onRendered(function () {
this.autorun(() => {
Tracker.afterFlush(() => {
endLoad();
});
startLoad();
});
});

Basically running a loader when the page is rendering and then stopping it when the page is loaded.

The problem I am finding is that I am using a lot of reactive data stores on my pages and the above code isn’t really tracking it well. Have looked into using Tracker.autorun, but don’t have a winning solution yet.

Any thoughts?

2

Hard to know specifically, but I think generally your issue is not easily solvable. It’s hard to know what the tracker is really tracking, and there is no real way of knowing when it’s fully completed the full render (other things triggering further reactivity etc.).

Generally I use page loaders main or ‘container’ component templates, and use subs.ready() in the helper. Have not looked much into further complexity, since I try to avoid “spinner hell” for the user.