CODEWITHSUNDEEP
javascriptuser-interfacemeteoruser-experiencemeteor-blaze
jasongonzales
jasongonzales

Reputation: 1597

Meteor 0.8.0+, how to provide 'busy spinner' for long running code?

I have a long running template helper. It relies on three separate collections and performs a lot of looping to pivot some data for daily reports. The users are okay with it being long running, but I need to give them feedback that the client is busy calculating what will be rendered to the UI. The problem for me is that using the waitOn hook only gets me part way there and the rendered callback doesn't work unless I am adding a new row to the template (which is almost never). In fact, I wonder if the Meteor team realize this. It seems like a feature that would be nice to have. I have a table with a the same number of rows and columns, but the values in the cells change. How can I show the users some feedback while the JS to calculate those cells runs?

Upvotes: 0

Views: 169

Answers (3)

Hubert OG
Hubert OG

Reputation: 19544

The Meteor way would be to use a reactive variable:

HTML

<template name="busy">
  {{#if processing}}
    spinner
  {{else}}
    Done, showing results: ...
  {{/if}}
</template>

JS

var data = new ReactiveDict();

Template.busy.rendered = function() {
  data.set('processing', true);
};

Template.busy.processing = function() {
  return data.get('processing');
};

var processing = function() {
  ...
  // Looooong calculations
  ...
  // Or even async
  ...
  data.set('processing', false);
};

Upvotes: 3

jasongonzales
jasongonzales

Reputation: 1597

OK, so the key was twofold. I needed to purposely delay the "Loading" feedback I was providing. I presume that is so that it was called after the updating elements were actually finished rendering. I used the underscore delay function like so:

_.delay removeUpdating, 500

removeUpdating just removes a class on each table cell 'updating'.

And then at the beginning of this same helper method I add those classes to all the cells.

The delay coupled with a nice CSS3 background animation gives the user a nice cue that the fields are updating when they navigate!

I'd prefer not to be adding a delay manually, nor using jQuery to add and remove classes, so any better suggestions are appreciated!

Upvotes: 0

Don Daniello
Don Daniello

Reputation: 36

I have had a similar issue. I had to show an indication when a table is updated. I observed the query (check Collection.observeChanges) and ran a jQuery-powered flash on the row.

In your case, it seems like you are doing the compuation on your own and supply it to the Template as a variable. Put a spinner in the original template and at the end of your computation hide it with jQuery.

Upvotes: 1

Related Questions