PRC-328: remove route resolver + add spinner for app list

src/app/applications/application-list/application-list.component.html

@@ -1,5 +1,9 @@
 <div class="container" id="anchor-point">
-  <main>
+  <div class="spinner-container" *ngIf="loading" [@visibility]>
+    <div class="spinner-new rotating"></div>
+  </div>
+
+  <main *ngIf="!loading">
     <section>
       <h2>Crown Lands Applications in British Columbia</h2>
       <p class="tab-intro">Use the list below to navigate to individual applications. Click on any application to go directly to its details page

src/app/applications/application-list/application-list.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
+import { trigger, style, transition, animate } from '@angular/animations';
 import { Router, ActivatedRoute, ParamMap } from '@angular/router';
 import { Location } from '@angular/common';
 import { PaginationInstance } from 'ngx-pagination';
@@ -9,21 +10,32 @@ import * as _ from 'lodash';
 
 import { Application } from 'app/models/application';
 import { ApiService } from 'app/services/api';
+import { ApplicationService } from 'app/services/application.service';
 import { CommentPeriodService } from 'app/services/commentperiod.service';
 
 @Component({
   selector: 'app-application-list',
   templateUrl: './application-list.component.html',
-  styleUrls: ['./application-list.component.scss']
+  styleUrls: ['./application-list.component.scss'],
+  animations: [
+    trigger('visibility', [
+      transition(':enter', [   // :enter is alias to 'void => *'
+        animate('0.2s 0s', style({ opacity: 1 }))
+      ]),
+      transition(':leave', [   // :leave is alias to '* => void'
+        animate('0.2s 0.75s', style({ opacity: 0 }))
+      ])
+    ])
+  ]
 })
 
 export class ApplicationListComponent implements OnInit, OnDestroy {
+  public loading = true;
   public showOnlyOpenApps: boolean;
   public applications: Array<Application> = [];
   public isDesc: boolean;
   public column: string;
   public direction: number;
-  public loading = true;
   public config: PaginationInstance = {
     id: 'custom',
     itemsPerPage: 25,
@@ -36,6 +48,7 @@ export class ApplicationListComponent implements OnInit, OnDestroy {
     private api: ApiService,
     private router: Router,
     private route: ActivatedRoute,
+    private applicationService: ApplicationService,
     public commentPeriodService: CommentPeriodService
   ) { }
 
@@ -52,20 +65,19 @@ export class ApplicationListComponent implements OnInit, OnDestroy {
         this.showOnlyOpenApps = (params.get('showOnlyOpenApps') === 'true');
       });
 
-    // get data from route resolver
-    this.route.data
+    // get data
+    this.applicationService.getAll()
       .takeUntil(this.ngUnsubscribe)
-      .subscribe(
-        (data: { applications: Application[] }) => {
-          if (data.applications) {
-            this.applications = data.applications;
-          } else {
-            // applications not found --> navigate back to home
-            alert('Uh-oh, couldn\'t load applications');
-            this.router.navigate(['/']);
-          }
-        }
-      );
+      .subscribe(applications => {
+        this.applications = applications;
+        this.loading = false;
+      }, error => {
+        console.log(error);
+        alert('Uh-oh, couldn\'t load applications');
+        this.loading = false;
+        // applications not found --> navigate back to home
+        this.router.navigate(['/']);
+      });
   }
 
   public showOnlyOpenAppsChange(checked: boolean) {

src/app/applications/application-resolver.service.ts

@@ -1,29 +1,10 @@
 import { Injectable } from '@angular/core';
 import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
 import { Observable } from 'rxjs/Observable';
-import { ErrorObservable } from 'rxjs/observable/ErrorObservable';
 
 import { ApplicationService } from 'app/services/application.service';
 import { Application } from 'app/models/application';
 
-@Injectable()
-export class ApplicationListResolver implements Resolve<any> {
-
-  constructor(
-    private router: Router,
-    private applicationService: ApplicationService
-  ) { }
-
-  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Application[] | ErrorObservable> {
-    return this.applicationService.getAll()
-      .catch(err => {
-        // if 403, redir to login page
-        if (err.startsWith('403')) { this.router.navigate(['/login']); }
-        return Observable.of(null);
-      });
-  }
-}
-
 @Injectable()
 export class ApplicationDetailResolver implements Resolve<Application> {
 
@@ -32,7 +13,7 @@ export class ApplicationDetailResolver implements Resolve<Application> {
     private applicationService: ApplicationService
   ) { }
 
-  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Application> | ErrorObservable {
+  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Application> {
     const appId = route.paramMap.get('appId');
 
     if (appId === '0') {
@@ -45,7 +26,7 @@ export class ApplicationDetailResolver implements Resolve<Application> {
       .catch(err => {
         // if 403, redir to login page
         if (err.startsWith('403')) { this.router.navigate(['/login']); }
-        return Observable.of(null);
+        return Observable.of(null as Application);
       });
   }
 }

src/app/applications/applications-routing.module.ts

@@ -4,17 +4,14 @@ import { Routes, RouterModule } from '@angular/router';
 import { ApplicationListComponent } from './application-list/application-list.component';
 import { ApplicationDetailComponent } from './application-detail/application-detail.component';
 import { ApplicationAddEditComponent } from './application-add-edit/application-add-edit.component';
-import { ApplicationListResolver, ApplicationDetailResolver } from './application-resolver.service';
+import { ApplicationDetailResolver } from './application-resolver.service';
 
 import { CanDeactivateGuard } from 'app/services/can-deactivate-guard.service';
 
 const routes: Routes = [
   {
     path: 'applications',
-    component: ApplicationListComponent,
-    resolve: {
-      applications: ApplicationListResolver
-    }
+    component: ApplicationListComponent
   },
   {
     path: 'a/:appId',
@@ -39,7 +36,6 @@ const routes: Routes = [
   imports: [RouterModule.forChild(routes)],
   exports: [RouterModule],
   providers: [
-    ApplicationListResolver,
     ApplicationDetailResolver
   ]
 })