From 59b961ff452a3cc8f16c58af54fceba41bcc7d1e Mon Sep 17 00:00:00 2001
From: Gautam Jajoo <gautamjajoo1729@gmail.com>
Date: Thu, 16 Sep 2021 21:15:25 +0530
Subject: [PATCH] Frontend_V2: Add lazy loading for images(#3571)

* add lazy load for images

* add new line

Co-authored-by: Rishabh Jain <rishabhjain2018@gmail.com>
---
 .../src/app/Directives/image.lazyload.ts      | 31 +++++++++++++++++++
 .../challengecard.component.html              |  2 +-
 frontend_v2/src/app/shared/shared.module.ts   |  3 ++
 3 files changed, 35 insertions(+), 1 deletion(-)
 create mode 100644 frontend_v2/src/app/Directives/image.lazyload.ts

diff --git a/frontend_v2/src/app/Directives/image.lazyload.ts b/frontend_v2/src/app/Directives/image.lazyload.ts
new file mode 100644
index 0000000000..89f9516c11
--- /dev/null
+++ b/frontend_v2/src/app/Directives/image.lazyload.ts
@@ -0,0 +1,31 @@
+import { AfterViewInit, Directive, ElementRef, HostBinding, Input } from '@angular/core';
+
+@Directive({
+  selector: 'img[appLazyLoadImage]'
+})
+
+export class LazyImageDirective implements AfterViewInit {
+
+  @HostBinding('attr.src') srcAttribute = null;
+
+  @Input() src: string;
+
+  constructor(private el: ElementRef) {}
+
+  ngAfterViewInit() {
+    if(window && 'IntersectionObserver' in window) {
+      const obs = new IntersectionObserver(entries => {
+        entries.forEach(({ isIntersecting }) => {
+          if (isIntersecting) {
+            this.srcAttribute = this.src;
+            obs.unobserve(this.el.nativeElement);
+          }
+        });
+      });
+      obs.observe(this.el.nativeElement);
+    }
+    else {
+      this.srcAttribute = this.src;
+    }
+  }
+}
diff --git a/frontend_v2/src/app/components/publiclists/challengelist/challengecard/challengecard.component.html b/frontend_v2/src/app/components/publiclists/challengelist/challengecard/challengecard.component.html
index 489b284970..4e3743d5b4 100644
--- a/frontend_v2/src/app/components/publiclists/challengelist/challengecard/challengecard.component.html
+++ b/frontend_v2/src/app/components/publiclists/challengelist/challengecard/challengecard.component.html
@@ -1,6 +1,6 @@
 <div class="card ev-challenge-card hoverable z-depth-2 margin-bottom-cancel">
   <div class="card-image ev-card-image">
-    <img class="bg-img" [src]="challenge['image']" />
+    <img class="bg-img" [src]="challenge['image']" appLazyLoadImage/>
   </div>
   <div class="card-content">
     <p class="fs-20 fw-regular truncate">{{ challenge['title'] }}</p>
diff --git a/frontend_v2/src/app/shared/shared.module.ts b/frontend_v2/src/app/shared/shared.module.ts
index 654e30d00e..62e0739ff6 100644
--- a/frontend_v2/src/app/shared/shared.module.ts
+++ b/frontend_v2/src/app/shared/shared.module.ts
@@ -6,6 +6,7 @@ import { FormsModule } from '@angular/forms';
 // import directive
 import { PasswordMismatchValidatorDirective } from '../Directives/password.validator';
 import { EmailValidatorDirective } from '../Directives/email.validator';
+import { LazyImageDirective } from '../Directives/image.lazyload';
 
 // import component
 import { HeaderStaticComponent } from '../components/nav/header-static/header-static.component';
@@ -19,6 +20,7 @@ import { UtilityModule } from '../components/utility/utility.module';
   declarations: [
     PasswordMismatchValidatorDirective,
     EmailValidatorDirective,
+    LazyImageDirective,
     HeaderStaticComponent,
     FooterComponent,
     NotFoundComponent,
@@ -27,6 +29,7 @@ import { UtilityModule } from '../components/utility/utility.module';
   exports: [
     PasswordMismatchValidatorDirective,
     EmailValidatorDirective,
+    LazyImageDirective,
     CommonModule,
     RouterModule,
     FormsModule,