perf: use requestAnimationFrame

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() {

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,
+      });
     });
   }
 

src/components/Charts/index.js

 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')));

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({