chore: add loader for grid component

Author: georgi-sla

examples-standalone/kendoangular-landing-page/src/app/components/dynamic-grid/dynamic-grid.component.html

@@ -10,6 +10,7 @@
         [pageSize]="state.take"
         [columnMenu]="menuSettings"
         [sortable]="true"
+        [loading]="loading"
         (dataStateChange)="dataStateChange($event)"
     >
         <ng-template kendoGridToolbarTemplate>

examples-standalone/kendoangular-landing-page/src/app/components/dynamic-grid/dynamic-grid.component.ts

@@ -39,12 +39,13 @@ import { MultiCheckboxFilterComponent } from './multi-checkbox-filter/multi-chec
     templateUrl: './dynamic-grid.component.html',
     styleUrl: './dynamic-grid.component.css',
 })
-export class DynamicGridComponent {
+export class DynamicGridComponent implements OnInit, OnDestroy {
     public gridView!: GridDataResult;
     public refreshInterval: number = 100;
     public currentGridDataSize: { text: string; value: number } = { text: '100', value: 100 };
     public positivePriceChangeIcon: SVGIcon = caretAltUpIcon;
     public negativePriceChangeIcon: SVGIcon = caretAltDownIcon;
+    public loading: boolean = false;
 
     private dataSubscription!: Subscription;
 
@@ -73,6 +74,10 @@ export class DynamicGridComponent {
     constructor(private domSanitizer: DomSanitizer, private dataService: DataService) {}
 
     ngOnInit(): void {
+        this.dataService.loading$.subscribe((isLoading) => {
+            this.loading = isLoading;
+        });
+
         this.dataSubscription = this.dataService.fetchData(this.state).subscribe((result) => {
             this.gridView = result;
         });
@@ -91,7 +96,11 @@ export class DynamicGridComponent {
 
     public onGridSizeChange(event: { text: string; value: number }): void {
         this.currentGridDataSize = event;
+        this.loading = true;
         this.dataService.updateTotalRecords(event.value);
+        setTimeout(() => {
+            this.loading = false;
+        }, 300);
     }
 
     public onRefreshIntervalChange(event: number): void {

examples-standalone/kendoangular-landing-page/src/app/services/data.service.ts

@@ -19,6 +19,9 @@ export class DataService {
     private totalRecords: number = 100;
     private updateInterval: number = 100;
 
+    private loadingSubject = new BehaviorSubject<boolean>(false);
+    public loading$ = this.loadingSubject.asObservable();
+
     private dataSubject = new BehaviorSubject<DynamicGridItem[]>([]);
     private _total: number = 0;
     private gridState: State = {
@@ -36,6 +39,8 @@ export class DataService {
     }
 
     public fetchData(state?: State): Observable<GridDataResult> {
+        this.loadingSubject.next(true);
+
         if (state) {
             this.gridState = { ...state };
         }
@@ -53,6 +58,8 @@ export class DataService {
         // Start new interval with current settings
         this.startDataRefresh();
 
+        setTimeout(() => this.loadingSubject.next(false), 300);
+
         // Return the observable that will receive updates
         return this.dataSubject.asObservable().pipe(map((data) => ({ data: data, total: this._total })));
     }