refactor(Dashboard): tweak lazy and Suspense for Widget03

Author: xidedix

src/views/Dashboard/Dashboard.js

@@ -23,9 +23,7 @@ import {
 import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips';
 import { getStyle, hexToRgba } from '@coreui/coreui/dist/js/coreui-utilities'
 
-// import Widget03 from '../../views/Widgets/Widget03'
 const Widget03 = lazy(() => import('../../views/Widgets/Widget03'));
-const Loading = () => <div>Loading...</div>
 
 const brandPrimary = getStyle('--primary')
 const brandSuccess = getStyle('--success')
@@ -479,6 +477,8 @@ class Dashboard extends Component {
     });
   }
 
+  loading = () => <div className="animated fadeIn pt-1 text-center">Loading...</div>
+
   render() {
 
     return (
@@ -640,7 +640,7 @@ class Dashboard extends Component {
 
         <Row>
           <Col xs="6" sm="6" lg="3">
-            <Suspense fallback={Loading()}>
+            <Suspense fallback={this.loading()}>
               <Widget03 dataBox={() => ({ variant: 'facebook', friends: '89k', feeds: '459' })} >
                 <div className="chart-wrapper">
                   <Line data={makeSocialBoxData(0)} options={socialChartOpts} height={90} />
@@ -650,7 +650,7 @@ class Dashboard extends Component {
           </Col>
 
           <Col xs="6" sm="6" lg="3">
-            <Suspense fallback={Loading()}>
+            <Suspense fallback={this.loading()}>
               <Widget03 dataBox={() => ({ variant: 'twitter', followers: '973k', tweets: '1.792' })} >
                 <div className="chart-wrapper">
                   <Line data={makeSocialBoxData(1)} options={socialChartOpts} height={90} />
@@ -660,7 +660,7 @@ class Dashboard extends Component {
           </Col>
 
           <Col xs="6" sm="6" lg="3">
-            <Suspense fallback={Loading()}>
+            <Suspense fallback={this.loading()}>
               <Widget03 dataBox={() => ({ variant: 'linkedin', contacts: '500+', feeds: '292' })} >
                 <div className="chart-wrapper">
                   <Line data={makeSocialBoxData(2)} options={socialChartOpts} height={90} />
@@ -670,24 +670,13 @@ class Dashboard extends Component {
           </Col>
 
           <Col xs="6" sm="6" lg="3">
-            <div className="brand-card">
-              <div className="brand-card-header bg-google-plus">
-                <i className="fa fa-google-plus"></i>
+            <Suspense fallback={this.loading()}>
+              <Widget03 dataBox={() => ({ variant: 'google-plus', followers: '894', circles: '92' })} >
                 <div className="chart-wrapper">
                   <Line data={makeSocialBoxData(3)} options={socialChartOpts} height={90} />
                 </div>
-              </div>
-              <div className="brand-card-body">
-                <div>
-                  <div className="text-value">894</div>
-                  <div className="text-uppercase text-muted small">followers</div>
-                </div>
-                <div>
-                  <div className="text-value">92</div>
-                  <div className="text-uppercase text-muted small">circles</div>
-                </div>
-              </div>
-            </div>
+              </Widget03>
+            </Suspense>
           </Col>
         </Row>