spinner

rodrigojap · Feb 4, 2021 · da6dd3c · da6dd3c
1 parent 0b2eab3
commit da6dd3c
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 5 deletions.
diff --git a/VirtualMind.WebApp/ClientApp/package-lock.json b/VirtualMind.WebApp/ClientApp/package-lock.json
diff --git a/VirtualMind.WebApp/ClientApp/package.json b/VirtualMind.WebApp/ClientApp/package.json
@@ -24,9 +24,10 @@
     "@ngrx/store": "^10.1.2",
     "@nguniversal/module-map-ngfactory-loader": "8.1.1",
     "aspnet-prerendering": "^3.0.1",
-    "bootstrap": "^4.3.1",
+    "bootstrap": "^4.6.0",
     "core-js": "^3.3.3",
     "jquery": "3.4.1",
+    "ng-bootstrap-spinner": "^1.2.0",
     "oidc-client": "^1.9.1",
     "popper.js": "^1.16.0",
     "rxjs": "^6.5.3",

diff --git a/VirtualMind.WebApp/ClientApp/src/app/app.module.ts b/VirtualMind.WebApp/ClientApp/src/app/app.module.ts
@@ -3,6 +3,7 @@ import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { RouterModule } from '@angular/router';
+import { NgSpinnerModule } from 'ng-bootstrap-spinner';
 
 import { AppComponent } from './app.component';
 import { NavMenuComponent } from './nav-menu/nav-menu.component';
@@ -19,6 +20,7 @@ import { QuoteReducer } from './store/quote/quoteReducer';
   ],
   imports: [
     BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
+    NgSpinnerModule,
     HttpClientModule,
     FormsModule,
     RouterModule.forRoot([

diff --git a/VirtualMind.WebApp/ClientApp/src/app/fetch-data/fetch-data.component.html b/VirtualMind.WebApp/ClientApp/src/app/fetch-data/fetch-data.component.html
@@ -1,5 +1,9 @@
 <h1 id="tableLabel">Quotes</h1>
 
+<div *ngIf="loading">
+    <ng-spinner size="5" type="border" color="warning"></ng-spinner>
+</div>
+
 <p> Look the quotation of the day</p>
 
 <div *ngIf="dolar">

diff --git a/VirtualMind.WebApp/ClientApp/src/app/fetch-data/fetch-data.component.ts b/VirtualMind.WebApp/ClientApp/src/app/fetch-data/fetch-data.component.ts
@@ -16,6 +16,7 @@ export class FetchDataComponent {
   quote$: Observable<QuoteState>;
   dolar: quote;
   real: quote;
+  loading: boolean;
 
   constructor(private http: HttpClient,
     @Inject('BASE_URL') private baseUrl: string,
@@ -36,8 +37,14 @@ export class FetchDataComponent {
 
   getAllQuote() {
     console.log('fetching cote');
+    this.loading = true;
     this.getDollarQuote();
-    this.getRealQuote();
+    this.getRealQuote();   
+
+    //to see the spinner
+    setTimeout(() => {
+      this.loading = false;
+    }, 2000);
   }
 
   getDollarQuote() {