How to avoid the "no rows" message while loading data in ag-grid

Question

I have an ag-grid which pulls data from the backend via restful call and routed through NGRX pattern.

   <ag-grid-angular #agGrid class="ag-theme-fresh" style="width: 100%; height: 100%;" [gridOptions]="gridOptions"
                 [rowData]="rowData"
                 [pagination]="true" [paginationAutoPageSize]='true' [enableSorting]="true"
                 [rowSelection]="rowSelection" [enableColResize]="true"
                 [enableFilter]="true" [rowClassRules]="rowClassRules" (rowClicked)="onRowClicked($event)"
                 (cellClicked)="onCellClicked($event)"
                 (gridReady)="onReady($event)">
</ag-grid-angular>

I have 2 scenarios where the grid loads the data.

scenario 1: The first time I load it on page load (via ngrx store )

  this.QueueItems$ = this.store.select(fromStore.getQueueItems);

scenario 2: The 2nd time I have a button which refreshes the data in the grid from another store.

     <button mat-icon-button matTooltip="Refresh Grid" 
     (click)="handleOnGridRefesh($event)" matTooltipPosition="left"
      style="right: 2%;top: 0;margin-top: 7px;position: absolute;z-index:4">
     <i class="fa fa-refresh" style="color:#455A64" aria-hidden="true"></i>
      </button>


   //note:getQueueItemsStore is a different store ( ngrx) from getQueueItems
   handleOnGridRefesh($event: any) {
this.QueueItems$ = this.store.select(fromStore.getQueueItemsStore);
 }

My issue is after I click on the button to refresh the grid, there is a brief time delay of 500ms to 1 sec where the ag grid is pulling the data and displays the "No rows to show" overlay.

How can I transition smoothly without the overlay in between as shown here?

Answer 1

I used suppressNoRowsOverlay: true as bc1105 suggested in their comment, but this always hides the overlay. I wanted to still show the overlay if there was no data after it was done loading. To overcome this, I did the following:

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

Answer 2

Ag-grid provides two basic methods:

1. this.gridApi.showNoRowsOverlay(); (Show "No Rows To Show" message).
2. this.gridApi.hideOverlay(); (Clear All overlays).

If you have a specific requirement then refer to https://www.ag-grid.com/documentation/angular/overlays/