Performance improvements (#3168)

* refactor(components/status_list): Avoid quering scrollTop if not necessary

* refactor(components/dropdown_menu): Do not render items if not expanded

* refactor: Cherry-pick react-motion imports

* refactor(compose/privacy_dropdown): Do not render options if not open

* refactor(components/column_collapsable): Do not render children if collapsed

1 files changed, 15 insertions, 5 deletions

diff --git a/app/javascript/mastodon/components/dropdown_menu.js b/app/javascript/mastodon/components/dropdown_menu.js
index 03595318c..8dee211fa 100644
--- a/app/javascript/mastodon/components/dropdown_menu.js
+++ b/app/javascript/mastodon/components/dropdown_menu.js
@@ -21,7 +21,8 @@ class DropdownMenu extends React.PureComponent {
   };
 
   state = {
-    direction: 'left'
+    direction: 'left',
+    expanded: false,
   };
 
   setRef = (c) => {
@@ -43,6 +44,10 @@ class DropdownMenu extends React.PureComponent {
     this.dropdown.hide();
   }
 
+  handleShow = () => this.setState({ expanded: true })
+
+  handleHide = () => this.setState({ expanded: false })
+
   renderItem = (item, i) => {
     if (item === null) {
       return <li key={ 'sep' + i } className='dropdown__sep' />;
@@ -61,18 +66,23 @@ class DropdownMenu extends React.PureComponent {
 
   render () {
     const { icon, items, size, direction, ariaLabel } = this.props;
+    const { expanded } = this.state;
     const directionClass = (direction === "left") ? "dropdown__left" : "dropdown__right";
 
+    const dropdownItems = expanded && (
+      <ul className='dropdown__content-list'>
+        {items.map(this.renderItem)}
+      </ul>
+    );
+
     return (
-      <Dropdown ref={this.setRef}>
+      <Dropdown ref={this.setRef} onShow={this.handleShow} onHide={this.handleHide}>
         <DropdownTrigger className='icon-button' style={{ fontSize: `${size}px`, width: `${size}px`, lineHeight: `${size}px` }} aria-label={ariaLabel}>
           <i className={ `fa fa-fw fa-${icon} dropdown__icon` }  aria-hidden={true} />
         </DropdownTrigger>
 
         <DropdownContent className={directionClass}>
-          <ul className='dropdown__content-list'>
-            {items.map(this.renderItem)}
-          </ul>
+          {dropdownItems}
         </DropdownContent>
       </Dropdown>
     );