Partially loading data

Design
1

Hi everyone,

I’ve put together a small gallery app based on ember and ember-model. Basically it retrieves album information (can also be nested) and displays the entities (photos or albums) in a simple grid. It’s working fine, but has 1 major problem right now: the loading of the full model takes too long!

Current design and issues:

The router waits until the model is completely loaded. The model is always a parent (album) and an unlimited number of children (other album- or photo-entities). The metadata can be fetched fast, but a photo can be public or non-public. In the latter case the image has to be retrieved via a separate request (base64 encoded) which can take some time.

Status quo: In the adapter’s find() method all entities are fetched, and for each non-public image the base64 encoded data is fetched (all promise based).

G3.Album.adapter = Ember.RESTAdapter.create({
  find: function(record, id) {
    var record;

    // loading album data recursively, then loading all image data

    return new Ember.RSVP.all(promises).then(function(){
      return record;
  }
});

From a design perspective, how could I achieve the following best:

  1. Have the router transition to my route when all metadata is loaded, but the image data is still being fetched (partially loaded)?
  2. Display a placeholder image while the image data is being fetched and then replace it with the loaded image?

Thanks, David