spinner

frontends/dnet-is-application/src/app/app.component.html

@@ -1,3 +1,7 @@
+<div *ngIf="spinnerService.visibility | async" class="spinner">
+  <mat-progress-spinner mode="indeterminate" [strokeWidth]="8" [diameter]="80" color="primary"></mat-progress-spinner>
+</div>
+
 <mat-sidenav-container class="sidenav-container">
   <mat-sidenav #drawer class="sidenav mat-elevation-z8" fixedInViewport
     [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'" [mode]="(isHandset$ | async) ? 'over' : 'side'"
@@ -16,4 +20,5 @@
       <router-outlet></router-outlet>
     </div>
   </mat-sidenav-content>
-</mat-sidenav-container>
+</mat-sidenav-container>
+

frontends/dnet-is-application/src/app/app.component.ts

@@ -2,6 +2,7 @@ import { Component, inject } from '@angular/core';
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import { Observable } from 'rxjs';
 import { map, shareReplay } from 'rxjs/operators';
+import { SpinnerService } from './common/spinner.service';
 
 @Component({
   selector: 'app-root',
@@ -17,7 +18,7 @@ export class AppComponent {
     shareReplay()
   );
 
-  constructor(private breakpointObserver: BreakpointObserver) {}
+  constructor(private breakpointObserver: BreakpointObserver, public spinnerService: SpinnerService) {}
 
 }
 

frontends/dnet-is-application/src/app/app.module.ts

@@ -4,9 +4,9 @@ import { FilterPipe } from './common/filter.pipe';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { HttpClientModule } from '@angular/common/http';
+import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { InfoComponent } from './info/info.component';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { LayoutModule } from '@angular/cdk/layout';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatButtonModule } from '@angular/material/button';
@@ -32,6 +32,8 @@ import { ContextsComponent, ContextViewerComponent, ContextParamsDialog } from '
 import { VocabulariesComponent, VocabularyEditorComponent, VocDialog, VocTermDialog } from './vocabularies/vocabularies.component';
 import { DsmSearchComponent, DsmResultsComponent, DsmApiComponent, DsmAddApiDialog, DsmBrowseDialog } from './dsm/dsm.component';
 import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { SpinnerHttpInterceptor } from './common/spinner.service';
 
 @NgModule({
   declarations: [
@@ -60,11 +62,13 @@ import { MatPaginatorModule } from '@angular/material/paginator';
     DsmBrowseDialog
   ],
   imports: [
+    BrowserModule,
+    BrowserAnimationsModule,
+    HttpClientModule,
     BrowserModule,
     AppRoutingModule,
     FormsModule,
     HttpClientModule,
-    NoopAnimationsModule,
     LayoutModule,
     MatToolbarModule,
     MatButtonModule,
@@ -83,9 +87,14 @@ import { MatPaginatorModule } from '@angular/material/paginator';
     MatSortModule,
     ReactiveFormsModule,
     MatSnackBarModule,
-    MatPaginatorModule
+    MatPaginatorModule,
+    MatProgressSpinnerModule
   ],
-  providers: [],
-  bootstrap: [AppComponent]
+  providers: [{
+    provide: HTTP_INTERCEPTORS,
+    useClass: SpinnerHttpInterceptor,
+    multi: true
+  }],
+  bootstrap: [ AppComponent ]
 })
 export class AppModule { }

frontends/dnet-is-application/src/app/common/spinner.service.ts

@@ -0,0 +1,38 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import { Observable } from 'rxjs';
+import { HttpInterceptor, HttpResponse } from '@angular/common/http';
+import { HttpRequest } from '@angular/common/http';
+import { HttpHandler } from '@angular/common/http';
+import { HttpEvent } from '@angular/common/http';
+import { tap } from 'rxjs/operators';
+
+@Injectable({ providedIn: 'root' })
+export class SpinnerService {
+  visibility: BehaviorSubject<boolean>;
+
+  constructor() { this.visibility = new BehaviorSubject(false); }
+
+  show() { this.visibility.next(true); }
+  hide() { this.visibility.next(false);}
+}
+
+@Injectable()
+export class SpinnerHttpInterceptor implements HttpInterceptor {
+
+  constructor(private spinnerService: SpinnerService) { }
+
+  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+
+    this.spinnerService.show();
+
+    return next.handle(req)
+      .pipe(tap((event: HttpEvent<any>) => {
+        if (event instanceof HttpResponse) {
+          this.spinnerService.hide();
+        }
+      }, (error) => {
+        this.spinnerService.hide();
+      }));
+  }
+}

frontends/dnet-is-application/src/styles.css

@@ -94,4 +94,17 @@ th, td {
     margin-left: 2em !important;
     margin-right: 2em !important;
     font-size: 0.75em !important;
-}
+}
+
+.spinner {
+    position: absolute; 
+    width: 300px;
+    left: 0; 
+    right: 0; 
+    top: 40%;
+    margin: auto; 
+    z-index: 10000;
+}
+
+.spinner * { margin: auto; }
+