Added loading feedback for images.

public/image/Image.jsx

@@ -29,9 +29,18 @@ export default class Image extends React.Component {
     super(props);
   }
 
+  onLoad(e) {
+    console.log(this.props);
+    if(this.props.onLoad) this.props.onLoad(e);
+  }
+
+  onError() {
+    if(this.props.onError) this.props.onErorr(e);
+  }
+
   render() {
     if(this.props.loadable) {
-      //return (<LoadableImage {...this.props} />);
+      return <LoadableImage {...this.props} />;
     }
 
     let sourceProps = Object.assign({}, this.props);
@@ -60,8 +69,6 @@ export default class Image extends React.Component {
     let defaultWidth = sourceProps.width;
     let defaultHeight = sourceProps.height;
 
-    console.log(defaultSrc);
-
     if(sourceProps.sources) {
       //Iterate over supplied sources
       for(let i = 0; i < sourceProps.sources.length; i++) {
@@ -80,12 +87,27 @@ export default class Image extends React.Component {
       }
 
       let keys = Object.keys(sources);
+      keys.sort((l, r) => {
+        return parseInt(l) - parseInt(r);
+      });
+      let breakNext = false;
       for(let i = 0; i < keys.length; i++) {
+        if(breakNext) break;
         let k = keys[i];//The pixel size
+
         let ss = sources[k];//Sources at this pixel resolution
         let mediaQuery = '(max-width:'+k+'px)';
         let sss = [];
 
+        let isNextBreak = false;
+        if(this.props.maxWidth && (i+1 < keys.length)) {
+          if(keys[i+1] > parseInt(this.props.maxWidth)) isNextBreak = true;
+        }
+        if(isNextBreak) {
+          breakNext = true;
+          mediaQuery = '(min-width:'+k+'px)';
+        }
+
         if(ss.length && ss[0].isLast) {
           let prev = i > 0 ? keys[i-1] : 0;
           mediaQuery = '(min-width:'+prev+'px)';
@@ -104,9 +126,12 @@ export default class Image extends React.Component {
     }
 
     return (
+      //HEY DOM: try putting the img tag within a this.image or something so we can just reference the image object? .complete may work??
       <picture>
         { sourceElements }
         <img
+          onLoad={ this.onLoad.bind(this) }
+          onError={ this.onError.bind(this) }
           src={ defaultSrc }
           alt={ defaultAlt }
           className={ sourceProps.className }

public/image/LoadableImage.jsx

@@ -28,12 +28,47 @@ import Loader from './../loading/Loader';
 class LoadableImage extends React.Component {
   constructor(props) {
     super(props);
+
+    this.state = {
+      loading: true
+    };
+  }
+
+  componentDidMount() {}
+  componentWillUnmount() {}
+
+  onLoad() {
+    this.setState({
+      loading: false
+    });
+  }
+
+  onError() {
+    this.setState({
+      loading: false
+    });
   }
 
   render() {
     let p = Object.assign({}, this.props);
     p.loadable = false;
-    return <Image {...p} />
+    p.onLoad = this.onLoad.bind(this);
+    let image = <Image {...p} />;
+
+    let loader;
+
+    if(this.state.loading) {
+      loader = <Loader />;
+    }
+
+    return (
+      <div className={"o-loadable-image " + (this.state.loading ? "is-loading" : "is-loaded")}>
+        { loader }
+        <div className="o-loadable-image__image-container">
+          { image }
+        </div>
+      </div>
+    );
   }
 }
 

public/page/home/sections/BannerSection.jsx

@@ -35,6 +35,10 @@ export default (props) => {
     <ImageSection
       src={ require('./../../../images/banners/about/glasses.svg') }
       alt="domsPlace"
+      width="2400"
+      height="1200"
+      test="true"
+      loadable
     >
       <PageBoundary full>
         <FloatingContentBox position="middle center" size="large" className="u-text-center">

public/page/home/sections/ExistingWorkSection.jsx

@@ -68,6 +68,7 @@ const ExistingWorkFrame = (props) => {
               alt={props.title}
               loadable
               className="p-home-page__work-link-image"
+              maxWidth="600"
             />
           </a>
         </Frame>

public/page/home/sections/PlatformsSection.jsx

@@ -34,7 +34,7 @@ import ElementScrollFader from './../../../animation/fade/ElementScrollFader';
 
 const Platform = (props) => {
   let children;
-  let image = <Image src={props.src} className="p-home-page__brands-image" />;
+  let image = <Image src={props.src} loadable className="p-home-page__brands-image" />;
 
   if(props.to) {
     children = (

public/styles/index.scss

@@ -66,6 +66,7 @@
 @import './objects/_floating-content-box.scss';
 @import './objects/_form.scss';
 @import './objects/_input.scss';
+@import './objects/_loadable-image.scss';
 @import './objects/_loader.scss';
 @import './objects/_modal.scss';
 @import './objects/_page-transition.scss';

public/styles/objects/_loadable-image.scss

@@ -0,0 +1,43 @@
+/*
+ *  Loadable Image
+ *    Image that gets loaded in the background
+ *
+ *  Dependencies:
+ *
+ *  Version:
+ *    1.0.0 - 2018/07/11
+ */
+@include t-keyframes(o-loadable-image--load-flash) {
+  from {
+    background: transparent;
+  }
+
+  50% {
+    background: #DDD;
+  }
+
+  to {
+    background: transparent;
+  }
+}
+
+.o-loadable-image {
+  position: relative;
+
+  &__image-container {
+    opacity: 1;
+    transition: all 1s $s-animation--ease-out;
+    transition-delay: 0.5s;
+  }
+
+  &.is-loading {
+    @include t-animation-name(o-loadable-image--load-flash);
+    @include t-animation-timing-function(linear);
+    @include t-animation-duration(2s);
+    @include t-animation-iteration-count(infinite);
+
+    .o-loadable-image__image-container {
+      opacity: 0;
+    }
+  }
+}

webpack.config.js

@@ -58,7 +58,7 @@ module.exports = {
         use: [{
           loader: "responsive-loader",
           options: {
-            sizes: [128, 256, 500, 750, 1000, 1250, 1500, 2000, 2250, 2500],
+            sizes: [250, 500, 1000, 1500, 2000, 2500],
             name: "[path][name]_[width]x.[ext]",
             context: 'public'
           }