Remove onScroll for perf

src/components/SettingsPage/sections/Currencies.js

@@ -145,5 +145,4 @@ class TabCurrencies extends PureComponent<Props, State> {
   }
 }
 
-// $FlowFixMe not sure what's wrong
 export default connect(mapStateToProps)(TabCurrencies)

src/components/base/GrowScroll/index.js

@@ -5,7 +5,6 @@
 import React, { PureComponent } from 'react'
 import Scrollbar from 'react-smooth-scrollbar'
 import SmoothScrollbar, { ScrollbarPlugin } from 'smooth-scrollbar'
-import noop from 'lodash/noop'
 
 import Box from 'components/base/Box'
 
@@ -13,42 +12,55 @@ type Props = {
   children: any,
   full: boolean,
   maxHeight?: number,
-  onUpdate: Function,
+  onUpdate?: (*) => void,
-  onScroll: Function,
+  onScroll?: () => void,
 }
 
+// TODO this component is the source of junky scroll experience. need better solution ASAP
 class GrowScroll extends PureComponent<Props> {
   static defaultProps = {
     full: false,
-    onUpdate: noop,
-    onScroll: noop,
   }
 
   componentDidMount() {
-    this.handleUpdate(this.props)
+    const { onUpdate, onScroll } = this.props
-
+    const { _scrollbar } = this
-    if (this._scrollbar) {
+    if (_scrollbar) {
-      this._scrollbar.addListener(this.props.onScroll)
+      if (onUpdate) {
+        onUpdate(_scrollbar)
+      }
+      if (onScroll) {
+        _scrollbar.addListener(this.onScroll)
+      }
     }
   }
 
   componentWillUnmount() {
-    if (this._scrollbar) {
+    const { onScroll } = this.props
-      this._scrollbar.removeListener(this.props.onScroll)
+    const { _scrollbar } = this
+    if (_scrollbar && onScroll) {
+      _scrollbar.removeListener(this.onScroll)
     }
   }
 
   componenDidUpdate() {
-    this.handleUpdate(this.props)
+    const { onUpdate } = this.props
+    const { _scrollbar } = this
+    if (_scrollbar && onUpdate) {
+      onUpdate(_scrollbar)
+    }
   }
 
-  handleUpdate = (props: Props) => {
+  onScroll = () => {
-    if (this._scrollbar) {
+    const { onScroll } = this.props
-      props.onUpdate(this._scrollbar)
+    if (onScroll) onScroll()
-    }
+  }
+
+  onRef = (ref: ?Scrollbar) => {
+    this._scrollbar = ref && ref.scrollbar
   }
 
-  _scrollbar = undefined
+  _scrollbar: *
 
   render() {
     const { onUpdate, children, maxHeight, full, ...props } = this.props
@@ -79,7 +91,7 @@ class GrowScroll extends PureComponent<Props> {
                   top: 0,
                 }),
           }}
-          ref={r => r && (this._scrollbar = r.scrollbar)}
+          ref={this.onRef}
         >
           <Box {...props}>{children}</Box>
         </Scrollbar>

src/components/layout/Default.js

@@ -50,17 +50,6 @@ class Default extends Component<Props> {
     clearTimeout(this._timeout)
   }
 
-  handleScroll = () => {
-    document.querySelectorAll('.tippy-popper').forEach((p: any) => {
-      const instance = p._tippy
-
-      if (instance.state.visible) {
-        instance.popperInstance.disableEventListeners()
-        instance.hide(0)
-      }
-    })
-  }
-
   _timeout = undefined
   _scrollContainer = null
 
@@ -79,7 +68,7 @@ class Default extends Component<Props> {
 
             <Box shrink grow bg="lightGrey" color="grey" relative>
               <TopBar />
-              <Container innerRef={n => (this._scrollContainer = n)} onScroll={this.handleScroll}>
+              <Container innerRef={n => (this._scrollContainer = n)}>
                 <Route path="/" exact component={DashboardPage} />
                 <Route path="/settings" component={SettingsPage} />
                 <Route path="/manager" component={ManagerPage} />