How to created a load feature during account creation with Meteor - meteor

Question

I have a Meteor project where there's generally a delay during the sign up process for new users due to slow connection etc. Is there a way to create a loading screen during this procedure?
I do currently have the sacha:spin package which I use with the iron:router package when different pages are retrieving data to yield. Eg. for my home page I display all the users (mainly for debugging purposes) using this code in my routes:
Router.configure({
layoutTemplate: 'layout',
loadingTemplate: 'loading'
});
Router.route('/', {
name: 'home',
controller: 'HomeController'
});
HomeController = RouteController.extend({
template: 'home',
waitOn: function() {
return Meteor.subscribe('users');
}
});
Here's my spinner template (nice and simple):
<template name="loading">
{{> spinner}}
</template>
This setup works so nicely, so I was wondering if it would be easy to implement on my create account procedure that I have here:
Template.signup.events({
'submit #signup-form': function(event, template) {
event.preventDefault();
var validated = true,
username = ...,
email = ...,
firstName = ...,
lastName = ...,
password = ...,
// Validation
if (validated) {
Accounts.createUser({
username: username,
email: email,
password: password,
profile: {
firstName: firstName,
lastName: lastName
}
},
function(err) {
if (err) {
// Handle it
} else {
Router.go('home');
}
});
return false;
}
});
Can I use my loader that I used for my home template with the create account procedure?

Answer 1

I would use reactive-var to handle this.
https://atmospherejs.com/meteor/reactive-var
Then, in your template code:
Template.signup.onCreated( function() {
Template.instance().isLoading = new ReactiveVar(false);
});
Template.signup.helpers({
isLoading() {
return Template.instance().isLoading.get();
}
});
Template.signup.events({
'submit #signup-form': function(event, template) {
event.preventDefault();
var validated = true,
username = ...,
email = ...,
firstName = ...,
lastName = ...,
password = ...,
// Validation
if (validated) {
template.isLoading.set(true);
Accounts.createUser({
username: username,
email: email,
password: password,
profile: {
firstName: firstName,
lastName: lastName
}
},
function(err) {
if (err) {
// Handle it
} else {
Router.go('home');
}
template.isLoading.set(false);
});
return false;
}
});
And in the current signup template you'll need to have the structure:
{{#unless isLoading}}
<!-- YOUR CONTENT GOES HERE -->
{{else}}
{{> loading}}
{{/unless}}