From ea1dbc23f63525d5538088e5a1182a8ccb5c2465 Mon Sep 17 00:00:00 2001
From: Marco Vettorello <vettorello.marco@gmail.com>
Date: Mon, 21 Oct 2019 15:12:13 +0200
Subject: [PATCH] fix: resize observer loop limit exception

In Kibana, we start getting error messages in TSVB describing that the ResizeObserver has reached
the loop limit when used togheter with react-beautiful-dnd library. This fix the issue in Kibana
updating the state on the next frame instead of the current one.

fix https://github.com/elastic/kibana/issues/48589
---
 src/components/chart_resizer.tsx | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/components/chart_resizer.tsx b/src/components/chart_resizer.tsx
index 7d9cc63671..fbf90322a0 100644
--- a/src/components/chart_resizer.tsx
+++ b/src/components/chart_resizer.tsx
@@ -11,25 +11,39 @@ class Resizer extends React.Component<ResizerProps> {
   private initialResizeComplete = false;
   private containerRef: RefObject<HTMLDivElement>;
   private ro: ResizeObserver;
+  private animationFrameID: number | null;
   private onResizeDebounced: (entries: ResizeObserverEntry[]) => void = () => {};
 
   constructor(props: ResizerProps) {
     super(props);
     this.containerRef = React.createRef();
     this.ro = new ResizeObserver(this.handleResize);
+    this.animationFrameID = null;
   }
 
   componentDidMount() {
     this.onResizeDebounced = debounce(this.onResize, this.props.chartStore!.resizeDebounce);
-    this.ro.observe(this.containerRef.current as Element);
+    if (this.containerRef.current) {
+      this.ro.observe(this.containerRef.current as Element);
+    }
   }
 
   componentWillUnmount() {
-    this.ro.unobserve(this.containerRef.current as Element);
+    if (this.animationFrameID) {
+      window.cancelAnimationFrame(this.animationFrameID);
+    }
+    this.ro.disconnect();
   }
 
   onResize = (entries: ResizeObserverEntry[]) => {
-    entries.forEach(({ contentRect: { width, height } }) => {
+    if (!Array.isArray(entries)) {
+      return;
+    }
+    if (!entries.length || !entries[0]) {
+      return;
+    }
+    const { width, height } = entries[0].contentRect;
+    this.animationFrameID = window.requestAnimationFrame(() => {
       this.props.chartStore!.updateParentDimensions(width, height, 0, 0);
     });
   };