Add spinner while video is still loading

src/components/video-preview/video-preview.jsx

@@ -3,6 +3,7 @@ const PropTypes = require('prop-types');
 const React = require('react');
 
 const Video = require('../video/video.jsx');
+const Spinner = require('../spinner/spinner.jsx');
 
 require('./video-preview.scss');
 
@@ -10,16 +11,25 @@ class VideoPreview extends React.Component {
     constructor (props) {
         super(props);
         bindAll(this, [
-            'handleShowVideo'
+            'handleShowVideo',
+            'handleVideoLoaded'
         ]);
 
         this.state = {
-            videoOpen: false
+            videoOpen: false,
+            spinnerVisible: false
         };
     }
 
     handleShowVideo () {
-        this.setState({videoOpen: true});
+        this.setState({
+            videoOpen: true,
+            spinnerVisible: true
+        });
+    }
+
+    handleVideoLoaded () {
+        this.setState({spinnerVisible: false});
     }
 
     render () {
@@ -27,12 +37,16 @@ class VideoPreview extends React.Component {
             <div className="video-preview">
                 {this.state.videoOpen ?
                     (
-                        <Video
+                        <div className="spinner-video-container">
-                            className="video"
+                            {this.state.spinnerVisible ? <Spinner className="loading-spinner" /> : null}
-                            height={this.props.videoHeight}
+                            <Video
-                            videoId={this.props.videoId}
+                                className="video"
-                            width={this.props.videoWidth}
+                                height={this.props.videoHeight}
-                        />
+                                videoId={this.props.videoId}
+                                width={this.props.videoWidth}
+                                onLoad={this.handleVideoLoaded}
+                            />
+                        </div>
                     ) : (
                         <div
                             className="video-thumbnail"

src/components/video-preview/video-preview.scss

@@ -24,3 +24,20 @@
     	margin-top: 20px;
     }
 }
+
+.loading-spinner {
+    margin: auto;
+    width: 5rem;
+    height: 5rem;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+}
+
+.spinner-video-container {
+    width: 100%;
+    height: 100%;
+    position: relative;
+}

src/components/video/video.jsx

@@ -16,6 +16,7 @@ const Video = props => (
             src={`https://fast.wistia.net/embed/iframe/${props.videoId}?seo=false&videoFoam=true`}
             title={props.title}
             width={props.width}
+            onLoad={props.onLoad}
         />
         <script
             async
@@ -32,9 +33,11 @@ Video.defaultProps = {
 Video.propTypes = {
     className: PropTypes.string,
     height: PropTypes.string.isRequired,
+    onLoad: PropTypes.func,
     title: PropTypes.string.isRequired,
     videoId: PropTypes.string.isRequired,
     width: PropTypes.string.isRequired
+    
 };
 
 module.exports = Video;