feat(lazy loading images): add ngx-progressive-image-loader

Ismaestro · iramos · commit 544142d850f7 · 2019-04-18T01:26:07.000+02:00
diff --git a/README.md b/README.md
@@ -65,6 +65,7 @@
 * Following the [best practices](https://angular.io/guide/styleguide)!
 * Search bar, to look for heroes
 * Custom loading page
+* Lazy loading images with [ngx-progressive-image-loader](https://github.com/maxisam/ngx-progressive-image-loader)
 * Modal and toasts (snakbar)!
 * Scroll restoration and anchor examples
 * Responsive layout (flex layout module)
diff --git a/angular.json b/angular.json
@@ -47,6 +47,7 @@
             ],
             "styles": [
               "node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
+              "node_modules/ngx-progressive-image-loader/ngx-progressive-image-loader.scss",
               "src/assets/css/reset.css",
               "src/assets/css/loading.css",
               "src/app/styles/global.scss"
@@ -292,7 +293,8 @@
           "builder": "@angular-devkit/build-angular:protractor",
           "options": {
             "protractorConfig": "e2e/protractor.conf.js",
-            "devServerTarget": "angularexampleapp:serve"
+            "devServerTarget": "angularexampleapp:serve",
+            "port": 4201
           }
         },
         "lint": {
diff --git a/functions/package-lock.json b/functions/package-lock.json
diff --git a/functions/package.json b/functions/package.json
@@ -38,8 +38,10 @@
     "express": "4.16.4",
     "firebase": "5.8.5",
     "firebase-admin": "7.0.0",
-    "firebase-functions": "2.2.0",
+    "firebase-functions": "2.2.1",
     "moment": "2.24.0",
+    "ngx-progressive-image-loader": "4.0.0-beta.7",
+    "ngx-window-token": "2.0.1",
     "reflect-metadata": "0.1.13",
     "rxjs": "6.4.0",
     "tslib": "1.9.3",
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
     "start": "ng serve --configuration=en --open",
     "start:es": "ng serve --configuration=es --open",
     "extract-i18n": "ng xi18n angularexampleapp --i18n-format xlf --output-path i18n --i18n-locale en && ngx-extractor --input=\"src/**/*.ts\" --format=xlf --out-file=src/i18n/messages.xlf && ng run angularexampleapp:xliffmerge",
-    "lint": "tslint ./src/**/*.ts -t verbose",
+    "lint": "tslint --project tslint.json ./src/**/*.ts -t verbose",
     "test": "ng test --code-coverage --no-watch --source-map=false",
     "test:app:watch": "ng test angularexampleapp --code-coverage --watch=true",
     "test:library:watch": "ng test ngx-example-library --code-coverage --watch=true",
@@ -56,6 +56,8 @@
     "express": "4.16.4",
     "firebase": "5.8.4",
     "ng-animate": "0.3.4",
+    "ngx-progressive-image-loader": "4.0.0-beta.7",
+    "ngx-window-token": "2.0.1",
     "rxjs": "6.4.0",
     "web-animations-js": "2.3.1",
     "zone.js": "0.8.29"
@@ -93,7 +95,6 @@
     "karma-mocha-reporter": "2.2.5",
     "karma-parallel": "0.3.1",
     "karma-remap-istanbul": "0.6.0",
-    "karma-scss-preprocessor": "4.0.0",
     "moment": "2.24.0",
     "ng-bullet": "1.0.3",
     "ng-mocks": "7.7.0",
diff --git a/server.ts b/server.ts
@@ -44,5 +44,5 @@ routes.forEach((route) => {
 });
 
 app.listen(PORT, () => {
-  console.log(`Node server listening on port ${PORT}`);
+  console.log(`Node server listening on http://localhost:${PORT}`);
 });
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -12,6 +12,7 @@ import {I18n} from '@ngx-translate/i18n-polyfill';
 import {HttpClientModule} from '@angular/common/http';
 import {registerLocaleData} from '@angular/common';
 import localeEs from '@angular/common/locales/es';
+import {NgxProgressiveImageLoaderModule} from 'ngx-progressive-image-loader';
 
 declare const require;
 
@@ -27,6 +28,7 @@ registerLocaleData(localeEs, 'es');
         say: 'hello'
       }
     }),
+    NgxProgressiveImageLoaderModule.forRoot(),
     CoreModule,
     SharedModule,
     AppRoutingModule
diff --git a/src/app/configs/app.config.ts b/src/app/configs/app.config.ts
@@ -8,7 +8,7 @@ export const AppConfig: any = {
     error404: '404'
   },
   votesLimit: 3,
-  topHeroesLimit: 4,
+  topHeroesLimit: 5,
   snackBarDuration: 3000,
   repositoryURL: 'https://github.com/ismaestro/angular7-example-app',
   sentryDSN: 'https://38434a1b115f41d3a31e356cdc496c06@sentry.io/1315526'
diff --git a/src/app/modules/heroes/shared/hero.model.ts b/src/app/modules/heroes/shared/hero.model.ts
@@ -7,6 +7,7 @@ export class Hero implements Deserializable {
   likes: number;
   default: boolean;
   avatarUrl: string;
+  avatarBlurredUrl: string;
   avatarThumbnailUrl: string;
 
   constructor(hero: any = {}) {
@@ -16,6 +17,7 @@ export class Hero implements Deserializable {
     this.likes = hero.likes || 0;
     this.default = hero.default || false;
     this.avatarUrl = hero.avatarUrl || '';
+    this.avatarBlurredUrl = hero.avatarBlurredUrl || '';
     this.avatarThumbnailUrl = hero.avatarThumbnailUrl || '';
   }
 
diff --git a/src/app/shared/components/hero-card/hero-card.component.html b/src/app/shared/components/hero-card/hero-card.component.html
@@ -11,5 +11,11 @@
       </mat-icon>
     </div>
   </mat-card-header>
-  <img (click)="seeHeroDetails(hero)" mat-card-image src="{{hero.avatarUrl}}">
+  <ng-container *ngIf="isBrowser">
+    <ngx-progressive-image-loader
+      [filter]="'blur(3px) drop-shadow(0 0 0.75rem crimson)'"
+      [placeholderImageSrc]="hero.avatarBlurredUrl">
+      <img (click)="seeHeroDetails(hero)" src="{{hero.avatarUrl}}" alt="" ngxProgressiveImage />
+    </ngx-progressive-image-loader>
+  </ng-container>
 </mat-card>
diff --git a/src/app/shared/components/hero-card/hero-card.component.spec.ts b/src/app/shared/components/hero-card/hero-card.component.spec.ts
@@ -11,6 +11,7 @@ import {I18n} from '@ngx-translate/i18n-polyfill';
 import {of} from 'rxjs';
 import {HeroService} from '../../../modules/heroes/shared/hero.service';
 import {RouterTestingModule} from '@angular/router/testing';
+import {NgxProgressiveImageLoaderModule} from 'ngx-progressive-image-loader';
 
 describe('HeroCardComponent', () => {
   let component: HeroCardComponent;
@@ -22,7 +23,8 @@ describe('HeroCardComponent', () => {
     TestBed.configureTestingModule({
       imports: [
         RouterTestingModule,
-        MockModule(FirebaseModule)
+        MockModule(FirebaseModule),
+        MockModule(NgxProgressiveImageLoaderModule)
       ],
       declarations: [
         MockComponent(MatCard),
diff --git a/src/app/shared/components/hero-card/hero-card.component.ts b/src/app/shared/components/hero-card/hero-card.component.ts
@@ -25,12 +25,16 @@ export class HeroCardComponent implements OnInit {
   @Input() hero: Hero;
 
   canVote: boolean;
+  isBrowser: boolean;
 
   constructor(private heroService: HeroService,
               private router: Router,
               private snackBar: MatSnackBar,
               private i18n: I18n,
               @Inject(PLATFORM_ID) private platformId: Object) {
+    if (isPlatformBrowser(this.platformId)) {
+      this.isBrowser = true;
+    }
   }
 
   ngOnInit() {
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
@@ -15,7 +15,7 @@ import {NgxExampleLibraryModule} from '@ismaestro/ngx-example-library';
 import {HeroLoadingComponent} from './components/hero-loading/hero-loading.component';
 import {NgxScrollToFirstInvalidModule} from '@ismaestro/ngx-scroll-to-first-invalid';
 import {LoadingPlaceholderComponent} from './components/loading-placeholder/loading-placeholder.component';
-import {I18n} from '@ngx-translate/i18n-polyfill';
+import {NgxProgressiveImageLoaderModule} from 'ngx-progressive-image-loader';
 
 @NgModule({
   imports: [
@@ -25,7 +25,8 @@ import {I18n} from '@ngx-translate/i18n-polyfill';
     ReactiveFormsModule,
     RouterModule,
     NgxExampleLibraryModule,
-    NgxScrollToFirstInvalidModule
+    NgxScrollToFirstInvalidModule,
+    NgxProgressiveImageLoaderModule
   ],
   declarations: [
     HomePageComponent,
@@ -50,7 +51,8 @@ import {I18n} from '@ngx-translate/i18n-polyfill';
     HeroCardComponent,
     HeroLoadingComponent,
     NgxScrollToFirstInvalidModule,
-    LoadingPlaceholderComponent
+    LoadingPlaceholderComponent,
+    NgxProgressiveImageLoaderModule
   ]
 })
 
diff --git a/src/app/styles/global.scss b/src/app/styles/global.scss
@@ -94,5 +94,10 @@ pre {
   display: block;
 }
 
+// ngx-progressive-image-loader
+@import 'https://github.com/~ngx-progressive-image-loader/ngx-progressive-image-loader';
+$scale: 1;
+@include progressive-image-loader($scale);
+
 // MATERIAL
 @import "material";
diff --git a/src/karma.conf.js b/src/karma.conf.js
@@ -11,24 +11,11 @@ module.exports = function (config) {
       require('karma-mocha-reporter'),
       require('karma-coverage-istanbul-reporter'),
       require('@angular-devkit/build-angular/plugins/karma'),
-      require('karma-scss-preprocessor'),
       require('karma-parallel')
     ],
     client: {
       clearContext: false // leave Jasmine Spec Runner output visible in browser
     },
-    files: [
-      {
-        pattern: '../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css',
-        included: true,
-        watched: true
-      },
-      {pattern: './test.ts', watched: false},
-      {pattern: './app/styles/**/*.*', watched: true, included: true, served: true}
-    ],
-    preprocessors: {
-      './app/styles/**/*.*': ['scss']
-    },
     coverageIstanbulReporter: {
       dir: require('path').join(__dirname, '../coverage'),
       reports: ['html', 'lcovonly'],
