1
- import React , { Component } from 'react' ;
1
+ import React , { Component , lazy , Suspense } from 'react' ;
2
2
import { Bar , Line } from 'react-chartjs-2' ;
3
3
import {
4
4
Badge ,
@@ -20,10 +20,13 @@ import {
20
20
Row ,
21
21
Table ,
22
22
} from 'reactstrap' ;
23
- import Widget03 from '../../views/Widgets/Widget03'
24
23
import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips' ;
25
24
import { getStyle , hexToRgba } from '@coreui/coreui/dist/js/coreui-utilities'
26
25
26
+ // import Widget03 from '../../views/Widgets/Widget03'
27
+ const Widget03 = lazy ( ( ) => import ( '../../views/Widgets/Widget03' ) ) ;
28
+ const Loading = ( ) => < div > Loading...</ div >
29
+
27
30
const brandPrimary = getStyle ( '--primary' )
28
31
const brandSuccess = getStyle ( '--success' )
29
32
const brandInfo = getStyle ( '--info' )
@@ -637,53 +640,33 @@ class Dashboard extends Component {
637
640
638
641
< Row >
639
642
< Col xs = "6" sm = "6" lg = "3" >
640
- < Widget03 dataBox = { ( ) => ( { variant : 'facebook' , friends : '89k' , feeds : '459' } ) } >
641
- < div className = "chart-wrapper" >
642
- < Line data = { makeSocialBoxData ( 0 ) } options = { socialChartOpts } height = { 90 } />
643
- </ div >
644
- </ Widget03 >
643
+ < Suspense fallback = { Loading ( ) } >
644
+ < Widget03 dataBox = { ( ) => ( { variant : 'facebook' , friends : '89k' , feeds : '459' } ) } >
645
+ < div className = "chart-wrapper" >
646
+ < Line data = { makeSocialBoxData ( 0 ) } options = { socialChartOpts } height = { 90 } />
647
+ </ div >
648
+ </ Widget03 >
649
+ </ Suspense >
645
650
</ Col >
646
651
647
652
< Col xs = "6" sm = "6" lg = "3" >
648
- < div className = "brand-card" >
649
- < div className = "brand-card-header bg-twitter" >
650
- < i className = "fa fa-twitter" > </ i >
653
+ < Suspense fallback = { Loading ( ) } >
654
+ < Widget03 dataBox = { ( ) => ( { variant : 'twitter' , followers : '973k' , tweets : '1.792' } ) } >
651
655
< div className = "chart-wrapper" >
652
656
< Line data = { makeSocialBoxData ( 1 ) } options = { socialChartOpts } height = { 90 } />
653
657
</ div >
654
- </ div >
655
- < div className = "brand-card-body" >
656
- < div >
657
- < div className = "text-value" > 973k</ div >
658
- < div className = "text-uppercase text-muted small" > followers</ div >
659
- </ div >
660
- < div >
661
- < div className = "text-value" > 1.792</ div >
662
- < div className = "text-uppercase text-muted small" > tweets</ div >
663
- </ div >
664
- </ div >
665
- </ div >
658
+ </ Widget03 >
659
+ </ Suspense >
666
660
</ Col >
667
661
668
662
< Col xs = "6" sm = "6" lg = "3" >
669
- < div className = "brand-card" >
670
- < div className = "brand-card-header bg-linkedin" >
671
- < i className = "fa fa-linkedin" > </ i >
663
+ < Suspense fallback = { Loading ( ) } >
664
+ < Widget03 dataBox = { ( ) => ( { variant : 'linkedin' , contacts : '500+' , feeds : '292' } ) } >
672
665
< div className = "chart-wrapper" >
673
666
< Line data = { makeSocialBoxData ( 2 ) } options = { socialChartOpts } height = { 90 } />
674
667
</ div >
675
- </ div >
676
- < div className = "brand-card-body" >
677
- < div >
678
- < div className = "text-value" > 500+</ div >
679
- < div className = "text-uppercase text-muted small" > contacts</ div >
680
- </ div >
681
- < div >
682
- < div className = "text-value" > 292</ div >
683
- < div className = "text-uppercase text-muted small" > feeds</ div >
684
- </ div >
685
- </ div >
686
- </ div >
668
+ </ Widget03 >
669
+ </ Suspense >
687
670
</ Col >
688
671
689
672
< Col xs = "6" sm = "6" lg = "3" >
0 commit comments