Merge pull request #290 from openforge/sam-lazy-loading

perf: add component for lazy loading of images

Author: Wholloran

CHANGELOG.md

@@ -1,7 +1,7 @@
 {
   "name": "@openforge/main-website",
   "private": true,
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "The official website for OpenForge",
   "files": [
     "dist/"

package.json

@@ -35,7 +35,7 @@ rules:
   nesting-depth:
     - 1
     -
-      max-depth: 2
+      max-depth: 5
   no-duplicate-properties: 1
   no-empty-rulesets: 2
   no-debug: 1
@@ -46,8 +46,6 @@ rules:
     - 2
     -
       style: lowercase
-  indentation:
-    - 2
     -
       size: 2
   single-line-per-selector: 1
@@ -57,4 +55,4 @@ rules:
   space-before-colon: 2
   space-between-parens: 2
   zero-unit:
-    - 2
+    - 2

sass-lint.yml

@@ -63,8 +63,9 @@ export const translations = {
         action: 'LEARN MORE',
       },
       mission: {
-        statement: 'Our mission is to forge a bond between people and technology through digital experiences.'
-      }, 
+        statement:
+          'Our mission is to forge a bond between people and technology through digital experiences.',
+      },
       values: {
         title: 'Our Values',
         text:
@@ -97,13 +98,13 @@ export const translations = {
         container: {
           title1: 'What',
           title2: 'Does',
-          skills: 'Skills'
+          skills: 'Skills',
         },
         cta: {
           title: 'Meet The Team',
-          button: `Let's Go`
-        }
-      }
+          button: `Let's Go`,
+        },
+      },
     },
 
     contact: {

src/assets/i18n/en.ts

@@ -10,6 +10,9 @@ import '@stencil/router';
 import '@stencil/state-tunnel';
 
 
+import {
+  EventEmitter,
+} from '@stencil/core';
 import {
   MatchResults,
   RouterHistory,
@@ -50,6 +53,12 @@ declare global {
       'src': string;
     }
 
+    interface LazyImg {
+      'alt': string;
+      'src': string;
+      'width': number;
+    }
+
     interface AppInput {
       'id': string;
       'label': string;
@@ -193,6 +202,14 @@ declare global {
     };
 
 
+    interface HTMLLazyImgElement extends StencilComponents.LazyImg, HTMLStencilElement {}
+
+    var HTMLLazyImgElement: {
+      prototype: HTMLLazyImgElement;
+      new (): HTMLLazyImgElement;
+    };
+    
+
     interface HTMLAppInputElement extends StencilComponents.AppInput, HTMLStencilElement {}
 
     var HTMLAppInputElement: {
@@ -368,6 +385,7 @@ declare global {
     'app-cta': JSXElements.AppCtaAttributes;
     'app-footer': JSXElements.AppFooterAttributes;
     'app-img': JSXElements.AppImgAttributes;
+    'lazy-img': JSXElements.LazyImgAttributes;
     'app-input': JSXElements.AppInputAttributes;
     'app-members': JSXElements.AppMembersAttributes;
     'app-nav-header': JSXElements.AppNavHeaderAttributes;
@@ -413,6 +431,13 @@ declare global {
       'src'?: string;
     }
 
+    export interface LazyImgAttributes extends HTMLAttributes {
+      'alt'?: string;
+      'onLazyImgloaded'?: (event: CustomEvent<HTMLImageElement>) => void;
+      'src'?: string;
+      'width'?: number;
+    }
+
     export interface AppInputAttributes extends HTMLAttributes {
       'id'?: string;
       'label'?: string;
@@ -532,6 +557,7 @@ declare global {
     'app-cta': HTMLAppCtaElement
     'app-footer': HTMLAppFooterElement
     'app-img': HTMLAppImgElement
+    'lazy-img': HTMLLazyImgElement
     'app-input': HTMLAppInputElement
     'app-members': HTMLAppMembersElement
     'app-nav-header': HTMLAppNavHeaderElement
@@ -560,6 +586,7 @@ declare global {
     'app-cta': HTMLAppCtaElement;
     'app-footer': HTMLAppFooterElement;
     'app-img': HTMLAppImgElement;
+    'lazy-img': HTMLLazyImgElement;
     'app-input': HTMLAppInputElement;
     'app-members': HTMLAppMembersElement;
     'app-nav-header': HTMLAppNavHeaderElement;

src/components.d.ts

@@ -1,17 +1,13 @@
 .cta {
   height: 344px;
-  
+
   @include media-breakpoint-down(sm) {
     height: 780px;
   }
 
   .row {
     height: 100%;
-    background: linear-gradient(
-      to bottom,
-      rgba(108, 144, 152, 0.99),
-      #3f5a60
-    );
+    background: linear-gradient(to bottom, rgba(108, 144, 152, 0.99), #3f5a60);
   }
 
   .cta-image {

src/components/app-cta/app-cta.scss

@@ -5,7 +5,6 @@ import { Component } from '@stencil/core';
   styleUrl: 'app-cta.scss',
 })
 export class AppCta {
-
   render() {
     return (
       <section id="cta" class="cta">

src/components/app-cta/app-cta.tsx

@@ -90,7 +90,7 @@ export class AppFooter {
                 </li>
                 <li>
                   <stencil-route-link url="/service-level-agreement">
-                  {translate('footer.social.sla')}
+                    {translate('footer.social.sla')}
                   </stencil-route-link>
                 </li>
               </ul>

src/components/app-footer/app-footer.tsx

@@ -57,12 +57,7 @@ export class Img {
 
   render() {
     return (
-      <img
-        class={{ fit: this.fit }}
-        src={this.loadSrc}
-        alt={this.alt}
-        decoding="async"
-      />
+      <lazy-img class={{ fit: this.fit }} src={this.loadSrc} alt={this.alt} />
     );
   }
 }

src/components/app-img/app-img.tsx

@@ -0,0 +1,100 @@
+import {
+  Component,
+  Element,
+  Event,
+  EventEmitter,
+  Prop,
+  State,
+} from '@stencil/core';
+
+/*
+  You can use this component to lazy load below the fold images to improve load time.
+  Below the fold images are images that are not seen by the user until they have started to scroll.
+  Instead of loading all these images up front before the user even sees them, which will eat up
+  network bandwith, we can use this component to put off loading these images until the user has
+  scrolled to where that image is in your PWA.
+  To use this component use the following markup: <lazy-img src={/path/to/img} alt={alt text for img}></lazy-img>
+*/
+
+@Component({
+  tag: 'lazy-img',
+  // styleUrl: 'lazy-img.scss'
+})
+export class LazyImg {
+  @Element() el: HTMLElement;
+
+  @Prop() src: string;
+  @Prop() alt: string;
+  @Prop() width: number;
+
+  @State() oldSrc: string;
+
+  @Event() lazyImgloaded: EventEmitter<HTMLImageElement>;
+
+  image: HTMLImageElement;
+  io: IntersectionObserver | null;
+
+  componentDidLoad() {
+    this.addIntersectionObserver();
+  }
+
+  componentDidUnload() {
+    this.removeIntersectionObserver();
+  }
+
+  componentWillUpdate() {
+    if (this.src !== this.oldSrc) {
+      this.addIntersectionObserver();
+    }
+    this.oldSrc = this.src;
+  }
+
+  handleImage() {
+    console.log('a');
+    const image = this.image;
+    image.setAttribute('src', this.src || '');
+    image.onload = () => {
+      image.removeAttribute('data-src');
+      this.lazyImgloaded.emit(image);
+    };
+  }
+
+  addIntersectionObserver() {
+    if (!this.src) {
+      return;
+    }
+    if ('IntersectionObserver' in window) {
+      this.io = new IntersectionObserver(data => {
+        // because there will only ever be one instance
+        // of the element we are observing
+        // we can just use data[0]
+        if (data[0].isIntersecting) {
+          this.handleImage();
+          this.removeIntersectionObserver();
+        }
+      });
+      this.io.observe(this.image);
+    } else {
+      // fall back to just loading the image for Safari and IE
+      this.handleImage();
+    }
+  }
+
+  removeIntersectionObserver() {
+    if (this.io) {
+      this.io.disconnect();
+      this.io = null;
+    }
+  }
+
+  render() {
+    return (
+      <img
+        ref={el => (this.image = el as HTMLImageElement)}
+        data-src={this.src}
+        alt={this.alt}
+        width={this.width}
+      />
+    );
+  }
+}