Merge pull request #3160 from IgniteUI/ganastasov/simple-combo-loading-indicator-master

Add loading indicator for cascading simple combo sample master

Author: Lipata

src/app/lists/combo/simple-combo-cascading/simple-combo-cascading.component.html

@@ -17,6 +17,11 @@
             [displayKey]="'name'"
             [disabled]="regionData.length === 0">
         </igx-simple-combo>
+        <igx-linear-bar
+            *ngIf="isLoadingRegions"
+            type="info"
+            [indeterminate]="true">
+        </igx-linear-bar>
     </div>
     <div class="combo-section">
         <igx-simple-combo #city
@@ -26,5 +31,10 @@
             [displayKey]="'name'"
             [disabled]="citiesData.length === 0">
         </igx-simple-combo>
+        <igx-linear-bar
+            *ngIf="isLoadingCities"
+            type="info"
+            [indeterminate]="true">
+        </igx-linear-bar>
     </div>
 </div>

src/app/lists/combo/simple-combo-cascading/simple-combo-cascading.component.ts

@@ -14,24 +14,46 @@ export class SimpleComboCascadingComponent implements OnInit {
     public countriesData: Country[];
     public regionData: Region[] = [];
     public citiesData: City[] = [];
+    public isLoadingRegions: boolean = false;
+    public isLoadingCities: boolean = false;
+    private loadingTime = 0;
+
     public ngOnInit(): void {
         this.countriesData = getCountries(['United States', 'Japan', 'United Kingdom']);
     }
 
     public countryChanging(e: ISimpleComboSelectionChangingEventArgs) {
         this.selectedCountry = e.newSelection as Country;
-        this.regionData = getCitiesByCountry([this.selectedCountry?.name])
+        if (e.newSelection){
+            this.regionData = [];
+            this.isLoadingRegions = true;
+            this.loadingTime = 2000;
+        }
+        setTimeout(() => {
+            this.regionData = getCitiesByCountry([this.selectedCountry?.name])
             .map(c => ({name: c.region, country: c.country}))
             .filter((v, i, a) => a.findIndex(r => r.name === v.name) === i);
+            this.isLoadingRegions = false;
+        }, this.loadingTime)
         this.selectedRegion = null;
         this.selectedCity = null;
         this.citiesData = [];
+        this.loadingTime = 0;
     }
 
     public regionChanging(e: ISimpleComboSelectionChangingEventArgs) {
         this.selectedRegion = e.newSelection as Region;
-        this.citiesData = getCitiesByCountry([this.selectedCountry?.name])
+        if (e.newSelection){
+            this.citiesData = [];
+            this.isLoadingCities = true;
+            this.loadingTime = 2000;
+        }
+        setTimeout(() => {
+            this.citiesData = getCitiesByCountry([this.selectedCountry?.name])
             .filter(c => c.region === this.selectedRegion?.name);
+            this.isLoadingCities = false;
+        }, this.loadingTime)
         this.selectedCity = null;
+        this.loadingTime = 0;
     }
 }

src/app/lists/lists.module.ts

@@ -18,7 +18,8 @@ import {
     IgxSwitchModule,
     IgxToastModule,
     IgxTooltipModule,
-    IgxTreeModule
+    IgxTreeModule,
+    IgxProgressBarModule
 } from 'igniteui-angular';
 import { IgxFinancialChartModule } from 'igniteui-angular-charts';
 import { ComboBindingComponent } from './combo/combo-binding/combo-binding.component';
@@ -97,7 +98,8 @@ import { ListItemSelectionComponent } from './list/list-item-selection/list-item
         IgxTreeModule,
         IgxTooltipModule,
         IgxFinancialChartModule,
-        IgxSimpleComboModule
+        IgxSimpleComboModule,
+        IgxProgressBarModule
     ]
 })
 export class ListsModule { }