Simple Progressive Enhancement

1

Hi everyone,

I’ve got a slow route that has both a chart and a table in it. The table loads fairly quickly but the chart can take a long time. They do not share data but I’m passing an RSVP.hash back from the model hook so they both wait for the chart data to be loaded.

How would you recommend breaking the data out so that they can be independent?

I was thinking of creating a nested route for the chart so that I could show the table and just show a loader on that piece of the page until the chart data comes back. But, I wanted to get everyone’s thoughts on this. The route is beginning to get deeply nested already. If there’s a way to avoid nesting in this situation, that would be worth investigating.

Thanks!

1 Like
2

This in my opinion has been one of the weakest parts of Ember for a long time.

However, we can now use ember-concurrency!

With this approach instead of using a model hook which blocks, you can have your components fetch their own data and keep their own loading state. As a result each component can display its data as soon as it is available.

3

If you do something like this:

model() {
  return Ember.RSVP.hash({
    tableData: this.store.find('table-data'),
    chart: {
      data: this.store.find('chart-data')
    }
  }
}

…then, ember would not wait for the chart.data promise to resolve as. Instead, it’ll return the promise for that value (so you’d need to make sure the thing rendering the chart is promise-aware).

And, while ember-concurrency doesn’t really work as a model hook, you can still just use an async function. So the above could be refactored as (haven’t actually tried this):

model: async function() {
  let tableData = await this.store.find('table-data');
  return { 
    tableData, 
    chartData: this.store.find('chart-data') 
  };
}
4

Very interesting. I’ve actually gotten this working using a nested route strategy:

@route 'table', ->
  @route 'chart'

Then, I just return promises from the model hooks and ember handles the loading states, etc… for me. It has been a pain to rename everything with this change #shouldhaveusedpods