From 4748dda3c9063482ae4c4bab6997440c475a10cd Mon Sep 17 00:00:00 2001
From: Mo Beigi <me@mobeigi.com>
Date: Thu, 28 Oct 2021 13:28:51 +1100
Subject: [PATCH] Fix animations being cancelled by initial render resize
 (#458)

This change fixes the issue where echarts animations are cancelled because there is a resize() call that occurs directly after the initial render.
---
 src/core.tsx | 41 ++++++++++++++++++++++++++++++-----------
 1 file changed, 30 insertions(+), 11 deletions(-)

diff --git a/src/core.tsx b/src/core.tsx
index b7082a3..209d441 100644
--- a/src/core.tsx
+++ b/src/core.tsx
@@ -15,6 +15,11 @@ export default class EChartsReactCore extends PureComponent<EChartsReactProps> {
    */
   public ele: HTMLElement;
 
+  /**
+   * if this is the first time we are resizing
+   */
+  private isInitialResize: boolean;
+
   /**
    * echarts library entry
    */
@@ -25,6 +30,7 @@ export default class EChartsReactCore extends PureComponent<EChartsReactProps> {
 
     this.echarts = props.echarts;
     this.ele = null;
+    this.isInitialResize = true;
   }
 
   componentDidMount() {
@@ -63,16 +69,12 @@ export default class EChartsReactCore extends PureComponent<EChartsReactProps> {
       return;
     }
 
-    const echartsInstance = this.updateEChartsOption();
+    this.updateEChartsOption();
     /**
      * when style or class name updated, change size.
      */
     if (!isEqual(prevProps.style, this.props.style) || !isEqual(prevProps.className, this.props.className)) {
-      try {
-        echartsInstance.resize();
-      } catch (e) {
-        console.warn(e);
-      }
+      this.resize();
     }
   }
 
@@ -122,11 +124,7 @@ export default class EChartsReactCore extends PureComponent<EChartsReactProps> {
     // 4. on resize
     if (this.ele) {
       bind(this.ele, () => {
-        try {
-          echartsInstance.resize();
-        } catch (e) {
-          console.warn(e);
-        }
+        this.resize();
       });
     }
   }
@@ -167,6 +165,27 @@ export default class EChartsReactCore extends PureComponent<EChartsReactProps> {
     return echartInstance;
   }
 
+  /**
+   * resize wrapper
+   */
+  private resize() {
+    // 1. get the echarts object
+    const echartsInstance = this.getEchartsInstance();
+
+    // 2. call echarts instance resize if not the initial resize
+    // resize should not happen on first render as it will cancel initial echarts animations
+    if (!this.isInitialResize) {
+      try {
+        echartsInstance.resize();
+      } catch (e) {
+        console.warn(e);
+      }
+    }
+
+    // 3. update variable for future calls
+    this.isInitialResize = false;
+  }
+
   render(): JSX.Element {
     const { style, className = '' } = this.props;
     // default height = 300