make LazyImage promise cancellable (otheriwse errors in the log)

src/lib/formatters.js

@@ -9,7 +9,7 @@ import UploadingImage from '../widgets/uploading-image.jsx'
 import { IMAGE_THUMBNAIL_DIM, BROKEN_IMAGE_SIZE, REM_SIZE } from '../config.js';
 import { base64ToBlob, blobToBase64, fitImageSize, imageScaled } from './blob-helpers.js';
 import { idToColorClass, shortenFileName } from './strformat.js';
-import { sanitizeImageUrl } from './utils.js';
+import { cancelablePromise, sanitizeImageUrl } from './utils.js';
 
 const messages = defineMessages({
   drafty_form: {
@@ -389,7 +389,7 @@ export function replyFormatter(style, data, values, key) {
     return quoteFormatter.call(this, style, data, values, key);
   }
   const attr = inlineImageAttr.call(this, {key: key}, data);
-  attr.whenDone = quoteImage.call(this, data);
+  attr.whenDone = cancelablePromise(quoteImage.call(this, data));
   values = [React.createElement(LazyImage, attr, null), ' ', attr.alt];
   return React.createElement(React.Fragment, {key: key}, values);
 }

src/lib/utils.js

@@ -181,3 +181,22 @@ export function deliveryMarker(received) {
   }
   return null;
 }
+
+// Wraps a promise to make it cancelable.
+export function cancelablePromise(promise) {
+  let hasCanceled = false;
+
+  const wrappedPromise = new Promise((resolve, reject) => {
+    promise.then(
+      result => hasCanceled ? reject({isCanceled: true}) : resolve(result),
+      error => hasCanceled ? reject({isCanceled: true}) : reject(error)
+    );
+  });
+
+  return {
+    promise: wrappedPromise,
+    cancel( ) {
+      hasCanceled = true;
+    },
+  };
+};

src/widgets/lazy-image.jsx

@@ -16,11 +16,17 @@ export default class LazyImage extends React.PureComponent {
   }
 
   componentDidMount() {
+    // whenDone is a wrapper around an actual promise to be able to cancel it.
     this.props.whenDone
+      .promise
       .then(data => this.setState({src: data.src, style: {...this.state.style, padding: 0}}))
       .catch(() => this.setState({src: 'img/broken_image.png'}));
   }
 
+  componentWillUnmount() {
+    this.props.whenDone.cancel();
+  }
+
   componentDidUpdate(prevProps) {
     if (prevProps.whenDone != this.props.whenDone) {
       this.setState({src: 'img/placeholder.png', style: {...this.state.style, padding: '4px'}});