Add robot placeholder image

.gitignore

@@ -16,6 +16,7 @@
 .env.development.local
 .env.test.local
 .env.production.local
+.vscode
 
 npm-debug.log*
 yarn-debug.log*

src/components/Card.js

@@ -1,15 +1,38 @@
 import React from 'react';
+import placeholder from '../images/placeholder.jpg';
 
-const Card = ({ name, email, id }) => {
-  return (
-    <div className='tc grow bg-light-green br3 pa3 ma2 dib bw2 shadow-5'>
-      <img alt='robots' src={`https://robohash.org/${id}?size=200x200`} />
-      <div>
-        <h2>{name}</h2>
-        <p>{email}</p>
+class Card extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      hasImageLoaded: false
+    };
+  }
+
+  setImageLoaded = () => {
+    this.setState({ hasImageLoaded: true });
+  }
+
+  render() {
+    const { name, email, id } = this.props;
+    const robotImageUrl = `https://robohash.org/${id}?size=200x200`;
+
+    const { hasImageLoaded } = this.state;
+
+    return (
+      <div className="tc bg-light-green dib br3 pa3 ma2 grow bw2 shadow-5">
+        <img
+          src={hasImageLoaded ? robotImageUrl : placeholder}
+          alt="robots"
+          onLoad={this.setImageLoaded}
+        />
+        <div>
+          <h2>{name}</h2>
+          <p>{email}</p>
+        </div>
       </div>
-    </div>
-  );
+    );
+  }
 }
 
-export default Card;
+export default Card;