feat(grid): added export progress visualization in toolbar

projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-component.scss

@@ -23,6 +23,10 @@
         @extend %igx-grid-toolbar__actions !optional;
     }
 
+    @include e(export-progress){
+        @extend %igx-grid-toolbar__export-progress !optional;
+    }
+
     @include e(adv-filter, $m: 'filtered') {
         @extend %igx-grid-toolbar__adv-filter--filtered !optional;
     }

projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss

@@ -134,6 +134,7 @@
 
     %igx-grid-toolbar {
         display: flex;
+        flex-wrap: wrap;
         align-items: center;
         justify-content: flex-end;
         grid-row: 1;
@@ -253,6 +254,10 @@
         }
     }
 
+    %igx-grid-toolbar__export-progress {
+        flex-basis: 100%;
+    }
+
     %igx-grid-toolbar__adv-filter--filtered {
         border-color: igx-color(map-get($theme, 'palette'), 'secondary') !important;
 

projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.html

@@ -41,6 +41,7 @@
             </igx-column-actions>
         </igx-drop-down>
     </div>
+
     <div *ngIf="grid.columnPinning">
         <button igxButton="outlined" [displayDensity]="grid.displayDensity" #columnPinningButton name="btnColumnPinning" igxRipple
             (click)="toggleColumnPinningUI()">
@@ -65,7 +66,7 @@
 
     <div class="igx-grid-toolbar__dropdown" *ngIf="shouldShowExportButton" id="btnExport">
         <button igxButton="outlined" [displayDensity]="grid.displayDensity" igxRipple #btnExport
-                (click)="exportClicked()">
+                (click)="exportClicked()" [disabled]="isExporting">
             <span class="igx-grid-toolbar__button-space">
                 <igx-icon fontSet="material">import_export</igx-icon>
                 <span>{{ getExportText() }}</span>
@@ -83,3 +84,7 @@
         </igx-drop-down>
     </div>
 </div>
+
+<div class="igx-grid-toolbar__export-progress" *ngIf="isExporting">
+    <igx-linear-bar [indeterminate]="true"></igx-linear-bar>
+</div>

projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.ts

@@ -74,6 +74,7 @@ export class IgxGridToolbarComponent extends DisplayDensityBase implements After
     }
 
     private _filterColumnsPrompt = this.grid.resourceStrings.igx_grid_toolbar_actions_filter_prompt;
+    private _isExporting = false;
 
     /**
      * @hidden
@@ -186,6 +187,13 @@ export class IgxGridToolbarComponent extends DisplayDensityBase implements After
         return (this.grid != null && (this.grid.exportExcel || this.grid.exportCsv));
     }
 
+    /**
+     * @hidden @internal
+     */
+    public get isExporting(): boolean {
+        return this._isExporting;
+    }
+
     /**
      * Returns whether the `IgxGridComponent` renders an Excel export button.
      * ```typescript
@@ -315,6 +323,16 @@ export class IgxGridToolbarComponent extends DisplayDensityBase implements After
      * ```
      */
     public exportToExcelClicked() {
+        let exportEnded = false;
+        this.excelExporter.onExportEnded.subscribe((args: any) => {
+            exportEnded = true;
+            this.setIsExporting(false);
+        });
+        setTimeout(() => {
+            if (!exportEnded) {
+                this.setIsExporting(true);
+            }
+        }, 500);
         this.performExport(this.excelExporter, 'excel');
     }
 
@@ -325,9 +343,24 @@ export class IgxGridToolbarComponent extends DisplayDensityBase implements After
      * ```
      */
     public exportToCsvClicked() {
+        let exportEnded = false;
+        this.csvExporter.onExportEnded.subscribe((args: any) => {
+            exportEnded = true;
+            this.setIsExporting(false);
+        });
+        setTimeout(() => {
+            if (!exportEnded) {
+                this.setIsExporting(true);
+            }
+        }, 500);
         this.performExport(this.csvExporter, 'csv');
     }
 
+    private setIsExporting(isExporting: boolean) {
+        this._isExporting = isExporting;
+        this.cdr.detectChanges();
+    }
+
     private performExport(exp: IgxBaseExporter, exportType: string) {
         this.exportClicked();
 

projects/igniteui-angular/src/lib/services/exporter-common/base-export-service.ts

@@ -213,7 +213,7 @@ export abstract class IgxBaseExporter {
         const dataToExport = new Array<any>();
         const isSpecialData = ExportUtilities.isSpecialData(data);
 
-        yieldingLoop(data.length, 1000, (i) => {
+        yieldingLoop(data.length, 100, (i) => {
             const row = data[i];
             this.exportRow(dataToExport, row, i, isSpecialData);
         }, () => {