ag grid showing no row to show when data is loading

this.gridOptions.suppressNoRowsOverlay = true;
this.service.getData()
  .subscribe(data => {
    if (!data || !data.length) {
      this.gridOptions.suppressNoRowsOverlay = false;
      this.gridOptions.api.showNoRowsOverlay();
    }

<ag-grid-angular
  class="ag-theme-balham"
  [columnDefs]="columnDefs"
  [defaultColDef]="defaultColDef"
  [rowData]="rowData"
  (gridReady)="onGridReady($event)"
  [overlayLoadingTemplate]="loadingTemplate"
  [overlayNoRowsTemplate]="noRowsTemplate"
        .
        .
></ag-grid-angular>


export class AppComponent {
  private noRowsTemplate;
  private loadingTemplate;

  constructor() {
    this.loadingTemplate =
      `<span class="ag-overlay-loading-center">data is loading...</span>`;
    this.noRowsTemplate =
      `"<span">no rows to show</span>"`;
  }
}