Merge pull request #39 from IgniteUI/mtihova/fix-grid-empty-template

Added loading indicator instead of empty grid template while loading data

Author: dkamburov

projects/erp-hgrid/src/components/erp-hierarchical-grid.ts

@@ -288,7 +288,8 @@ export default class ErpHierarchicalGrid extends LitElement {
           allow-advanced-filtering="${true}"
           moving="${true}"
           row-selection="${this.selectionMode}"
-          .data="${this.erpData}" >
+          .data="${this.erpData}"
+          .isLoading="${!this.erpData.length}">
   
           <igc-grid-toolbar>
             <igc-grid-toolbar-title>Inventory</igc-grid-toolbar-title>

projects/finance-grid/src/finance-grid.ts

@@ -133,7 +133,7 @@ export default class FinanceGrid extends LitElement {
 
     return html`
       <link rel="stylesheet" href="${import.meta.env.BASE_URL}themes/bootstrap.css" />
-      <igc-grid .data="${this.financeData}" primary-key="id" row-selection="multiple" class="grid-sizing">
+      <igc-grid .data="${this.financeData}" .isLoading="${!this.financeData.length}" primary-key="id" row-selection="multiple" class="grid-sizing">
         <igc-grid-toolbar>
           <igc-grid-toolbar-title>Financial Portfolio</igc-grid-toolbar-title>
           <igc-input type="search" placeholder="Filter by Asset" @igcInput="${this.filter}"></igc-input>

projects/fleet-management-grid/src/components/fleet-management/fleet-management-grid.ts

@@ -585,7 +585,7 @@ export class FleetManagementGrid extends LitElement {
 
     return html`
     <link rel="stylesheet" href="${import.meta.env.BASE_URL}themes/dark/material.css" />
-    <igc-grid class="main-grid ig-typography" id="main-grid" .data="${this.vehiclesData}" height="100%" width="100%" .detailTemplate="${this.masterDetailTemplate}">
+    <igc-grid class="main-grid ig-typography" id="main-grid" .data="${this.vehiclesData}" .isLoading="${!this.vehiclesData.length}" height="100%" width="100%" .detailTemplate="${this.masterDetailTemplate}">
       <igc-grid-toolbar>
         <igc-grid-toolbar-title>Fleet Management</igc-grid-toolbar-title>
         <igc-button

projects/hr-portal/src/hr-portal.ts

@@ -102,6 +102,7 @@ export default class HrPortal extends LitElement {
         <igc-tree-grid
           id="treeGrid"
           .data="${this.data}"
+          .isLoading="${!this.data.length}"
           primary-key="ID"
           child-data-key="Employees"
           row-selection="multipleCascade"