From 9c0e305180f31bb2c6927cbc5df87ea67578cf05 Mon Sep 17 00:00:00 2001
From: stephenLYZ <750188453@qq.com>
Date: Wed, 20 Jul 2022 16:45:33 +0800
Subject: [PATCH 1/2] fix(plugin-chart-echarts): layout broken when resizing

---
 .../plugin-chart-echarts/src/components/Echart.tsx       | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/components/Echart.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/components/Echart.tsx
index 51ea5d5796923..1286c2bc144ca 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/components/Echart.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/components/Echart.tsx
@@ -92,11 +92,10 @@ function Echart(
     previousSelection.current = currentSelection;
   }, [currentSelection]);
 
-  useEffect(() => {
-    if (chartRef.current) {
-      chartRef.current.resize({ width, height });
-    }
-  }, [width, height]);
+  // Ensure that each render and resize is idempotent
+  if (chartRef.current) {
+    chartRef.current.resize({ width, height });
+  }
 
   return <Styles ref={divRef} height={height} width={width} />;
 }

From 046faf29bcf5f050ba1d8398b8983f095492c5bd Mon Sep 17 00:00:00 2001
From: stephenLYZ <750188453@qq.com>
Date: Wed, 20 Jul 2022 20:31:28 +0800
Subject: [PATCH 2/2] use useLayoutEffect

---
 .../src/components/Echart.tsx                 | 23 +++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/components/Echart.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/components/Echart.tsx
index 1286c2bc144ca..0ef7704311c21 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/components/Echart.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/components/Echart.tsx
@@ -22,6 +22,8 @@ import React, {
   useMemo,
   forwardRef,
   useImperativeHandle,
+  useLayoutEffect,
+  useCallback,
 } from 'react';
 import { styled } from '@superset-ui/core';
 import { ECharts, init } from 'echarts';
@@ -92,10 +94,23 @@ function Echart(
     previousSelection.current = currentSelection;
   }, [currentSelection]);
 
-  // Ensure that each render and resize is idempotent
-  if (chartRef.current) {
-    chartRef.current.resize({ width, height });
-  }
+  const handleSizeChange = useCallback(
+    ({ width, height }: { width: number; height: number }) => {
+      if (chartRef.current) {
+        chartRef.current.resize({ width, height });
+      }
+    },
+    [],
+  );
+
+  // did mount
+  useEffect(() => {
+    handleSizeChange({ width, height });
+  }, []);
+
+  useLayoutEffect(() => {
+    handleSizeChange({ width, height });
+  }, [width, height, handleSizeChange]);
 
   return <Styles ref={divRef} height={height} width={width} />;
 }