MM-31275 New sidebar performance improvements (#7207) (#7221)

Automatic Merge
mattermost · Dec 14, 2020 · b904220 · b904220
1 parent d63a96e
commit b904220
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 22 deletions.
diff --git a/components/legacy_sidebar/sidebar.jsx b/components/legacy_sidebar/sidebar.jsx
@@ -8,6 +8,7 @@ import ReactDOM from 'react-dom';
 import {FormattedMessage, injectIntl} from 'react-intl';
 import {PropTypes} from 'prop-types';
 import classNames from 'classnames';
+import throttle from 'lodash/throttle';
 
 import Scrollbars from 'react-custom-scrollbars';
 import {SpringSystem, MathUtil} from 'rebound';
@@ -275,9 +276,9 @@ class LegacySidebar extends React.PureComponent {
         }
     }
 
-    onScroll = () => {
+    onScroll = throttle(() => {
         this.updateUnreadIndicators();
-    }
+    }, 100);
 
     handleScrollAnimationUpdate = (spring) => {
         const {scrollbar} = this.refs;

diff --git a/components/sidebar/sidebar_channel_list/sidebar_channel_list.tsx b/components/sidebar/sidebar_channel_list/sidebar_channel_list.tsx
@@ -7,7 +7,7 @@ import Scrollbars from 'react-custom-scrollbars';
 import {DragDropContext, Droppable, DropResult, DragStart, BeforeCapture} from 'react-beautiful-dnd';
 import {Spring, SpringSystem} from 'rebound';
 import classNames from 'classnames';
-import debounce from 'lodash/debounce';
+import throttle from 'lodash/throttle';
 
 import {General} from 'mattermost-redux/constants';
 import {Channel} from 'mattermost-redux/types/channels';
@@ -346,11 +346,11 @@ export default class SidebarChannelList extends React.PureComponent<Props, State
         );
     }
 
-    onScroll = () => {
+    onScroll = throttle(() => {
         this.updateUnreadIndicators();
-    }
+    }, 100);
 
-    onTransitionEnd = debounce(() => {
+    onTransitionEnd = throttle(() => {
         this.updateUnreadIndicators();
     }, 100);
 

diff --git a/components/sidebar/sidebar_menu/sidebar_menu.tsx b/components/sidebar/sidebar_menu/sidebar_menu.tsx
@@ -59,22 +59,6 @@ export default class SidebarMenu extends React.PureComponent<Props, State> {
         }
     }
 
-    // TODO: Temporary code to keep the menu in place while scrolling
-    // This shouldn't be necessary once the menus are fixed up
-    componentDidMount() {
-        const scrollbars = document.querySelectorAll('#SidebarContainer .SidebarNavContainer .scrollbar--view');
-        if (scrollbars && scrollbars[0]) {
-            scrollbars[0].addEventListener('scroll', this.closeMenu);
-        }
-    }
-
-    componentWillUnmount() {
-        const scrollbars = document.querySelectorAll('#SidebarContainer .SidebarNavContainer .scrollbar--view');
-        if (scrollbars && scrollbars[0]) {
-            scrollbars[0].removeEventListener('scroll', this.closeMenu);
-        }
-    }
-
     closeMenu = () => {
         if (this.menuWrapperRef.current) {
             this.menuWrapperRef.current.close();