Displaying a loading spinner

[jme783]

Hi there!

I was wondering if the add-on had a way to support showing some kind of a loading indicator when pagination is occurring. I am using a remote paginated API, and as such, there is a bit of a time lag between when the user clicks on a page number from when the data is returned. Is there a place where I can safely hook into the request and return of the data to show/hide a spinner? After digging into the library a bit, I see that the fetchContent() in paged-remote-array.js method is the place where the actual request is triggered, and a promise is resolved when the data comes back:

fetchContent: function() {
    var res = this.rawFindFromStore();
    this.incrementProperty("numRemoteCalls");
    var me = this;

    res.then(function(rows) {
      var metaObj = ChangeMeta.create({paramMapping: me.get('paramMapping'),
                                       meta: rows.meta,
                                       page: me.getPage(),
                                       perPage: me.getPerPage()});

      return me.set("meta", metaObj.make());

    }, function(error) {
      Util.log("PagedRemoteArray#fetchContent error " + error);
    });

    return res;
  },  

Any thoughts on this? Another idea I had was to somehow use Ember loading substates to make this happen.

Thanks so much!

[engwan]

What I did is just use isFulfilled property of the paged-remote-array model since it's proxying the promise.

[jme783]

Thanks I'll try that!

[lancedikson]

I've found another solution to observe changes in the PagedRemoteArray. First, set a counter to the instance of PagedRemoteArray and set an observer for arrayDidChange event, then update the counter in it or make any other stuff inside. For me, it helps to observe the counter with a computed property inside a controller and react on changes.

// routes/index.js
...
model(params) {
    const queryParams = {};
    Object.keys(params).forEach((key) => {
      queryParams[key.decamelize()] = params[key];
    });
    return Ember.RSVP.hash({
      approveVideos: this.findPaged('approve-video', queryParams),
      approveVideoActions: this.findPaged('approve-video-action', { limit: 20 }),
    });
  },
  setupController(controller, model) {
    this._super(controller, model);
    Ember.set(controller, 'approveVideos', model.approveVideos);
    Ember.set(controller, 'approveVideoActions', model.approveVideoActions);

    model.approveVideos.set('contentUpdated', 0);
    model.approveVideos.addArrayObserver({
      arrayWillChange() {},
      arrayDidChange(array) {
        array.incrementProperty('contentUpdated');
        // or array.trigger('contentUpdated') and handle it somewhere by .on('contentUpdated') listener
      },
    });
  },
...