Keep children of the column-collapsable until the transition is completed (#3218)

1 files changed, 9 insertions, 4 deletions

diff --git a/app/javascript/mastodon/components/column_collapsable.js b/app/javascript/mastodon/components/column_collapsable.js
index fc4ed309c..c7c953acd 100644
--- a/app/javascript/mastodon/components/column_collapsable.js
+++ b/app/javascript/mastodon/components/column_collapsable.js
@@ -13,30 +13,35 @@ class ColumnCollapsable extends React.PureComponent {
 
   state = {
     collapsed: true,
+    animating: false,
   };
 
   handleToggleCollapsed = () => {
     const currentState = this.state.collapsed;
 
-    this.setState({ collapsed: !currentState });
+    this.setState({ collapsed: !currentState, animating: true });
 
     if (!currentState && this.props.onCollapse) {
       this.props.onCollapse();
     }
   }
 
+  handleTransitionEnd = () => {
+    this.setState({ animating: false });
+  }
+
   render () {
     const { icon, title, fullHeight, children } = this.props;
-    const { collapsed } = this.state;
+    const { collapsed, animating } = this.state;
 
     return (
-      <div className={`column-collapsable ${collapsed ? 'collapsed' : ''}`}>
+      <div className={`column-collapsable ${collapsed ? 'collapsed' : ''}`} onTransitionEnd={this.handleTransitionEnd}>
         <div role='button' tabIndex='0' title={`${title}`} className='column-collapsable__button column-icon' onClick={this.handleToggleCollapsed}>
           <i className={`fa fa-${icon}`} />
         </div>
 
         <div className='column-collapsable__content' style={{ height: `${fullHeight}px` }}>
-          {!collapsed && children}
+          {(!collapsed || animating) && children}
         </div>
       </div>
     );