On card image loaded, redistribute cards

src/components/Cards/ImageCard.js

@@ -1,7 +1,38 @@
 import React, { PropTypes } from 'react';
 import { Card } from '../UI';
 
-export default function ImageCard({ onClick, image, text }) {
+export default class ImageCard extends React.Component {
+  constructor(props) {
+    super(props);
+    this._image = null;
+    this.fetchImage = this.fetchImage.bind(this);
+  }
+
+  componentDidMount() {
+    this._image = new Image();
+    if (this.props.image) {
+      this.fetchImage(this.props.image);
+    }
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (this.props.image !== nextProps.image) {
+      this.fetchImage(nextProps.image);
+    }
+  }
+
+  componentWillUnmount() {
+    this._image.onload = null;
+    this._image = null;
+  }
+
+  fetchImage(src) {
+    this._image.onload = this.props.onImageLoaded;
+    this._image.src = src;
+  }
+
+  render() {
+    const { onClick, image, text } = this.props;
     return (
       <Card onClick={onClick}>
         <img src={image} />
@@ -9,14 +40,16 @@ export default function ImageCard({ onClick, image, text }) {
       </Card>
     );
   }
+}
 
 ImageCard.propTypes = {
   image: PropTypes.string.isRequired,
-
   onClick: PropTypes.func,
+  onImageLoaded: PropTypes.func,
   text: PropTypes.string.isRequired
 };
 
 ImageCard.defaultProps = {
   onClick: function() {},
+  onImageLoaded: function() {}
 };

src/components/EntryListing.js

@@ -57,6 +57,7 @@ export default class EntryListing extends React.Component {
       key: entry.get('slug'),
       collection: collection,
       onClick: browserHistory.push.bind(this, link),
+      onImageLoaded: () => this.bricksInstance.pack(),
       text: entry.getIn(['data', collection.getIn(['card', 'text'])]),
       image: entry.getIn(['data', collection.getIn(['card', 'image'])]),
     });