From fec81c93a33e84841562d26fe72770fb4ae404ec Mon Sep 17 00:00:00 2001
From: Christopher Willis-Ford <cwillisf@media.mit.edu>
Date: Thu, 15 Nov 2018 18:07:13 -0800
Subject: [PATCH] Make sure icon load starts immediately

---
 src/containers/library-item.jsx | 38 ++++++++++++++++++++++++++-------
 1 file changed, 30 insertions(+), 8 deletions(-)

diff --git a/src/containers/library-item.jsx b/src/containers/library-item.jsx
index 4af60e53e..de26de790 100644
--- a/src/containers/library-item.jsx
+++ b/src/containers/library-item.jsx
@@ -33,22 +33,44 @@ class LibraryItem extends React.PureComponent {
             'handleMouseEnter',
             'handleMouseLeave'
         ]);
-        this.state = Object.assign(this.state || {}, {
-            iconURI: props.iconURL // may be undefined if we're using iconMD5 instead
-        });
+        this.state = {};
+        Object.assign(this.state, this._loadIconFromProps(props));
     }
     componentWillReceiveProps (nextProps) {
-        if (nextProps.iconURL) {
-            this.setState({iconURI: nextProps.iconURL});
-        } else if ((!this.state.iconURI) || nextProps.iconMD5 !== this.props.iconMD5) {
+        const newState = this._loadIconFromProps(nextProps);
+        this.setState(newState);
+    }
+    /**
+     * Calculate the state changes necessary to load the icon specified in the provided properties. If the component is
+     * mounted, call setState() with the return value of this function. If the component has not yet mounted, use the
+     * return value of this function as initial state for the component.
+     *
+     * @param {object} props - the new properties for this component, including either iconMD5 or iconURL
+     * @returns {object} - the new state values, if any.
+     */
+    _loadIconFromProps (props) {
+        if (props.iconURL) {
+            return {
+                iconURI: props.iconURL,
+                lastRequestedMD5: null
+            };
+        }
+        if (this.state.lastRequestedMD5 !== props.iconMD5) {
             // TODO: adjust libraries to be more storage-friendly; don't use split() here.
-            const [md5, ext] = nextProps.iconMD5.split('.');
+            const [md5, ext] = props.iconMD5.split('.');
             const assetType = getAssetTypeForExtension(ext);
             storage.load(assetType, md5)
                 .then(asset => {
-                    this.setState({iconURI: asset.encodeDataURI()});
+                    this.setState({
+                        iconURI: asset.encodeDataURI()
+                    });
                 });
+            return {
+                lastRequestedMD5: props.iconMD5
+            };
         }
+        // Nothing to do - don't change any state.
+        return {};
     }
     handleBlur () {
         this.props.onBlur(this.props.id);