From f3ef7e326eb0a4236b37abc5f93114b20e48cfd3 Mon Sep 17 00:00:00 2001 From: Charles Showalter Date: Tue, 17 May 2022 11:59:02 -0700 Subject: [PATCH] Change Theme, Animations, and Loading Spinners --- client/angular.json | 4 +- client/package-lock.json | 32 +++++++++++ client/package.json | 2 + client/src/app/app.component.html | 7 ++- client/src/app/app.module.ts | 8 ++- .../core/interceptors/error.interceptor.ts | 2 +- .../core/interceptors/loading.interceptor.ts | 20 +++++++ .../app/core/nav-bar/nav-bar.component.html | 2 +- .../section-header.component.html | 4 +- client/src/app/core/services/busy.service.ts | 30 ++++++++++ client/src/app/home/home.component.html | 17 +++++- client/src/app/home/home.component.scss | 9 +++ client/src/app/home/home.module.ts | 4 +- client/src/app/shared/shared.module.ts | 7 ++- .../product-details.component.html | 37 ++++++------ .../product-details.component.ts | 4 +- .../product-item/product-item.component.html | 24 ++++---- .../product-item/product-item.component.scss | 33 +++++++++++ client/src/app/shop/shop.component.html | 56 ++++++++++--------- client/src/app/shop/shop.component.ts | 2 +- client/src/styles.scss | 7 ++- 21 files changed, 238 insertions(+), 73 deletions(-) create mode 100644 client/src/app/core/interceptors/loading.interceptor.ts create mode 100644 client/src/app/core/services/busy.service.ts diff --git a/client/angular.json b/client/angular.json index 417e680..09a0587 100644 --- a/client/angular.json +++ b/client/angular.json @@ -30,7 +30,9 @@ "styles": [ "./node_modules/font-awesome/css/font-awesome.css", "./node_modules/ngx-toastr/toastr.css", - "src/styles.scss" + "src/styles.scss", + "./node_modules/ngx-spinner/animations/ball-clip-rotate-multiple.css", + "./node_modules/bootswatch/dist/cyborg/bootstrap.min.css" ], "scripts": [] }, diff --git a/client/package-lock.json b/client/package-lock.json index 9b85545..257dea8 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -17,8 +17,10 @@ "@angular/platform-browser-dynamic": "~13.3.0", "@angular/router": "~13.3.0", "bootstrap": "^5.1.3", + "bootswatch": "^5.1.3", "font-awesome": "^4.7.0", "ngx-bootstrap": "^8.0.0", + "ngx-spinner": "^13.1.1", "ngx-toastr": "^14.3.0", "rxjs": "~7.5.0", "tslib": "^2.3.0", @@ -3511,6 +3513,11 @@ "@popperjs/core": "^2.10.2" } }, + "node_modules/bootswatch": { + "version": "5.1.3", + "resolved": "https://registry.npmjs.org/bootswatch/-/bootswatch-5.1.3.tgz", + "integrity": "sha512-NmZFN6rOCoXWQ/PkzmD8FFWDe24kocX9OXWHNVaLxVVnpqpAzEbMFsf8bAfKwVtpNXibasZCzv09B5fLieAh2g==" + }, "node_modules/brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -7976,6 +7983,18 @@ "rxjs": "^6.5.3 || ^7.4.0" } }, + "node_modules/ngx-spinner": { + "version": "13.1.1", + "resolved": "https://registry.npmjs.org/ngx-spinner/-/ngx-spinner-13.1.1.tgz", + "integrity": "sha512-6aJz4KxIsBrlQckJxcM3CEvMcYbZoSDnQZPu0F/ZYAYunbBOTb9iydw0Gjczg9moum1VURWjX5dTVKmFo85c2Q==", + "dependencies": { + "tslib": "^2.3.0" + }, + "peerDependencies": { + "@angular/common": "^13.0.0", + "@angular/core": "^13.0.0" + } + }, "node_modules/ngx-toastr": { "version": "14.3.0", "resolved": "https://registry.npmjs.org/ngx-toastr/-/ngx-toastr-14.3.0.tgz", @@ -14317,6 +14336,11 @@ "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==", "requires": {} }, + "bootswatch": { + "version": "5.1.3", + "resolved": "https://registry.npmjs.org/bootswatch/-/bootswatch-5.1.3.tgz", + "integrity": "sha512-NmZFN6rOCoXWQ/PkzmD8FFWDe24kocX9OXWHNVaLxVVnpqpAzEbMFsf8bAfKwVtpNXibasZCzv09B5fLieAh2g==" + }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -17564,6 +17588,14 @@ "tslib": "^2.0.0" } }, + "ngx-spinner": { + "version": "13.1.1", + "resolved": "https://registry.npmjs.org/ngx-spinner/-/ngx-spinner-13.1.1.tgz", + "integrity": "sha512-6aJz4KxIsBrlQckJxcM3CEvMcYbZoSDnQZPu0F/ZYAYunbBOTb9iydw0Gjczg9moum1VURWjX5dTVKmFo85c2Q==", + "requires": { + "tslib": "^2.3.0" + } + }, "ngx-toastr": { "version": "14.3.0", "resolved": "https://registry.npmjs.org/ngx-toastr/-/ngx-toastr-14.3.0.tgz", diff --git a/client/package.json b/client/package.json index 8970ae6..2e7bbb0 100644 --- a/client/package.json +++ b/client/package.json @@ -19,8 +19,10 @@ "@angular/platform-browser-dynamic": "~13.3.0", "@angular/router": "~13.3.0", "bootstrap": "^5.1.3", + "bootswatch": "^5.1.3", "font-awesome": "^4.7.0", "ngx-bootstrap": "^8.0.0", + "ngx-spinner": "^13.1.1", "ngx-toastr": "^14.3.0", "rxjs": "~7.5.0", "tslib": "^2.3.0", diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html index 0581529..0fa3315 100644 --- a/client/src/app/app.component.html +++ b/client/src/app/app.component.html @@ -1,5 +1,6 @@ + +

Loading...

+ -
- -
+ diff --git a/client/src/app/app.module.ts b/client/src/app/app.module.ts index 09f114b..89a177d 100644 --- a/client/src/app/app.module.ts +++ b/client/src/app/app.module.ts @@ -9,6 +9,8 @@ import { CoreModule } from './core/core.module'; import { ShopModule } from './shop/shop.module'; import { HomeModule } from './home/home.module'; import { ErrorInterceptor } from './core/interceptors/error.interceptor'; +import { NgxSpinnerModule } from 'ngx-spinner'; +import { LoadingInterceptor } from './core/interceptors/loading.interceptor'; @NgModule({ declarations: [ @@ -20,10 +22,12 @@ import { ErrorInterceptor } from './core/interceptors/error.interceptor'; BrowserAnimationsModule, HttpClientModule, CoreModule, - HomeModule + HomeModule, + NgxSpinnerModule ], providers: [ - {provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true} + {provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true}, + {provide: HTTP_INTERCEPTORS, useClass: LoadingInterceptor, multi: true} ], bootstrap: [AppComponent] }) diff --git a/client/src/app/core/interceptors/error.interceptor.ts b/client/src/app/core/interceptors/error.interceptor.ts index 2ec41e4..26b5eb8 100644 --- a/client/src/app/core/interceptors/error.interceptor.ts +++ b/client/src/app/core/interceptors/error.interceptor.ts @@ -5,7 +5,7 @@ import { HttpEvent, HttpInterceptor } from '@angular/common/http'; -import { catchError, Observable, throwError } from 'rxjs'; +import { catchError, delay, Observable, throwError } from 'rxjs'; import { NavigationExtras, Router } from '@angular/router'; import { ToastrService } from 'ngx-toastr'; diff --git a/client/src/app/core/interceptors/loading.interceptor.ts b/client/src/app/core/interceptors/loading.interceptor.ts new file mode 100644 index 0000000..445fe2a --- /dev/null +++ b/client/src/app/core/interceptors/loading.interceptor.ts @@ -0,0 +1,20 @@ +import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from "@angular/common/http"; +import { Injectable } from "@angular/core"; +import { delay, finalize, Observable } from "rxjs"; +import { BusyService } from "../services/busy.service"; + +@Injectable() +export class LoadingInterceptor implements HttpInterceptor { + constructor(private busyService: BusyService) {} + + intercept(req: HttpRequest, next: HttpHandler): Observable> { + this.busyService.busy(); + return next.handle(req).pipe( + delay(1000), + finalize(()=> { + this.busyService.idle(); + }) + ); + } + +} diff --git a/client/src/app/core/nav-bar/nav-bar.component.html b/client/src/app/core/nav-bar/nav-bar.component.html index f69c889..782de57 100644 --- a/client/src/app/core/nav-bar/nav-bar.component.html +++ b/client/src/app/core/nav-bar/nav-bar.component.html @@ -1,4 +1,4 @@ -
+