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

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

Leave a Comment