bug: use placeholder in carousel while loading next image

packages/venia-concept/src/components/ProductImageCarousel/__tests__/__snapshots__/carousel.spec.js.snap

@@ -31,6 +31,12 @@ exports[`renders a transparent main image if no file name is provided 1`] = `
         </svg>
       </span>
     </button>
+    <img
+      alt="image-product"
+      className="currentImage"
+      onLoad={[Function]}
+      src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAFCAQAAADIpIVQAAAADklEQVR42mNkgAJGIhgAALQABsHyMOcAAAAASUVORK5CYII="
+    />
     <img
       alt="image-product"
       className="currentImage"
@@ -101,8 +107,14 @@ exports[`renders the Carousel component correctly w/ sorted images 1`] = `
     <img
       alt="test-thumbnail1"
       className="currentImage"
+      onLoad={[Function]}
       src="/img/resize/640?url=%2Fmedia%2Fcatalog%2Fproduct%2Fthumbnail1.png"
     />
+    <img
+      alt="test-thumbnail1"
+      className="currentImage"
+      src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAFCAQAAADIpIVQAAAADklEQVR42mNkgAJGIhgAALQABsHyMOcAAAAASUVORK5CYII="
+    />
     <button
       className="chevron-right"
       onClick={[Function]}

packages/venia-concept/src/components/ProductImageCarousel/__tests__/carousel.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import testRenderer from 'react-test-renderer';
-
+import { transparentPlaceholder } from 'src/shared/images';
 import Carousel from '../carousel';
 
 jest.mock('src/classify');
@@ -60,9 +60,9 @@ test('renders active item as main image', () => {
     const button = component.root.findByProps({ className: 'rootSelected' });
     const activeImageThumbnailAlt = button.children[0].props.alt;
 
-    const activeImage = component.root.findByProps({
+    const activeImage = component.root.findAllByProps({
         className: 'currentImage'
-    });
+    })[0];
     const activeImageAlt = activeImage.props.alt;
 
     expect(activeImageAlt).toEqual('test-thumbnail1');
@@ -80,9 +80,9 @@ test('updates main image when non-active item is clicked', () => {
     const button = component.root.findByProps({ className: 'rootSelected' });
     const activeImageThumbnailAlt = button.children[0].props.alt;
 
-    const activeImage = component.root.findByProps({
+    const activeImage = component.root.findAllByProps({
         className: 'currentImage'
-    });
+    })[0];
     const activeImageAlt = activeImage.props.alt;
 
     expect(activeImageAlt).toEqual('test-thumbnail2');
@@ -102,9 +102,9 @@ test('renders prior image when left chevron is clicked', () => {
     });
     leftButton.props.onClick();
 
-    const activeImage = component.root.findByProps({
+    const activeImage = component.root.findAllByProps({
         className: 'currentImage'
-    });
+    })[0];
     const activeImageAlt = activeImage.props.alt;
 
     expect(activeImageAlt).toEqual('test-thumbnail1');
@@ -118,9 +118,9 @@ test('renders last image when left chevron is clicked and first item is active',
     });
     leftButton.props.onClick();
 
-    const activeImage = component.root.findByProps({
+    const activeImage = component.root.findAllByProps({
         className: 'currentImage'
-    });
+    })[0];
     const activeImageAlt = activeImage.props.alt;
 
     expect(activeImageAlt).toEqual('test-thumbnail4');
@@ -134,9 +134,9 @@ test('renders next image when right chevron is clicked', () => {
     });
     leftButton.props.onClick();
 
-    const activeImage = component.root.findByProps({
+    const activeImage = component.root.findAllByProps({
         className: 'currentImage'
-    });
+    })[0];
     const activeImageAlt = activeImage.props.alt;
 
     expect(activeImageAlt).toEqual('test-thumbnail2');
@@ -155,9 +155,9 @@ test('renders first image when right chevron is clicked and last item is active'
     });
     leftButton.props.onClick();
 
-    const activeImage = component.root.findByProps({
+    const activeImage = component.root.findAllByProps({
         className: 'currentImage'
-    });
+    })[0];
     const activeImageAlt = activeImage.props.alt;
 
     expect(activeImageAlt).toEqual('test-thumbnail1');
@@ -171,10 +171,29 @@ test('renders a transparent main image if no file name is provided', () => {
 test('sets main image alt as "image-product" if no label is provided', () => {
     const component = testRenderer.create(<Carousel images={[]} />);
 
-    const activeImage = component.root.findByProps({
+    const activeImage = component.root.findAllByProps({
         className: 'currentImage'
-    });
+    })[0];
     const activeImageAlt = activeImage.props.alt;
 
     expect(activeImageAlt).toEqual('image-product');
 });
+
+test('renders a placeholder until image is loaded', () => {
+    const component = testRenderer.create(<Carousel {...defaultProps} />);
+
+    const placeholderImage = component.root.findAllByProps({
+        className: 'currentImage'
+    })[1];
+    const placeholderImageSrc = placeholderImage.props.src;
+
+    expect(placeholderImageSrc).toEqual(transparentPlaceholder);
+
+    component.root.children[0].instance.setCurrentImageLoaded();
+
+    const images = component.root.findAllByProps({
+        className: 'currentImage'
+    });
+
+    expect(images.length).toEqual(1);
+});

packages/venia-concept/src/components/ProductImageCarousel/carousel.js

@@ -36,7 +36,8 @@ class Carousel extends Component {
     };
 
     state = {
-        activeItemIndex: 0
+        activeItemIndex: 0,
+        currentImageLoaded: false
     };
 
     updateActiveItemIndex = index => {
@@ -87,6 +88,12 @@ class Carousel extends Component {
         </button>
     );
 
+    setCurrentImageLoaded = () => {
+        this.setState({
+            currentImageLoaded: true
+        });
+    };
+
     render() {
         const { classes } = this.props;
 
@@ -101,7 +108,19 @@ class Carousel extends Component {
             <div className={classes.root}>
                 <div className={classes.imageContainer}>
                     {this.getChevron('left')}
-                    <img className={classes.currentImage} src={src} alt={alt} />
+                    <img
+                        onLoad={this.setCurrentImageLoaded}
+                        className={classes.currentImage}
+                        src={src}
+                        alt={alt}
+                    />
+                    {!this.state.currentImageLoaded ? (
+                        <img
+                            className={classes.currentImage}
+                            src={transparentPlaceholder}
+                            alt={alt}
+                        />
+                    ) : null}
                     {this.getChevron('right')}
                 </div>
                 <ThumbnailList