perf: use requestAnimationFrame

src/components/ActiveChart/index.js

@@ -33,7 +33,6 @@ export default class ActiveChart extends Component {
   }
 
   loopData = () => {
-    this.requestRef = requestAnimationFrame(() => {
     this.timer = setTimeout(() => {
       this.setState(
         {
@@ -43,8 +42,7 @@ export default class ActiveChart extends Component {
           this.loopData();
         }
       );
-      }, 1000);
-    });
+    }, 500);
   };
 
   render() {

src/components/Charts/AsyncLoadBizCharts.js

@@ -24,9 +24,11 @@ class AsyncLoadBizCharts extends React.Component {
 
   async componentDidMount() {
     await loadBizCharts();
+    requestAnimationFrame(() => {
       this.setState({
         loading: false,
       });
+    });
   }
 
   render() {

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