From 449882b5e0415d5c891f18b18b8869442994926a Mon Sep 17 00:00:00 2001
From: Paul Hoskinson <plhosk@gmail.com>
Date: Sun, 30 Jul 2017 16:26:03 -0700
Subject: [PATCH] Implement spinner

---
 package-lock.json |  8 ++++++++
 package.json      |  1 +
 src/Projects.css  | 11 ++++++++++-
 src/Projects.jsx  | 11 +++++++++--
 4 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 36a40e0..da4384f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8805,6 +8805,14 @@
         }
       }
     },
+    "react-image": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/react-image/-/react-image-1.0.1.tgz",
+      "integrity": "sha1-6zF4p7KgmUUxCkvqb4kxfYtvjEA=",
+      "requires": {
+        "prop-types": "15.5.10"
+      }
+    },
     "react-lazy-load": {
       "version": "3.0.12",
       "resolved": "https://registry.npmjs.org/react-lazy-load/-/react-lazy-load-3.0.12.tgz",
diff --git a/package.json b/package.json
index 04a5946..756eb86 100644
--- a/package.json
+++ b/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",
diff --git a/src/Projects.css b/src/Projects.css
index 9a62581..806f470 100644
--- a/src/Projects.css
+++ b/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;
diff --git a/src/Projects.jsx b/src/Projects.jsx
index a266c10..d981aa2 100644
--- a/src/Projects.jsx
+++ b/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}