fix(status): Content jump due to height changes (#3734)

app/javascript/mastodon/components/status.js

@@ -41,6 +41,7 @@ class Status extends ImmutablePureComponent {
   };
 
   state = {
+    isExpanded: false,
     isIntersecting: true, // assume intersecting until told otherwise
     isHidden: false, // set to true in requestIdleCallback to trigger un-render
   }
@@ -57,7 +58,7 @@ class Status extends ImmutablePureComponent {
     'muted',
   ]
 
-  updateOnStates = []
+  updateOnStates = ['isExpanded']
 
   shouldComponentUpdate (nextProps, nextState) {
     if (!nextState.isIntersecting && nextState.isHidden) {
@@ -112,12 +113,15 @@ class Status extends ImmutablePureComponent {
     this.setState((prevState) => ({ isHidden: !prevState.isIntersecting }));
   }
 
+  saveHeight = () => {
+    if (this.node && this.node.children.length !== 0) {
+      this.height = this.node.clientHeight;
+    }
+  }
 
   handleRef = (node) => {
     this.node = node;
-    if (node && node.children.length !== 0) {
-      this.height = node.clientHeight;
-    }
+    this.saveHeight();
   }
 
   handleClick = () => {
@@ -133,11 +137,15 @@ class Status extends ImmutablePureComponent {
     }
   }
 
+  handleExpandedToggle = () => {
+    this.setState({ isExpanded: !this.state.isExpanded });
+  };
+
   render () {
     let media = null;
     let statusAvatar;
     const { status, account, ...other } = this.props;
-    const { isIntersecting, isHidden } = this.state;
+    const { isExpanded, isIntersecting, isHidden } = this.state;
 
     if (status === null) {
       return null;
@@ -203,7 +211,7 @@ class Status extends ImmutablePureComponent {
           </a>
         </div>
 
-        <StatusContent status={status} onClick={this.handleClick} />
+        <StatusContent status={status} onClick={this.handleClick} expanded={isExpanded} onExpandedToggle={this.handleExpandedToggle} onHeightUpdate={this.saveHeight} />
 
         {media}