show loader on ng smart table

Question

In one of the my application i am using ng2-smart-table. I am able load data from API. While calling data from API i am showing loader on my application. After API call data is not binding to table for few second. User is confused on that, Why there is no records ? So is there any way to show loader onBefore load data on table ?

Here is my code -> .Html

 <ng2-smart-table id="id" class="table table-hover"
                         [settings]="settings"
                         [source]="sourceData"></ng2-smart-table>

.ts

   this.settings= {
      selectMode: 'single',  //single|multi
      hideHeader: false,
      hideSubHeader: false,
      mode: 'external',
      noDataMessage: '',
      actions: {
        columnTitle: 'Action',
        position: 'right',
        width: '0%',
        add:   false ,
        edit: false,
        delete: false,//this.ValidRole ? true : false
      },
      columns: {
        Name: {
          title: 'Name',
          filter: false,
          width: '200px',
          type: 'custom'
        },
        version: {
          title: 'Version',
          width: '100px',
          filter: false,
          type: 'html'
        }
      },
      pager: {
        display: true,
        perPage: 10
      },
    }

function_callAPI(){
this.loader.show()
    this.sourceData= new ServerDataSource(this.httpClient, {
        endPoint: this.baseUrl + "api/loadData",
        pagerLimitKey: "pageSize",
        pagerPageKey: "pageIndex",
        sortDirKey: "SortDirection",
        sortFieldKey: "SortColumn",
        filterFieldKey: 'filter',
        dataKey: 'result.data',
        totalKey: 'result.total'
      });
this.loader.hide()
}

Answer 1

Since this.loader.hide() happens without waiting for API response, the loader hides before the data is fetched. That is why nothing happens for a while after loader stops. Please move the this.loader.hide() inside the .then() block of the function that calls the API.

new ServerDataSource(this.httpClient, {
        endPoint: this.baseUrl + "api/loadData",
        pagerLimitKey: "pageSize",
        pagerPageKey: "pageIndex",
        sortDirKey: "SortDirection",
        sortFieldKey: "SortColumn",
        filterFieldKey: 'filter',
        dataKey: 'result.data',
        totalKey: 'result.total'
      }).then((sourceData: any) => {
         this.sourceData = sourceData;
         this.loader.hide();
});