UI blocker and simple loading spinner for Meteor apps

overview

This package simply works after adding into your project, - additional setup isn't required

Installation

meteor add ostrio:uiblocker

Usage

Block screen:

1UIBlock.block();
2UIBlock.block('some message'); // <-- Block with message

Unblock screen:

1UIBlock.unblock();

Check if screen is blocked:

1if (UIBlock.isBlocked) {
2  // Do something
3}

`Meteor.status` example:

1Tracker.autorun(function () {
2  if (Meteor.status().connected) {
3    UIBlock.unblock();
4  } else {
5    UIBlock.block(Meteor.status().status);
6  }
7});

Change message on the fly:

1UIBlock.block('Sending email...');
2Meteor.setTimeout(function () {
3  UIBlock.message.set('Please wait...');
4}, 1000);

`Meteor.call` example:

1UIBlock.block('Sending email...');
2Meteor.call('sendEmail', subject, body, function (err, res) {
3  UIBlock.unblock();
4});

Recommended DOM structure

Recommended to have main block element right after body tag, which wraps all website content. ID and Class name doesn't make any sense, in example we will use [tw]bootstrap's .container as a wrapper for content.

1<html>
2  <head>
3    <!-- ... -->
4  </head>
5  <body>
6    <div class="container">
7      <!-- All content here -->
8    </div>
9  </body>
10</html>