Loading spinner in ember-js

I'm trying to display loading spinner in emberJS during Ajax call. My Code is as given below.I had given the ajax call in the controller action. The problem is that gif image is shown and hidden after the ajax call.I had also tried ajaxStart and ajaxStop but didn't get the expected results.

$.ajax({
        beforeSend:function(){
            $('#wait').show();
          console.log("started t");
        },
          type:"POST",
          url:"/getdata",
          async:false,
          data:"some",
          complete:function(){
                  $('#wait').hide();
                 }
  });

<div id="wait" style="height: 500px;width: 1200px;display:none">
  <img src="assets/images/pageloader.gif" alt="Loading....">
</div>

Can anyone suggest me the way to display the image on loading.Thank you for any answer in advance.

Solution

If you definitely need to use a synchronous ajax call for whatever reason, simply,

$('#wait').show();
$.ajax();
$('#wait').hide();

will work.

But,

Synchronous ajax calls are not recommended
UI manipulation from route/controller is also not recommended.

So, the halfway solution would be to maintain the ui state using a controller property 'show_loading', set true or false as necessary and use if in template to show loader.

The ideal solution would be to use promise in the model - either as async ajax or ember-data and using the loading substates to show the loader.