diff --git a/lib/ui/src/modules/ui/components/layout/index.js b/lib/ui/src/modules/ui/components/layout/index.js index e3e3864356f5..308920a30e81 100755 --- a/lib/ui/src/modules/ui/components/layout/index.js +++ b/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) { - return size => { - this.layerSizes[pane][mode] = size; - saveSizes(this.layerSizes); - - const { clientWidth, clientHeight } = this.previewPanelRef; + let resizeTimeout; - this.setState({ - previewPanelDimensions: { - width: clientWidth, - height: clientHeight, - }, - }); + return size => { + clearTimeout(resizeTimeout); + resizeTimeout = setTimeout(() => { + this.layerSizes[pane][mode] = size; + saveSizes(this.layerSizes); + + const { clientWidth, clientHeight } = this.previewPanelRef; + this.setState({ + previewPanelDimensions: { + width: clientWidth, + height: clientHeight, + }, + }); + }, 50); }; }