CODEWITHSUNDEEP
asynchronousember.jsember-dataloadingember-cli
user4412054
user4412054

Reputation:

Ember js, show spinner when something is loading in background

Is there a way with EmberJS to show a loading template somewhere when something in my page is loading something?

For example, I have a page with many many songs artists, and each of them have many many songs. I load the page of the artists, and good, but in background I'm loading info about songs of everyone. I simply need a loading spinner somewhere that says to me the site is loading something (for example, there is in "Network" tab of Chrome Developer Tools something pending...)

how to do that in such an elegant Emberjs way?

Upvotes: 1

Views: 1559

Answers (2)

Max Wallace
Max Wallace

Reputation: 3758

As far as I know (and based on a quick perusal of the API docs) Ember doesn't provide a built-in way to achieve this. Unless I'm wrong, this means you'll need to implement request state tracking yourself.

You could do this in Ember's adapter layer (e.g. add code in app/adapters/application.js), but the simplest solution might be to just work with jQuery directly. There are a few APIs you can use:

I'd recommend creating an Ember.Service to track this state-- then you can inject it in any Controller or Component that needs to render a template based on this info. Your Service could look like:

import Ember from 'ember';

export default Ember.Service.extend({

  init() {
    this._super(...arguments);
    const invalidateRequestInProgress = () => {
      this.notifyPropertyChange('dummyProperty');
    }

    $(document).ajaxStart(invalidateRequestInProgress);
    $(document).ajaxStop(invalidateRequestInProgress);
  },

  requestInProgress: Ember.computed('dummyProperty', function() {
    return Ember.$.active !== 0;
  }),

});

I haven't tested this code, so I'm not sure if it'll work in practice :)

Upvotes: 0

Ahmed Onawale
Ahmed Onawale

Reputation: 4050

You can observe the isPending property of Ember.PROMISEPROXYMIXIN like so:

{{#if artist.songs.isPending}}
  loading...
{{/if}}

Upvotes: 1

Related Questions