Query param change not causing full transition even with `refreshModel: true`


#1

Ember waits for the data promise to resolve before showing any UI. This introduces a terrible UX where the page is blank before the data loads, instead of using the time when the data is loading to render the templates and load any other asserts (e.g. images).

I have tried to workaround this issues like this:

export default Ember.Route.extend({
  queryParams: {
    category: {
      refreshModel: true
    }
  },
  model: function(params) {
    console.log('model loading');
    return this.store.all('klub', params);
  },
  setupController: function(controller, model) {
    console.log('Setting up controller');
    var category = controller.get('category');
    this.store.findQuery('klub', {category: category}).then(function(results){
      this.store.pushMany('klub', results);
      controller.set('model', results);
    }.bind(this));

    controller.set('model', model);
  }
});

The model first returns empty (there is no data in the store), the UI renders, and then in the setupController method new data is fetched which replaces the old empty model.

Unfortunately, query param changes do not call the setupController method, even though I opt into a full transition by setting refreshModel: true.


#2

I am having the exact same issue. Did you find a solution that didn’t involve moving your data code into the model hook?