make LazyImage promise cancellable (otheriwse errors in the log)

README.md

@@ -46,7 +46,6 @@ More translations are welcome. See [instructions](https://github.com/tinode/chat
 * End-to-End encryption.
 * Emoji support is weak.
 * Mentions, hashtags.
-* Forwarding messages.
 * Previews not generated for videos, audio, links or docs.
 
 ## Other

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'}});

umd/index.dev.js

@@ -818,7 +818,7 @@ function replyFormatter(style, data, values, key) {
   const attr = inlineImageAttr.call(this, {
     key: key
   }, data);
-  attr.whenDone = quoteImage.call(this, data);
+  attr.whenDone = (0,_utils_js__WEBPACK_IMPORTED_MODULE_8__.cancelablePromise)(quoteImage.call(this, data));
   values = [react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_widgets_lazy_image_jsx__WEBPACK_IMPORTED_MODULE_3__["default"], attr, null), ' ', attr.alt];
   return react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), {
     key: key
@@ -1107,7 +1107,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "isUrlRelative": () => (/* binding */ isUrlRelative),
 /* harmony export */   "sanitizeUrl": () => (/* binding */ sanitizeUrl),
 /* harmony export */   "sanitizeImageUrl": () => (/* binding */ sanitizeImageUrl),
-/* harmony export */   "deliveryMarker": () => (/* binding */ deliveryMarker)
+/* harmony export */   "deliveryMarker": () => (/* binding */ deliveryMarker),
+/* harmony export */   "cancelablePromise": () => (/* binding */ cancelablePromise)
 /* harmony export */ });
 /* harmony import */ var tinode_sdk__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tinode-sdk */ "tinode-sdk");
 /* harmony import */ var tinode_sdk__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(tinode_sdk__WEBPACK_IMPORTED_MODULE_0__);
@@ -1285,6 +1286,25 @@ function deliveryMarker(received) {
 
   return null;
 }
+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;
+    }
+
+  };
+}
+;
 
 /***/ }),
 
@@ -10585,7 +10605,7 @@ class LazyImage extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
   }
 
   componentDidMount() {
-    this.props.whenDone.then(data => this.setState({
+    this.props.whenDone.promise.then(data => this.setState({
       src: data.src,
       style: { ...this.state.style,
         padding: 0
@@ -10595,6 +10615,10 @@ class LazyImage extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
     }));
   }
 
+  componentWillUnmount() {
+    this.props.whenDone.cancel();
+  }
+
   componentDidUpdate(prevProps) {
     if (prevProps.whenDone != this.props.whenDone) {
       this.setState({