Ember. loader giff after action is trigger

I have an Ember app, that after clicking on a selector in a component, it triggers an action that does a transition to the same route(but with now a new value in the url). I'm trying to create a loading giff that is being displayed right when the action is triggered and is being hidden when the component with the new values is updated.

component:

didUpdate() {
 Ember.$('#selectorsBox').removeClass('hidden');
 Ember.$('#spinner').addClass('hidden');
 },
.....

actions: {

  selectFromSelector: function (value) {
   Ember.$('#selectorsBox').addClass('hidden');
   Ember.$('#spinner').removeClass('hidden');

   this.sendAction('selectFromSelector', value);
 }
});

The issue that I'm having is that the app takes some time to load and the giff is not displayed. If I remove the code that is supposed to hide the giff again, I realize that the giff is displayed when the component is rerendered,not when the user selects the option of the selector.

I have also implemented loading substates for transitions for different routes, but I think this may not work for this situation(transitionTo the same route) http://ift.tt/1NPL2ce