delaying update of height and width until after stop dragging 50ms

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

@@ -1,4 +1,4 @@
-import { localStorage, window } from 'global';
+import { localStorage } from 'global';
 import PropTypes from 'prop-types';
 import React from 'react';
 import SplitPane from 'react-split-pane';
@@ -140,14 +140,6 @@ class Layout extends React.Component {
     this.onDragEnd = this.onDragEnd.bind(this);
   }
 
-  componentDidMount() {
-    window.addEventListener('resize', this.onResize);
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('resize', this.onResize);
-  }
-
   onDragStart() {
     this.setState({ isDragging: true });
   }
@@ -157,18 +149,22 @@ class Layout extends React.Component {
   }
 
   onResize(pane, mode) {
+    let resizeTimeout;
+
     return size => {
-      this.layerSizes[pane][mode] = size;
-      saveSizes(this.layerSizes);
+      clearTimeout(resizeTimeout);
+      resizeTimeout = setTimeout(() => {
+        this.layerSizes[pane][mode] = size;
+        saveSizes(this.layerSizes);
 
-      const { clientWidth, clientHeight } = this.previewPanelRef;
-
-      this.setState({
-        previewPanelDimensions: {
-          width: clientWidth,
-          height: clientHeight,
-        },
-      });
+        const { clientWidth, clientHeight } = this.previewPanelRef;
+        this.setState({
+          previewPanelDimensions: {
+            width: clientWidth,
+            height: clientHeight,
+          },
+        });
+      }, 50);
     };
   }