This commit is contained in:
Michele Artini 2023-02-03 14:55:39 +01:00
parent a01a638661
commit 286a9a189d
5 changed files with 75 additions and 9 deletions

View File

@ -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'"
@ -17,3 +21,4 @@
</div>
</mat-sidenav-content>
</mat-sidenav-container>

View File

@ -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) {}
}

View File

@ -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 { }

View File

@ -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();
}));
}
}

View File

@ -95,3 +95,16 @@ th, td {
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; }