From e1290d8e167f82c18abecbbf999c8adb5e75bd61 Mon Sep 17 00:00:00 2001
From: Shuai Chen <wasd2144@hotmail.com>
Date: Mon, 18 Feb 2019 19:55:24 +0800
Subject: [PATCH] perf: use requestAnimationFrame

---
 src/components/ActiveChart/index.js         | 22 ++++++++++-----------
 src/components/Charts/AsyncLoadBizCharts.js |  6 ++++--
 src/components/Charts/index.js              |  4 ++--
 src/pages/Dashboard/Analysis.js             |  1 -
 4 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/src/components/ActiveChart/index.js b/src/components/ActiveChart/index.js
index c14c061e..a7bf0bfc 100644
--- a/src/components/ActiveChart/index.js
+++ b/src/components/ActiveChart/index.js
@@ -33,18 +33,16 @@ export default class ActiveChart extends Component {
   }
 
   loopData = () => {
-    this.requestRef = requestAnimationFrame(() => {
-      this.timer = setTimeout(() => {
-        this.setState(
-          {
-            activeData: getActiveData(),
-          },
-          () => {
-            this.loopData();
-          }
-        );
-      }, 1000);
-    });
+    this.timer = setTimeout(() => {
+      this.setState(
+        {
+          activeData: getActiveData(),
+        },
+        () => {
+          this.loopData();
+        }
+      );
+    }, 500);
   };
 
   render() {
diff --git a/src/components/Charts/AsyncLoadBizCharts.js b/src/components/Charts/AsyncLoadBizCharts.js
index 274bea56..8d9a2cd0 100644
--- a/src/components/Charts/AsyncLoadBizCharts.js
+++ b/src/components/Charts/AsyncLoadBizCharts.js
@@ -24,8 +24,10 @@ class AsyncLoadBizCharts extends React.Component {
 
   async componentDidMount() {
     await loadBizCharts();
-    this.setState({
-      loading: false,
+    requestAnimationFrame(() => {
+      this.setState({
+        loading: false,
+      });
     });
   }
 
diff --git a/src/components/Charts/index.js b/src/components/Charts/index.js
index 081663b3..56a1c565 100644
--- a/src/components/Charts/index.js
+++ b/src/components/Charts/index.js
@@ -1,11 +1,12 @@
 import React, { Suspense } from 'react';
 import numeral from 'numeral';
 import ChartCard from './ChartCard';
+import Field from './Field';
 
 const getComponent = Component => {
   return props => {
     return (
-      <Suspense fallback={null}>
+      <Suspense fallback="...">
         <Component {...props} />
       </Suspense>
     );
@@ -19,7 +20,6 @@ const Gauge = getComponent(React.lazy(() => import('./Gauge')));
 const MiniArea = getComponent(React.lazy(() => import('./MiniArea')));
 const MiniBar = getComponent(React.lazy(() => import('./MiniBar')));
 const MiniProgress = getComponent(React.lazy(() => import('./MiniProgress')));
-const Field = getComponent(React.lazy(() => import('./Field')));
 const WaterWave = getComponent(React.lazy(() => import('./WaterWave')));
 const TagCloud = getComponent(React.lazy(() => import('./TagCloud')));
 const TimelineChart = getComponent(React.lazy(() => import('./TimelineChart')));
diff --git a/src/pages/Dashboard/Analysis.js b/src/pages/Dashboard/Analysis.js
index 11fa66ad..cceab9bd 100644
--- a/src/pages/Dashboard/Analysis.js
+++ b/src/pages/Dashboard/Analysis.js
@@ -25,7 +25,6 @@ class Analysis extends Component {
   };
 
   componentDidMount() {
-    console.log('run');
     const { dispatch } = this.props;
     this.reqRef = requestAnimationFrame(() => {
       dispatch({
-- 
GitLab