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.saveHeight();
-      this.height = node.clientHeight;
-    }
   }
 
   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}
 

app/javascript/mastodon/components/status_content.js

@@ -15,6 +15,9 @@ class StatusContent extends React.PureComponent {
 
   static propTypes = {
     status: ImmutablePropTypes.map.isRequired,
+    expanded: PropTypes.bool,
+    onExpandedToggle: PropTypes.func,
+    onHeightUpdate: PropTypes.func,
     onClick: PropTypes.func,
   };
 
@@ -44,6 +47,12 @@ class StatusContent extends React.PureComponent {
     }
   }
 
+  componentDidUpdate () {
+    if (this.props.onHeightUpdate) {
+      this.props.onHeightUpdate();
+    }
+  }
+
   onMentionClick = (mention, e) => {
     if (e.button === 0) {
       e.preventDefault();
@@ -85,8 +94,14 @@ class StatusContent extends React.PureComponent {
 
   handleSpoilerClick = (e) => {
     e.preventDefault();
+
+    if (this.props.onExpandedToggle) {
+      // The parent manages the state
+      this.props.onExpandedToggle();
+    } else {
       this.setState({ hidden: !this.state.hidden });
     }
+  }
 
   setRef = (c) => {
     this.node = c;
@@ -94,7 +109,8 @@ class StatusContent extends React.PureComponent {
 
   render () {
     const { status } = this.props;
-    const { hidden } = this.state;
+
+    const hidden = this.props.onExpandedToggle ? !this.props.expanded : this.state.hidden;
 
     const content = { __html: emojify(status.get('content')) };
     const spoilerContent = { __html: emojify(escapeTextContentForBrowser(status.get('spoiler_text', ''))) };