fix(charts): debounce recalculate size (#456)

SAP · Apr 24, 2020 · d35f861 · d35f861
1 parent 3d3bab2
commit d35f861
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 1 deletion.
diff --git a/packages/charts/package.json b/packages/charts/package.json
@@ -23,6 +23,7 @@
   "dependencies": {
     "chart.js": "^2.9.3",
     "chartjs-plugin-datalabels": "^0.7.0",
+    "lodash.debounce": "^4.0.8",
     "get-best-contrast-color": "^0.3.1",
     "lodash.merge": "^4.6.2",
     "react-chartjs-2": "^2.8.0",

diff --git a/packages/charts/src/hooks/useSizeMonitor.ts b/packages/charts/src/hooks/useSizeMonitor.ts
@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
+import debounce from 'lodash.debounce';
 
 export const useSizeMonitor = (props, container) => {
   const { height: heightProp, width: widthProp, minHeight, minWidth } = props;
@@ -39,7 +40,7 @@ export const useSizeMonitor = (props, container) => {
   useEffect(() => {
     if (enableSizeMonitor && container.current) {
       // @ts-ignore
-      observer.current = new ResizeObserver(recalculateSize);
+      observer.current = new ResizeObserver(debounce(recalculateSize, 500));
       observer.current.observe(container.current);
     }
     return () => {