add loading to region

Author: somakolli

package-lock.json

@@ -33,6 +33,7 @@
     "leaflet-webgl-heatmap": "^0.2.7",
     "lodash": "^4.17.20",
     "ngx-infinite-scroll": "^7.1.0",
+    "ngx-skeleton-loader": "^2.9.1",
     "popper.js": "^1.16.1",
     "rxjs": "^6.6.3",
     "tslib": "^2.0.0",

package.json

@@ -52,6 +52,7 @@ import { RegionComponent } from './components/region/region.component';
 import {MatMenuModule} from '@angular/material/menu';
 import {ClipboardModule} from '@angular/cdk/clipboard';
 import {MatSnackBarModule} from '@angular/material/snack-bar';
+import {NgxSkeletonLoaderModule} from 'ngx-skeleton-loader';
 @NgModule({
   declarations: [
     AppComponent,
@@ -101,6 +102,7 @@ import {MatSnackBarModule} from '@angular/material/snack-bar';
         MatMenuModule,
         ClipboardModule,
         MatSnackBarModule,
+        NgxSkeletonLoaderModule
     ],
   providers: [OscarItemsService, ConfigService, ItemStoreService],
   bootstrap: [AppComponent]

src/app/app.module.ts

@@ -1,22 +1,25 @@
-<mat-expansion-panel expanded="true" *ngIf="wikiData">
+<mat-expansion-panel *ngIf="wikiData || loading" expanded="true">
   <mat-expansion-panel-header>
     <mat-panel-title>
-      {{wikiData.name}}
+      <span *ngIf="wikiData">
+        {{wikiData.name}}
+      </span>
     </mat-panel-title>
   </mat-expansion-panel-header>
   <div class="p-3 rounded bg-white w-100" style="max-height: 600px; overflow: auto" *ngIf="wikiData">
     <img class="w-100" *ngFor="let pictureUrl of wikiData.pictures" src="{{pictureUrl}}" />
-    <div class="mt-3">
+    <div class="mt-3" *ngIf="wikiData.coatOfArmsUrl">
       <span>Coat of Arms:</span>
       <br>
-      <img *ngIf="wikiData.coatOfArmsUrl" class="w-50 m-auto"  src="{{wikiData.coatOfArmsUrl}}" />
+      <img class="w-50 m-auto"  src="{{wikiData.coatOfArmsUrl}}" />
     </div>
     <div class="mt-5 w-100 d-flex flex-column">
       <div *ngIf="wikiData.population" class="w-100 flex-row d-flex justify-content-between"><span>Population: </span><span>{{wikiData.population}}</span></div>
       <div *ngIf="wikiData.area" class="w-100 flex-row d-flex justify-content-between"><span>Area: </span><span>{{wikiData.area}} km²</span></div>
       <div *ngIf="wikiData.postalCode" class="w-100 flex-row d-flex justify-content-between"><span>PostalCode: </span><span>{{wikiData.postalCode}}</span></div>
     </div>
   </div>
+  <ngx-skeleton-loader *ngIf="loading" [theme]="{height: '300px'}"></ngx-skeleton-loader>
 </mat-expansion-panel>
 
 

src/app/components/region/region.component.html

@@ -14,6 +14,8 @@ export class RegionComponent implements OnInit {
   constructor(private wikiService: WikiServiceService, private zone: NgZone) { }
 
 
+  visible =  false;
+  loading = false;
   wikiData: WikiData = null;
   ngOnInit(): void {
     displayRegion.asObservable().subscribe(async entity => {
@@ -22,7 +24,10 @@ export class RegionComponent implements OnInit {
         this.wikiData = null;
         return;
       }
+      this.visible = true;
+      this.loading = true;
       this.wikiData = await this.wikiService.getPictureUrls(entity);
+      this.loading = false;
     });
   }
 

src/app/components/region/region.component.ts

@@ -143,6 +143,7 @@ export class SearchComponent implements OnInit {
       }
     }
     this.itemStore.setHighlightedItem(null);
+    this.loading = true;
     this.oscarItemService.getRegion(fullQueryString).subscribe(async regions => {
       displayRegion.next(null);
       if (regions && regions.length > 0) {
@@ -151,6 +152,8 @@ export class SearchComponent implements OnInit {
         this.mapService.drawRegion(regions[0]);
         const region = regions[0];
         displayRegion.next(OscarItem.getValue(region, 'wikidata'));
+        this.loading = false;
+        this.error = false;
       } else {
         displayRegion.next(null);
         this.mapService.clearRegions();
@@ -159,6 +162,7 @@ export class SearchComponent implements OnInit {
             this.searchService.queryToDraw.next(fullQueryString);
           } else {
             this.error = true;
+            this.loading = false;
           }
         });
       }