Implement spinner

package.json

@@ -39,6 +39,7 @@
     "react-dom": "^15.6.1",
     "react-error-overlay": "^1.0.9",
     "react-hot-loader": "next",
+    "react-image": "^1.0.1",
     "react-scroll-to-component": "^1.0.1",
     "style-loader": "^0.18.2",
     "sw-precache-webpack-plugin": "^0.11.3",

src/Projects.css

@@ -46,10 +46,19 @@
 }
 
 .Projects-thumbnail {
-  max-width: 256px;
+  width: 256px;
+  height: 192px;
   border: 1px solid #ccc;
 }
 
+.Projects-thumbnail-spinner {
+  width: 256px;
+  height: 192px;
+  border: 1px solid #ccc;
+  padding-top: 80px;
+  text-align: center;
+}
+
 .Projects-description {
   font-size: 1.05em;
   text-align: center;

src/Projects.jsx

@@ -1,4 +1,6 @@
 import React from 'react'
+import { Spin } from 'antd'
+import Img from 'react-image'
 
 import './Projects.css'
 
@@ -106,7 +108,7 @@ const projectList = [
 const Projects = () => (
   <div className="Projects-outer-div">
     <div className="Projects-blurb">
-      Check out some of my projects below.
+      Check out some of my demo projects below.
       They range from simple Javascript demos to full-stack
       React + Redux applications with a Node.js backend and MongoDB database.
     </div>
@@ -117,10 +119,15 @@ const Projects = () => (
             <div
               className="Projects-item-div"
             >
-              <img
+              <Img
                 className="Projects-thumbnail"
                 src={project.screenshot}
                 alt={project.title}
+                loader={
+                  <div className="Projects-thumbnail-spinner">
+                    <Spin size="large" />
+                  </div>
+                }
               />
               <div className="Projects-title">
                 {project.title}