spinner

mlapaglia · Jun 11, 2021 · c18a292 · c18a292
1 parent f6fb273
commit c18a292
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 1 deletion.
diff --git a/OpenAlprWebhookProcessor/ClientApp/src/app/plates/plates.component.html b/OpenAlprWebhookProcessor/ClientApp/src/app/plates/plates.component.html
@@ -48,10 +48,20 @@
       </tr>
       <tr mat-row *matRowDef="let row; columns: ['expandedDetail']"  class="example-detail-row"></tr>
     </table>
-    <mat-paginator
+    <div fxLayout="row" fxLayoutAlign="end" fxPerpendicularAlign="end" style="margin-top: 15px;">
+      <div *ngIf="isLoading" style="display: flex; align-items: center; justify-content: center; margin-right:10px;">
+        <mat-progress-spinner 
+          color="primary" 
+          mode="indeterminate"
+          diameter="25">
+        </mat-progress-spinner>
+      </div>
+      <mat-paginator
       [pageSizeOptions]="[5, 10, 25, 100]"
       [length]="totalNumberOfPlates"
       (page)="onPaginatorPage($event)"></mat-paginator>
+    </div>
+
   </div>
   <div>
     <mat-card class="example-card">

diff --git a/OpenAlprWebhookProcessor/ClientApp/src/app/plates/plates.component.ts b/OpenAlprWebhookProcessor/ClientApp/src/app/plates/plates.component.ts
@@ -69,6 +69,7 @@ export class PlatesComponent implements OnInit, OnDestroy, AfterViewInit {
 
   public addingToIgnoreList: boolean;
   public deletingPlate: boolean;
+  public isLoading: boolean;
 
   private pageSize: number = 10;
   private pageNumber: number = 0;
@@ -144,9 +145,11 @@ export class PlatesComponent implements OnInit, OnDestroy, AfterViewInit {
     request.filterIgnoredPlates = this.filterIgnoredPlates;
     request.regexSearchEnabled = this.regexSearchEnabled;
 
+    this.isLoading = true;
     this.plateService.searchPlates(request).subscribe(result => {
       this.totalNumberOfPlates = result.totalCount;
       this.plates = new MatTableDataSource<Plate>(result.plates);
+      this.isLoading = false;
     });
   }
 

diff --git a/OpenAlprWebhookProcessor/ClientApp/src/app/plates/plates.module.ts b/OpenAlprWebhookProcessor/ClientApp/src/app/plates/plates.module.ts
@@ -18,6 +18,7 @@ import { MatCheckboxModule } from '@angular/material/checkbox';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatDividerModule } from '@angular/material/divider';
 import { NgxChartsModule } from '@swimlane/ngx-charts';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 
 @NgModule({
   declarations: [
@@ -40,6 +41,7 @@ import { NgxChartsModule } from '@swimlane/ngx-charts';
     MatInputModule,
     MatButtonModule,
     MatFormFieldModule,
+    MatProgressSpinnerModule,
     ReactiveFormsModule,
     FormsModule,
     MatCheckboxModule,

diff --git a/OpenAlprWebhookProcessor/OpenAlprWebhookProcessor.csproj b/OpenAlprWebhookProcessor/OpenAlprWebhookProcessor.csproj
@@ -13,6 +13,7 @@
 		<UserSecretsId>eb21a92f-53a0-4b29-8342-fb1def2e11f1</UserSecretsId>
 		<DockerDefaultTargetOS>Linux</DockerDefaultTargetOS>
 		<DockerfileContext>.</DockerfileContext>
+		<SatelliteResourceLanguages>en</SatelliteResourceLanguages>
 	</PropertyGroup>
 
 	<ItemGroup>