feat: add loading

Author: ibuioli

src/app/afip/afip.component.html

@@ -12,9 +12,9 @@
     </div>
 </div>
 
-<button mat-raised-button color="primary" class="w-100" (click)="test()">TEST</button>
+<!--button mat-raised-button color="primary" class="w-100" (click)="test()">TEST</button-->
 
-<div *ngIf="invoices.length > 0" class="row">
+<div *ngIf="invoices.length > 0 && !loading" class="row">
     <div class="col-12">
         <table mat-table [dataSource]="invoices" class="mat-elevation-z8 w-100" multiTemplateDataRows>
 
@@ -56,4 +56,7 @@ <h5 class="mb-1"><b>Receptor:</b> {{element.nameRec}}</h5>
 
         </table>
     </div>
+</div>
+<div class="row text-center" *ngIf="loading">
+    <mat-spinner class="mx-auto" diameter="40"></mat-spinner>
 </div>

src/app/afip/afip.component.ts

@@ -41,6 +41,8 @@ export class AfipComponent implements OnInit {
   expandedElement: InvoiceElement | null | undefined;
   @ViewChild(MatTable) table: MatTable<InvoiceElement> | undefined;
 
+  loading = false;
+
   constructor(private barcodeScanner: BarcodeScanner, public dialog: MatDialog, private http: HttpClient) { }
 
   ngOnInit(): void {
@@ -75,6 +77,7 @@ export class AfipComponent implements OnInit {
   }
 
   async processQR(t: string) {
+    this.loading = true;
     const url = new URL(t);
     const p: any = url.searchParams.get('p');
     let encode = p.replace(/b\'(.*)\'/, '$1').replace(/\n/g, '');
@@ -91,15 +94,18 @@ export class AfipComponent implements OnInit {
             newinvoice.nameRec = dataR.Contribuyente.nombre;
             this.invoices.push(newinvoice);
             localStorage.setItem('invoices', JSON.stringify(this.invoices));
+            this.loading = false;
             if (this.table) {
               this.table!.renderRows();
             }
           }
         }, (err: any) => {
+          this.loading = false;
           this.openDialog(err);
         });
         }
       }, (err: any) => {
+        this.loading = false;
         this.openDialog(err);
       })
     } else {

src/app/app.module.ts

@@ -20,6 +20,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatTableModule } from '@angular/material/table';
 import { MatIconModule } from '@angular/material/icon';
 import { MatDialogModule } from '@angular/material/dialog';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 
 import { AfipComponent } from './afip/afip.component';
 import { DialogContent } from './afip/afip.component';
@@ -47,7 +48,8 @@ const routes: Routes = [
     MatButtonModule,
     MatTableModule,
     MatIconModule,
-    MatDialogModule
+    MatDialogModule,
+    MatProgressSpinnerModule
   ],
   providers: [BarcodeScanner, FileOpener],
   bootstrap: [AppComponent]