gitadmin/admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(Dashboard): tweak lazy and Suspense for Widget03

Browse Source
This commit is contained in:
xidedix 2018-11-20 23:08:14 +01:00
parent 05d0d7f1e8
commit c3249976cb
1 changed files with 9 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/views/Dashboard/Dashboard.js
View File

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