feat(grid): added export progress visualization in toolbar

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+## 10.2.0
+
+### New Features
+- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
+    - When triggering an export of the grid via the toolbar and the export takes more than 500 milliseconds, the export button becomes disabled and an indeterminate progress bar is shown at the bottom of the toolbar until the export is finished.
+
 ## 10.1.0
 
 ### General

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(progress-bar){
+        @extend %igx-grid-toolbar__progress-bar !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

@@ -141,6 +141,7 @@
         border-bottom: 1px solid igx-color(map-get($theme, 'palette'), 'grays', 300);
         background: --var($theme, 'background-color');
         height: map-get($grid-toolbar-height, 'comfortable');
+        position: relative;
 
         @include if-ltr(){
             padding: map-get($grid-toolbar-padding, 'comfortable');
@@ -253,6 +254,21 @@
         }
     }
 
+    %igx-grid-toolbar__progress-bar {
+        position: absolute;
+        width: 100%;
+        left: 0;
+        right: 0;
+        bottom: rem(-1px);
+        height: rem(2px);
+        overflow: hidden;
+        background: --var($theme, 'background-color');
+
+        igx-linear-bar > * {
+            border-radius: 0;
+        }
+    }
+
     %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__progress-bar" *ngIf="isExporting">
+    <igx-linear-bar [indeterminate]="true"></igx-linear-bar>
+</div>

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

@@ -24,8 +24,6 @@ import { GridBaseAPIService } from '../api.service';
 import { IgxButtonDirective } from '../../directives/button/button.directive';
 import { IgxGridBaseDirective } from '../grid-base.directive';
 import { IgxDropDownComponent } from '../../drop-down/drop-down.component';
-import { IgxColumnHidingComponent } from '../hiding/column-hiding.component';
-import { IgxColumnPinningComponent } from '../pinning/column-pinning.component';
 import { OverlaySettings, PositionSettings, HorizontalAlignment, VerticalAlignment } from '../../services/overlay/utilities';
 import { ConnectedPositioningStrategy } from '../../services/overlay/position';
 import { GridType } from '../common/grid.interface';
@@ -35,6 +33,8 @@ import { GridIconsFeature } from '../common/enums';
 import { IgxColumnActionsComponent } from '../column-actions/column-actions.component';
 import { IgxColumnHidingDirective } from '../column-actions/column-hiding.directive';
 import { IgxColumnPinningDirective } from '../column-actions/column-pinning.directive';
+import { Subscription } from 'rxjs';
+import { first } from 'rxjs/operators';
 
 /**
  * This class encapsulates the Toolbar's logic and is internally used by
@@ -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
@@ -328,20 +336,37 @@ export class IgxGridToolbarComponent extends DisplayDensityBase implements After
         this.performExport(this.csvExporter, 'csv');
     }
 
+    private setIsExporting(isExporting: boolean) {
+        this._isExporting = isExporting;
+        this.cdr.detectChanges();
+    }
+
     private performExport(exp: IgxBaseExporter, exportType: string) {
         this.exportClicked();
 
         const fileName = 'ExportedData';
         const options = exportType === 'excel' ?
             new IgxExcelExporterOptions(fileName) :
             new IgxCsvExporterOptions(fileName, CsvFileTypes.CSV);
-
         const args = { grid: this.grid, exporter: exp, options: options, cancel: false };
 
         this.grid.onToolbarExporting.emit(args);
         if (args.cancel) {
             return;
         }
+
+        let exportEnded = false;
+        setTimeout(() => {
+            if (!exportEnded) {
+                this.setIsExporting(true);
+            }
+        }, 500);
+
+        exp.onExportEnded.pipe(first()).subscribe(() => {
+            exportEnded = true;
+            this.setIsExporting(false);
+        });
+
         exp.export(this.grid, options);
     }
 

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

@@ -77,6 +77,8 @@ export abstract class IgxBaseExporter {
     protected _indexOfLastPinnedColumn = -1;
     protected _sort = null;
 
+    public onExportEnded = new EventEmitter<IBaseEventArgs>();
+
     /**
      * This event is emitted when a row is exported.
      * ```typescript
@@ -213,7 +215,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);
         }, () => {