PLT-7048 Changed MarkdownImage to scroll post list as soon as it knows its height (#6916)

1 files changed, 56 insertions, 8 deletions

diff --git a/webapp/components/markdown_image.jsx b/webapp/components/markdown_image.jsx
index 75a6ce9ea..4d8635457 100644
--- a/webapp/components/markdown_image.jsx
+++ b/webapp/components/markdown_image.jsx
@@ -1,19 +1,67 @@
 // Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-import React, {PureComponent} from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 
 import {postListScrollChange} from 'actions/global_actions.jsx';
 
-export default class MarkdownImage extends PureComponent {
-    handleLoad = () => {
-        postListScrollChange();
+const WAIT_FOR_HEIGHT_TIMEOUT = 100;
+
+export default class MarkdownImage extends React.PureComponent {
+    static propTypes = {
+
+        /*
+         * The href of the image to be loaded
+         */
+        href: PropTypes.string
     }
 
-    render() {
-        const props = {...this.props};
-        props.onLoad = this.handleLoad;
+    constructor(props) {
+        super(props);
+
+        this.heightTimeout = 0;
+    }
+
+    componentDidMount() {
+        this.waitForHeight();
+    }
+
+    componentDidUpdate(prevProps) {
+        if (this.props.href !== prevProps.href) {
+            this.waitForHeight();
+        }
+    }
 
-        return <img {...props}/>;
+    componentWillUnmount() {
+        this.stopWaitingForHeight();
+    }
+
+    waitForHeight = () => {
+        if (this.refs.image.height) {
+            postListScrollChange();
+
+            this.heightTimeout = 0;
+        } else {
+            this.heightTimeout = setTimeout(this.waitForHeight, WAIT_FOR_HEIGHT_TIMEOUT);
+        }
+    }
+
+    stopWaitingForHeight = () => {
+        if (this.heightTimeout !== 0) {
+            clearTimeout(this.heightTimeout);
+            this.heightTimeout = 0;
+        }
+    }
+
+    render() {
+        return (
+            <img
+                {...this.props}
+                ref='image'
+                onLoad={this.stopWaitingForHeight}
+                onError={this.stopWaitingForHeight}
+            />
+        );
     }
 }