In Meteor, how do I show newly inserted data as greyed out until it's been confirmed by the server?

Question

Say my application has a list of items of some kind, and users can insert new items in the list.

What Meteor normally does is: when a user inserts an item in the list, it appears in their browser immediately, without waiting for server confirmation.

What I want is: when an item is in this state (submitted but not yet acknowledged by the server), it appears at its correct position in the list, but greyed out.

Is there a way to make Meteor do this?

Answer 1

Sure. Make a method that does the insertion. When the method runs, have it check to see if it is running in simulation, and if so, set a 'temporary' or 'unconfirmed' flag on the inserted item. Use that to decide whether to render the item as greyed out.

Assuming you're using MongoDB:

// Put this in a file that will be loaded on both the client and server
Meteor.methods({
  add_item: function (name) {
    Items.insert({name: name,
                  confirmed: !this.isSimulation});
  }
});

Calling the method:

Meteor.call("add_item", "my item name");

That's all you need to do. The reason this works is that once the server has finished saving the item, the local (simulated) changes on the client will be backed out and replaced with whatever actually happened on the server (which won't include the 'unconfirmed' flag.)

The above is the simplest way to do it, but it will result in all of the records in your database having a 'confirmed' attrbiute of true. To avoid this, only set the confirmed attribute if it's false.

Refer to this part of documentation for more information about isSimulation and Meteor.methods

Answer 2

This is what I did added an observer on the server side, I created a variable called notify false from the client side itself once the server receives the udpate it will make notify true and the client will be updated on the same.

Collection.find({"notify":false}).observe({ 
    "added" : function(first){ 
        collection.update({"_id":first._id},{$set : {"notify":true}}); 
    }
});