fix(chart_resizer): debounce resize only after initial render (#229)

Fix chart resize debounce to not wait 200ms for initial render

fixes issue #109

package.json

@@ -129,7 +129,8 @@
     "react-dom": "^16.8.3",
     "react-konva": "16.8.3",
     "react-spring": "^8.0.8",
-    "resize-observer-polyfill": "^1.5.1"
+    "resize-observer-polyfill": "^1.5.1",
+    "ts-debounce": "^1.0.0"
   },
   "peerDependencies": {
     "@elastic/datemath": "^5.0.2",

src/components/chart_resizer.tsx

@@ -1,20 +1,23 @@
-import debounce from 'lodash/debounce';
 import { inject, observer } from 'mobx-react';
 import React, { RefObject } from 'react';
 import ResizeObserver from 'resize-observer-polyfill';
+import { debounce } from 'ts-debounce';
 import { ChartStore } from '../state/chart_state';
 
 interface ResizerProps {
   chartStore?: ChartStore;
 }
 class Resizer extends React.Component<ResizerProps> {
+  private initialResizeComplete = false;
   private containerRef: RefObject<HTMLDivElement>;
   private ro: ResizeObserver;
+  private onResizeDebounced: (entries: ResizeObserverEntry[]) => void;
 
   constructor(props: ResizerProps) {
     super(props);
     this.containerRef = React.createRef();
-    this.ro = new ResizeObserver(debounce(this.onResize, 200));
+    this.onResizeDebounced = debounce(this.onResize, 200);
+    this.ro = new ResizeObserver(this.handleResize);
   }
 
   componentDidMount() {
@@ -47,6 +50,15 @@ class Resizer extends React.Component<ResizerProps> {
       />
     );
   }
+
+  private handleResize = (entries: ResizeObserverEntry[]) => {
+    if (this.initialResizeComplete) {
+      this.onResizeDebounced(entries);
+    } else {
+      this.initialResizeComplete = true;
+      this.onResize(entries);
+    }
+  }
 }
 
 export const ChartResizer = inject('chartStore')(observer(Resizer));

yarn.lock

@@ -13217,6 +13217,11 @@ trough@^1.0.0:
   dependencies:
     glob "^7.1.2"
 
+ts-debounce@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/ts-debounce/-/ts-debounce-1.0.0.tgz#e433301744ba75fe25466f7f23e1382c646aae6a"
+  integrity sha512-V+IzWj418IoqqxVJD6I0zjPtgIyvAJ8VyViqzcxZ0JRiJXsi5mCmy1yUKkWd2gUygT28a8JsVFCgqdrf2pLUHQ==
+
 ts-jest@^24.0.0:
   version "24.0.2"
   resolved "https://registry.yarnpkg.com/ts-jest/-/ts-jest-24.0.2.tgz#8dde6cece97c31c03e80e474c749753ffd27194d"