Remove fake img preview before loaded (#5854)

Remove fake img preview and collapse toggle before it is loaded,
only show img and toggle after it is fully loaded.
Fix markdown img size and add scroll down behaviour.

3 files changed, 45 insertions, 24 deletions

diff --git a/webapp/components/post_view/components/post_body_additional_content.jsx b/webapp/components/post_view/components/post_body_additional_content.jsx
index 130031233..180681100 100644
--- a/webapp/components/post_view/components/post_body_additional_content.jsx
+++ b/webapp/components/post_view/components/post_body_additional_content.jsx
@@ -23,19 +23,20 @@ export default class PostBodyAdditionalContent extends React.Component {
         this.toggleEmbedVisibility = this.toggleEmbedVisibility.bind(this);
         this.isLinkToggleable = this.isLinkToggleable.bind(this);
         this.handleLinkLoadError = this.handleLinkLoadError.bind(this);
+        this.handleLinkLoaded = this.handleLinkLoaded.bind(this);
 
         this.state = {
             embedVisible: props.previewCollapsed.startsWith('false'),
             link: Utils.extractFirstLink(props.post.message),
-            linkLoadError: false
+            linkLoadError: false,
+            linkLoaded: false
         };
     }
 
     componentWillReceiveProps(nextProps) {
         this.setState({
             embedVisible: nextProps.previewCollapsed.startsWith('false'),
-            link: Utils.extractFirstLink(nextProps.post.message),
-            linkLoadError: false
+            link: Utils.extractFirstLink(nextProps.post.message)
         });
     }
 
@@ -52,6 +53,9 @@ export default class PostBodyAdditionalContent extends React.Component {
         if (nextState.linkLoadError !== this.state.linkLoadError) {
             return true;
         }
+        if (nextState.linkLoaded !== this.state.linkLoaded) {
+            return true;
+        }
         return false;
     }
 
@@ -105,6 +109,12 @@ export default class PostBodyAdditionalContent extends React.Component {
         });
     }
 
+    handleLinkLoaded() {
+        this.setState({
+            linkLoaded: true
+        });
+    }
+
     generateToggleableEmbed() {
         const link = this.state.link;
         if (!link) {
@@ -127,6 +137,8 @@ export default class PostBodyAdditionalContent extends React.Component {
                     channelId={this.props.post.channel_id}
                     link={link}
                     onLinkLoadError={this.handleLinkLoadError}
+                    onLinkLoaded={this.handleLinkLoaded}
+                    childComponentDidUpdateFunction={this.props.childComponentDidUpdateFunction}
                 />
             );
         }
@@ -174,11 +186,13 @@ export default class PostBodyAdditionalContent extends React.Component {
                 </div>
             );
 
-            let contents;
-            if (prependToggle) {
-                contents = [toggle, message];
-            } else {
-                contents = [message, toggle];
+            const contents = [message];
+            if (this.state.linkLoaded) {
+                if (prependToggle) {
+                    contents.unshift(toggle);
+                } else {
+                    contents.push(toggle);
+                }
             }
 
             if (this.state.embedVisible) {
diff --git a/webapp/components/post_view/components/post_image.jsx b/webapp/components/post_view/components/post_image.jsx
index 2bdc5efc0..1268c9df2 100644
--- a/webapp/components/post_view/components/post_image.jsx
+++ b/webapp/components/post_view/components/post_image.jsx
@@ -32,6 +32,9 @@ export default class PostImageEmbed extends React.Component {
     }
 
     componentDidUpdate(prevProps) {
+        if (this.state.loaded && this.props.childComponentDidUpdateFunction) {
+            this.props.childComponentDidUpdateFunction();
+        }
         if (!this.state.loaded && prevProps.link !== this.props.link) {
             this.loadImg(this.props.link);
         }
@@ -46,8 +49,12 @@ export default class PostImageEmbed extends React.Component {
 
     handleLoadComplete() {
         this.setState({
-            loaded: true
+            loaded: true,
+            errored: false
         });
+        if (this.props.onLinkLoaded) {
+            this.props.onLinkLoaded();
+        }
     }
 
     handleLoadError() {
@@ -61,29 +68,26 @@ export default class PostImageEmbed extends React.Component {
     }
 
     render() {
-        if (this.state.errored) {
+        if (this.state.errored || !this.state.loaded) {
             return null;
         }
 
-        if (!this.state.loaded) {
-            return (
+        return (
+            <div
+                className='post__embed-container'
+            >
                 <img
-                    className='img-div placeholder'
-                    height='500px'
+                    className='img-div'
+                    src={this.props.link}
                 />
-            );
-        }
-
-        return (
-            <img
-                className='img-div'
-                src={this.props.link}
-            />
+            </div>
         );
     }
 }
 
 PostImageEmbed.propTypes = {
     link: PropTypes.string.isRequired,
-    onLinkLoadError: PropTypes.func
+    onLinkLoadError: PropTypes.func,
+    onLinkLoaded: PropTypes.func,
+    childComponentDidUpdateFunction: PropTypes.func
 };
diff --git a/webapp/components/post_view/components/post_list.jsx b/webapp/components/post_view/components/post_list.jsx
index 403e26f84..ec3c8dc6a 100644
--- a/webapp/components/post_view/components/post_list.jsx
+++ b/webapp/components/post_view/components/post_list.jsx
@@ -23,7 +23,7 @@ const ScrollTypes = Constants.ScrollTypes;
 
 import PostStore from 'stores/post_store.jsx';
 import PreferenceStore from 'stores/preference_store.jsx';
-
+import ScrollStore from 'stores/scroll_store.jsx';
 import {FormattedDate, FormattedMessage} from 'react-intl';
 
 import PropTypes from 'prop-types';
@@ -49,6 +49,7 @@ export default class PostList extends React.Component {
         this.scrollToBottomAnimated = this.scrollToBottomAnimated.bind(this);
         this.handleKeyDown = this.handleKeyDown.bind(this);
         this.childComponentDidUpdate = this.childComponentDidUpdate.bind(this);
+        this.checkAndUpdateScrolling = this.checkAndUpdateScrolling.bind(this);
 
         this.jumpToPostNode = null;
         this.wasAtBottom = true;
@@ -536,6 +537,7 @@ export default class PostList extends React.Component {
         window.addEventListener('keydown', this.handleKeyDown);
 
         PostStore.addPostDraftChangeListener(this.props.channelId, this.handlePostDraftChange);
+        ScrollStore.addPostScrollListener(this.checkAndUpdateScrolling);
     }
 
     handlePostDraftChange = (draft) => {
@@ -550,6 +552,7 @@ export default class PostList extends React.Component {
         window.cancelAnimationFrame(this.animationFrameId);
         window.removeEventListener('resize', this.handleResize);
         window.removeEventListener('keydown', this.handleKeyDown);
+        ScrollStore.removePostScrollListener(this.checkAndUpdateScrolling);
         this.scrollStopAction.cancel();
 
         PostStore.removePostDraftChangeListener(this.props.channelId, this.handlePostDraftChange);