An implementation of a "promise region" for Backbone.Marionette. Lets you easily create and manage "loading" views, that are eventually replaced by a view with content.

loading_view_example.js

var LoadingView = Backbone.Marionette.ItemView.extend({
  template: 'Loading...'
});

var LoadedView = Backbone.Marionette.ItemView.extend({
  template: 'Loaded!'
});

var View = Backbone.Marionette.Layout.extend({
  template: '<div class="example"></div>',  

  initialize: function () {
    // note that there's a bug with Backbone.Marionette.Layout that means you can't set the regionType for all regions:
    // https://github.com/marionettejs/backbone.marionette/issues/674
    this.addRegion('exampleRegion', {
      selector: '.example',
      regionType: PromiseRegion
    })
    
    var promise,
        dfd = $.Deferred();
        
    setTimeout(function () {
      dfd.resolve(new LoadedView());
    }, 3000));
    
    promise = dfd.promise();
    
    // will show "Loading..." then three seconds later, replace it with "Loaded!"
    // view management (unbinding events, etc) is completely handled by Marionette
    this.exampleRegion.show(new LoadingView());
    this.exampleRegion.show(promise);
  }
  
})

promise_region.js

  var PromiseRegion = Backbone.Marionette.Region.extend({
    show: function (ViewOrPromise) {
      var self = this,
          show = Backbone.Marionette.Region.prototype.show;

      if (typeof ViewOrPromise.then === 'function') {

        ViewOrPromise.done(function (View) {
          show.call(self, View);
        });

      } else {
        show.call(this, ViewOrPromise);
      }
    }
  });