chore(*): Add loading indicator while processing esf list data

Author: mddragnev

projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-filtering.component.ts

@@ -160,29 +160,13 @@ export class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent
      */
     @Input()
     public set column(value: ColumnType) {
-        this._column = value;
-        this.listData = new Array<FilterListItem>();
-        this.columnChange.emit(this._column);
-
-        this.subscriptions?.unsubscribe();
-
-        if (this._column) {
-            this.grid.filteringService.registerSVGIcons();
-            this.init();
-            this.sortingChanged.emit();
-
-            this.subscriptions = this.grid.columnPin.subscribe(() => {
-                requestAnimationFrame(() => {
-                    if (!(this.cdr as ViewRef).destroyed) {
-                        this.cdr.detectChanges();
-                    }
-                });
-            });
-
-            this.subscriptions.add(this.grid.columnVisibilityChanged.subscribe(() => this.detectChanges()));
-            this.subscriptions.add(this.grid.sortingExpressionsChange.subscribe(() => this.sortingChanged.emit()));
-            this.subscriptions.add(this.grid.filteringExpressionsTreeChange.subscribe(() => this.init()));
-            this.subscriptions.add(this.grid.columnMovingEnd.subscribe(() => this.cdr.markForCheck()));
+        if (value) {
+            this._column = value;
+            this.columnChange.emit(this._column);
+            if (this.inline) {
+                // In case external filtering
+                this.populateData();
+            }
         }
     }
 
@@ -326,6 +310,16 @@ export class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent
         this.inline = false;
         this.column = column;
         this.overlayService = overlayService;
+
+    }
+
+    /**
+     * @hidden @internal
+     */
+    public populateData() {
+        if (this.column) {
+            this.afterColumnChange();
+        }
         if (this._originalDisplay) {
             this.element.nativeElement.style.display = this._originalDisplay;
         }
@@ -421,6 +415,30 @@ export class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent
         return this.computedStyles?.getPropertyValue('--component-size');
     }
 
+    protected afterColumnChange() {
+        this.listData = new Array<FilterListItem>();
+        this.subscriptions?.unsubscribe();
+
+        if (this._column) {
+            this.grid.filteringService.registerSVGIcons();
+            this.init();
+            this.sortingChanged.emit();
+
+            this.subscriptions = this.grid.columnPin.subscribe(() => {
+                requestAnimationFrame(() => {
+                    if (!(this.cdr as ViewRef).destroyed) {
+                        this.cdr.detectChanges();
+                    }
+                });
+            });
+
+            this.subscriptions.add(this.grid.columnVisibilityChanged.subscribe(() => this.detectChanges()));
+            this.subscriptions.add(this.grid.sortingExpressionsChange.subscribe(() => this.sortingChanged.emit()));
+            this.subscriptions.add(this.grid.filteringExpressionsTreeChange.subscribe(() => this.init()));
+            this.subscriptions.add(this.grid.columnMovingEnd.subscribe(() => this.cdr.markForCheck()));
+        }
+    }
+
     private init() {
         this.expressionsList = new Array<ExpressionUI>();
         generateExpressionsList(this.column.filteringExpressionsTree, this.grid.filteringLogic, this.expressionsList);

projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.ts

@@ -203,7 +203,7 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
     protected activeDescendant = '';
 
     private _id = `igx-excel-style-search-${NEXT_ID++}`;
-    private _isLoading;
+    private _isLoading = true;
     private _addToCurrentFilterItem: FilterListItem;
     private _selectAllItem: FilterListItem;
     private _hierarchicalSelectedItems: FilterListItem[];

projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts

@@ -9,7 +9,7 @@ import { takeUntil, first } from 'rxjs/operators';
 import { IForOfState } from '../../directives/for-of/for_of.directive';
 import { IFilteringOperation } from '../../data-operations/filtering-condition';
 import { IColumnResizeEventArgs, IFilteringEventArgs } from '../common/events';
-import { OverlayCancelableEventArgs, OverlaySettings, VerticalAlignment } from '../../services/overlay/utilities';
+import { OverlayCancelableEventArgs, OverlayEventArgs, OverlaySettings, VerticalAlignment } from '../../services/overlay/utilities';
 import { IgxOverlayService } from '../../services/overlay/overlay';
 import { useAnimation } from '@angular/animations';
 import { AbsoluteScrollStrategy } from '../../services/overlay/scroll/absolute-scroll-strategy';
@@ -86,6 +86,12 @@ export class IgxFilteringService implements OnDestroy {
                 this.lastActiveNode = this.grid.navigation.activeNode;
             });
 
+        this._overlayService.opened.pipe(first(overlay => overlay.id === id), takeUntil(this.destroy$)).subscribe((event: OverlayEventArgs) => {
+            if (event.componentRef) {
+                event.componentRef.instance.populateData();
+            }
+        });
+
         this._overlayService.closed
             .pipe(
                 first(overlay => overlay.id === id),

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

@@ -4143,6 +4143,7 @@ export abstract class IgxGridBaseDirective implements GridType,
         options.outlet = this.outlet;
         if (this.excelStyleFilteringComponent) {
             this.excelStyleFilteringComponent.initialize(column, this.overlayService);
+            this.excelStyleFilteringComponent.populateData();
             const id = this.overlayService.attach(this.excelStyleFilteringComponent.element, options);
             this.excelStyleFilteringComponent.overlayComponentId = id;
             return id;

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

@@ -1164,6 +1164,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         options.outlet = this.outlet;
         if (dropdown) {
             dropdown.initialize(column, this.overlayService);
+            dropdown.populateData();
             if (shouldReatach) {
                 const id = this.overlayService.attach(dropdown.element, options);
                 dropdown.overlayComponentId = id;