throttling saveSize and updateState. Separating logic

lib/ui/package.json

@@ -28,6 +28,7 @@
     "lodash.debounce": "^4.0.8",
     "lodash.pick": "^4.4.0",
     "lodash.sortby": "^4.7.0",
+    "lodash.throttle": "^4.1.1",
     "prop-types": "^15.6.1",
     "qs": "^6.5.1",
     "react-fuzzy": "^0.5.2",

lib/ui/src/modules/ui/components/layout/index.js

@@ -2,7 +2,7 @@ import { localStorage, window } from 'global';
 import PropTypes from 'prop-types';
 import React from 'react';
 import SplitPane from 'react-split-pane';
-import _ from 'lodash'; /* eslint-disable-line import/no-extraneous-dependencies */
+import throttle from 'lodash.throttle';
 
 import USplit from './usplit';
 import Dimensions from './dimensions';
@@ -136,17 +136,18 @@ class Layout extends React.Component {
       isDragging: false,
     };
 
-    this.onThrottledResize = _.throttle(this.onResize.bind(this), 200);
+    this.throttledUpdatePreviewPanelState = throttle(this.updatePrevewPanelState.bind(this), 200);
+    this.throttledSaveSizes = throttle(this.saveSizes, 25);
     this.onDragStart = this.onDragStart.bind(this);
     this.onDragEnd = this.onDragEnd.bind(this);
   }
 
   componentDidMount() {
-    window.addEventListener('resize', this.onThrottledResize);
+    window.addEventListener('resize', this.throttledUpdatePreviewPanelState);
   }
 
   componentWillUnmount() {
-    window.removeEventListener('resize', this.onThrottledResize);
+    window.removeEventListener('resize', this.throttledUpdatePreviewPanelState);
   }
 
   onDragStart() {
@@ -158,12 +159,18 @@ class Layout extends React.Component {
   }
 
   onResize(pane, mode, size) {
-    if (pane && mode && size) {
-      this.layerSizes[pane][mode] = size;
-      saveSizes(this.layerSizes);
-    }
+    this.throttledSaveSizes(pane, mode, size);
+    this.throttledUpdatePreviewPanelState();
+  }
 
+  saveSizes(pane, mode, size) {
+    this.layerSizes[pane][mode] = size;
+    saveSizes(this.layerSizes);
+  }
+
+  updatePrevewPanelState() {
     const { clientWidth, clientHeight } = this.previewPanelRef;
+
     this.setState({
       previewPanelDimensions: {
         width: clientWidth,
@@ -216,9 +223,7 @@ class Layout extends React.Component {
           resizerStyle={storiesResizerStyle(showStoriesPanel, storiesPanelOnTop)}
           onDragStarted={this.onDragStart}
           onDragFinished={this.onDragEnd}
-          onChange={size =>
-            this.onThrottledResize('storiesPanel', storiesPanelOnTop ? 'top' : 'left', size)
-          }
+          onChange={size => this.onResize('storiesPanel', storiesPanelOnTop ? 'top' : 'left', size)}
         >
           <div style={storiesPanelStyle(showStoriesPanel, storiesPanelOnTop)}>
             <div style={{ flexGrow: 1, height: '100%', width: '100%' }}>{storiesPanel()}</div>
@@ -236,7 +241,7 @@ class Layout extends React.Component {
             onDragStarted={this.onDragStart}
             onDragFinished={this.onDragEnd}
             onChange={size =>
-              this.onThrottledResize('addonPanel', addonPanelInRight ? 'right' : 'down', size)
+              this.onResize('addonPanel', addonPanelInRight ? 'right' : 'down', size)
             }
           >
             <div style={contentPanelStyle(addonPanelInRight, storiesPanelOnTop)}>

yarn.lock

@@ -9729,6 +9729,10 @@ lodash.templatesettings@^4.0.0:
   dependencies:
     lodash._reinterpolate "~3.0.0"
 
+lodash.throttle@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
+
 lodash.union@~4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/lodash.union/-/lodash.union-4.6.0.tgz#48bb5088409f16f1821666641c44dd1aaae3cd88"