Loadable封装

src/components/admin/userGroupManagement.jsx

@@ -6,19 +6,10 @@ import { Layout, Input, Table, Button, Icon, Menu } from 'antd';
 import { connect } from 'dva';
 import './userGroupManagement.less';
 import DetailBox from './userGroupDetailBox';
-// import AddMemberBox from '../common/selectUserBox/selectUserBox';
-// import DeleteBox from '../common/deleteBox/deleteBox';
-import Loadable from 'react-loadable';
-import SkeletonModal from 'components/common/skeletonModal'
+import Loadable from 'utils/loadable';
 
-const AddMemberBox = Loadable({
-    loader: () => import('components/common/selectUserBox/selectUserBox'),
-    loading: () => <SkeletonModal />
-});
-const DeleteBox = Loadable({
-    loader: () => import('components/common/deleteBox/deleteBox'),
-    loading: () => <SkeletonModal />
-});
+const AddMemberBox = Loadable(() => import('components/common/selectUserBox/selectUserBox'), true);
+const DeleteBox = Loadable(() => import('components/common/deleteBox/deleteBox'), true);
 
 const { Sider, Content } = Layout;
 const { Search } = Input;

src/components/chart/distributeBox.jsx

@@ -1,26 +1,16 @@
 import React from 'react';
 import { Modal, Layout, Card, Table, Col, Row, Button, Input, Icon, Tag, Checkbox } from 'antd';
 import { connect } from 'dva';
-// import FilterBox from '../common/filterBox/filterBox';
-// import AccessObjectBox from '../common/accessObjectBox/accessObjectBox';
 import moment from 'moment';
 import './distributeBox.less';
-import Loadable from 'react-loadable';
-import SkeletonModal from 'components/common/skeletonModal';
+import Loadable from 'utils/loadable';
 
-const FilterBox = Loadable({
-    loader: () => import('components/common/filterBox/filterBox'),
-    loading: () => <SkeletonModal />
-});
-const AccessObjectBox = Loadable({
-    loader: () => import('components/common/accessObjectBox/accessObjectBox'),
-    loading: () => <SkeletonModal />
-});
-const { Content } = Layout
+const FilterBox = Loadable(() => import('components/common/filterBox/filterBox'), true);
+const AccessObjectBox = Loadable(() => import('components/common/accessObjectBox/accessObjectBox'), true);
 
+const { Content } = Layout
 const Search = Input.Search;
 
-
 class DistributeBox extends React.Component {
     constructor(props){
         super(props);

src/components/chart/list.jsx

@@ -11,26 +11,18 @@ import 'ant-design-pro/dist/ant-design-pro.css';
 import GroupSelector from '../common/groupSelector/popover';
 import ChartCard from './chartCard';
 import DistributeBox from './distributeBox';
-// import TransferBox from '../common/selectUserBox/selectUserBox';
-// import DeleteBox from '../common/deleteBox/deleteBox';
 import { arrayToTree } from '../../utils/baseUtils';
 import ListFilter from '../common/listFilter/index';
 import Loading from '../common/loading/index';
 import CusIcon from '../common/cusIcon/index';
 import './list.less';
-import Loadable from 'react-loadable';
-import SkeletonModal from 'components/common/skeletonModal';
+import Loadable from 'utils/loadable';
 
-const TransferBox = Loadable({
-    loader: () => import('components/common/selectUserBox/selectUserBox'),
-    loading: () => <SkeletonModal />
-});
-const DeleteBox = Loadable({
-    loader: () => import('components/common/deleteBox/deleteBox'),
-    loading: () => <SkeletonModal />
-});
+const TransferBox = Loadable(() => import('components/common/selectUserBox/selectUserBox'), true);
+const DeleteBox = Loadable(() => import('components/common/deleteBox/deleteBox'), true);
+
+const { Content } = Layout;
 
-const { Content } = Layout
 const reg = new RegExp('([+ \\- & | ! ( ) { } \\[ \\] ^ \" ~ * ? : ( ) \/])', 'g'); // 需要转义的字符
 
 class ChartList extends React.Component {

src/components/chartDesigner/content.jsx

@@ -10,10 +10,6 @@ import ScatterConfigForm from './sections/scatterConfigForm';
 import IndicatorConfigForm from './sections/indicatorConfigForm';
 import StyleConfigForm from './sections/style/index';
 import OtherConfigForm from './sections/otherConfigForm';
-// import TableView from './charts/tableView';
-// import EchartsView from './charts/echartsView';
-// import AggregateTableView from './charts/aggregateTableView';
-// import IndicatorView from './charts/indicatorView';
 import ToolBar from './sections/toolbar';
 import { connect } from 'dva';
 import EmptyContent from '../common/emptyContent/index';
@@ -21,25 +17,12 @@ import Thumbnail from '../common/echarts/thumbnail';
 import { hashcode } from '../../utils/baseUtils';
 import themes from './sections/style/theme/index';
 import './content.less';
-import Loadable from 'react-loadable';
-import Skeleton from 'components/common/skeleton';
+import Loadable from 'utils/loadable';
 
-const AggregateTableView = Loadable({
-    loader: () => import('components/chartDesigner/charts/aggregateTableView'),
-    loading: () => <Skeleton />
-});
-const TableView = Loadable({
-    loader: () => import('components/chartDesigner/charts/tableView'),
-    loading: () => <Skeleton />
-});
-const EchartsView = Loadable({
-    loader: () => import('components/chartDesigner/charts/echartsView'),
-    loading: () => <Skeleton />
-});
-const IndicatorView = Loadable({
-    loader: () => import('components/chartDesigner/charts/indicatorView'),
-    loading: () => <Skeleton />
-});
+const AggregateTableView = Loadable(() => import('components/chartDesigner/charts/aggregateTableView'));
+const TableView = Loadable(() => import('components/chartDesigner/charts/tableView'));
+const EchartsView = Loadable(() => import('components/chartDesigner/charts/echartsView'));
+const IndicatorView = Loadable(() => import('components/chartDesigner/charts/indicatorView'));
 
 const { Header, Sider, Content, Footer } = Layout
 const { TabPane } = Tabs

src/components/chartDesigner/header.jsx

@@ -1,16 +1,12 @@
 import React from 'react';
 import { Input, Icon, Button, Popconfirm, Tooltip, Modal, Form } from 'antd';
 import { connect } from 'dva';
-// import DeleteBox from '../common/deleteBox/deleteBox';
 import './header.less';
-import Loadable from 'react-loadable';
-import SkeletonModal from 'components/common/skeletonModal';
+import Loadable from 'utils/loadable';
 
-const DeleteBox = Loadable({
-    loader: () => import('components/common/deleteBox/deleteBox'),
-    loading: () => <SkeletonModal />
-});
-const FormItem = Form.Item
+const DeleteBox = Loadable(() => import('components/common/deleteBox/deleteBox'), true);
+
+const FormItem = Form.Item;
 
 class Header extends React.Component {
     constructor(props) {

src/components/chartDesigner/sections/toolbar.jsx

@@ -1,20 +1,15 @@
 import React from 'react';
 import { Tag, Icon, message } from 'antd';
-// import FilterBox from '../../common/filterBox/filterBox';
 import { connect } from 'dva';
 import moment from 'moment';
-import Filter from '../../common/filterBox/filter';
 import CusIcon from '../../common/cusIcon/index';
 import ChartDataPreview from './chartDataPreview';
 import { isEqual } from '../../../utils/baseUtils.js';
 import './toolbar.less';
-import Loadable from 'react-loadable';
-import SkeletonModal from 'components/common/skeletonModal';
+import Loadable from 'utils/loadable';
 
-const FilterBox = Loadable({
-    loader: () => import('components/common/filterBox/filterBox'),
-    loading: () => <SkeletonModal />
-});
+const Filter = Loadable(() => import('components/common/filterBox/filter'));
+const FilterBox = Loadable(() => import('components/common/filterBox/filterBox'), true);
 
 class Toolbar extends React.Component {
     constructor(props) {

src/components/common/groupManageMentBox/box.jsx

@@ -1,17 +1,13 @@
 import React from 'react';
 import { Modal, Tree, Form, Input, Icon, Row, Col, Button } from 'antd';
-// import DeleteBox from '../deleteBox/deleteBox';
 import { arrayToTree, hashcode } from '../../../utils/baseUtils';
 import './box.less';
-import Loadable from 'react-loadable';
-import SkeletonModal from 'components/common/skeletonModal';
+import Loadable from 'utils/loadable';
+
+const DeleteBox = Loadable(() => import('components/common/deleteBox/deleteBox'), true);
 
-const DeleteBox = Loadable({
-    loader: () => import('components/common/deleteBox/deleteBox'),
-    loading: () => <SkeletonModal />
-});
 const { TreeNode } = Tree;
-const Search = Input.Search
+const Search = Input.Search;
 
 class GroupBox extends React.Component {
     constructor(props) {

src/components/dashboard/list.jsx

@@ -1,31 +1,18 @@
 import React from 'react'
 import { Layout, Button, Icon, Table, Menu, Dropdown, Card, Col, Row, Select } from 'antd'
 import { connect } from 'dva'
-// import TransferBox from '../common/selectUserBox/selectUserBox';
-// import AccessObjectBox from '../common/accessObjectBox/accessObjectBox'
 import { dateFormat } from '../../utils/baseUtils'
-// import DeleteBox from '../common/deleteBox/deleteBox'
 import ShareBox from './shareBox'
 import CopyBox from './copyBox'
 import ListFilter from '../common/listFilter/index'
 import Loading from '../common/loading/index'
 import CusIcon from '../common/cusIcon/index'
 import './list.less';
-import Loadable from 'react-loadable';
-import SkeletonModal from 'components/common/skeletonModal';
+import Loadable from 'utils/loadable';
 
-const DeleteBox = Loadable({
-    loader: () => import('components/common/deleteBox/deleteBox'),
-    loading: () => <SkeletonModal />
-});
-const TransferBox = Loadable({
-    loader: () => import('components/common/selectUserBox/selectUserBox'),
-    loading: () => <SkeletonModal />
-});
-const AccessObjectBox = Loadable({
-    loader: () => import('components/common/accessObjectBox/accessObjectBox'),
-    loading: () => <SkeletonModal />
-});
+const DeleteBox = Loadable(() => import('components/common/deleteBox/deleteBox'), true);
+const TransferBox = Loadable(() => import('components/common/selectUserBox/selectUserBox'), true);
+const AccessObjectBox = Loadable(() => import('components/common/accessObjectBox/accessObjectBox'), true);
 
 const { Content } = Layout
 const { Option } = Select

src/components/dashboard/menu.jsx

@@ -1,16 +1,11 @@
 import React from 'react';
 import { connect } from 'dva';
 import { Tree, Input, Button, Icon } from 'antd';
-// import DeleteBox from '../common/deleteBox/deleteBox';
 import CusIcon from '../common/cusIcon/index';
 import './menu.less';
-import Loadable from 'react-loadable';
-import SkeletonModal from 'components/common/skeletonModal';
+import Loadable from 'utils/loadable';
 
-const DeleteBox = Loadable({
-    loader: () => import('components/common/deleteBox/deleteBox'),
-    loading: () => <SkeletonModal />
-});
+const DeleteBox = Loadable(() => import('components/common/deleteBox/deleteBox'), true);
 
 const { TreeNode } = Tree
 const { Search } = Input

src/components/dashboard/shareKeyView.jsx

@@ -1,13 +1,8 @@
 import React from 'react';
 import { connect } from 'dva';
-// import DashboardDesigner from '../dashboardDesigner/layout';
-import Loadable from 'react-loadable';
-import Skeleton from 'components/common/skeleton';
+import Loadable from 'utils/loadable';
 
-const DashboardDesigner = Loadable({
-    loader: () => import('../dashboardDesigner/layout'),
-    loading: () => <Skeleton />
-});
+const DashboardDesigner = Loadable(() => import('../dashboardDesigner/layout'));
 
 class DashboardView extends React.Component {
     render() {

src/components/dashboard/shareView.jsx

@@ -1,13 +1,8 @@
 import React from 'react';
 import { connect } from 'dva';
-// import DashboardDesigner from '../dashboardDesigner/layout';
-import Loadable from 'react-loadable';
-import Skeleton from 'components/common/skeleton';
+import Loadable from 'utils/loadable';
 
-const DashboardDesigner = Loadable({
-    loader: () => import('../dashboardDesigner/layout'),
-    loading: () => <Skeleton />
-});
+const DashboardDesigner = Loadable(() => import('../dashboardDesigner/layout'));
 
 class DashboardView extends React.Component {
     render() {

src/components/dashboard/view.jsx

@@ -1,13 +1,8 @@
 import React from 'react';
 import { connect } from 'dva';
-// import DashboardDesigner from '../dashboardDesigner/layout';
-import Loadable from 'react-loadable';
-import Skeleton from 'components/common/skeleton';
+import Loadable from 'utils/loadable';
 
-const DashboardDesigner = Loadable({
-    loader: () => import('../dashboardDesigner/layout'),
-    loading: () => <Skeleton />
-});
+const DashboardDesigner = Loadable(() => import('../dashboardDesigner/layout'));
 
 class DashboardView extends React.Component {
     render() {

src/components/dashboardDesigner/chartView.jsx

@@ -1,36 +1,15 @@
 import React from 'react';
-// import AggregateTableView from '../chartDesigner/charts/aggregateTableView';
-// import TableView from '../chartDesigner/charts/tableView';
-// import EchartsView from '../chartDesigner/charts/echartsView';
-// import IndicatorView from '../chartDesigner/charts/indicatorView';
-// import RichTextEditor from './richTextEditor';
 import { connect } from 'dva';
 import { hashcode } from '../../utils/baseUtils';
 import EmptyContent from '../common/emptyContent/index';
 import Loading from '../common/loading/index';
-import Loadable from 'react-loadable';
-import Skeleton from 'components/common/skeleton';
+import Loadable from 'utils/loadable';
 
-const AggregateTableView = Loadable({
-    loader: () => import('components/chartDesigner/charts/aggregateTableView'),
-    loading: () => <Skeleton />
-});
-const TableView = Loadable({
-    loader: () => import('components/chartDesigner/charts/tableView'),
-    loading: () => <Skeleton />
-});
-const EchartsView = Loadable({
-    loader: () => import('components/chartDesigner/charts/echartsView'),
-    loading: () => <Skeleton />
-});
-const IndicatorView = Loadable({
-    loader: () => import('components/chartDesigner/charts/indicatorView'),
-    loading: () => <Skeleton />
-});
-const RichTextEditor = Loadable({
-    loader: () => import('./richTextEditor'),
-    loading: () => <Skeleton />
-});
+const AggregateTableView = Loadable(() => import('components/chartDesigner/charts/aggregateTableView'));
+const TableView = Loadable(() => import('components/chartDesigner/charts/tableView'));
+const EchartsView = Loadable(() => import('components/chartDesigner/charts/echartsView'));
+const IndicatorView = Loadable(() => import('components/chartDesigner/charts/indicatorView'));
+const RichTextEditor = Loadable(() => import('./richTextEditor'));
 
 class ChartView extends React.Component {
     

src/components/dashboardDesigner/filterBar.jsx

@@ -1,16 +1,11 @@
 import React from 'react';
 import { connect } from 'dva';
 import { Tag, Icon } from 'antd';
-// import FilterBox from '../common/filterBox/filterBox2';
 import Filter from '../common/filterBox/filter2';
-import MobileFilterList from './mobileFilterList';
-import Loadable from 'react-loadable';
-import SkeletonModal from 'components/common/skeletonModal';
-
-const FilterBox = Loadable({
-    loader: () => import('components/common/filterBox/filterBox2'),
-    loading: () => <SkeletonModal />
-});
+import Loadable from 'utils/loadable';
+
+const FilterBox = Loadable(() => import('components/common/filterBox/filterBox2'), true);
+const MobileFilterList = Loadable(() => import('./mobileFilterList'));
 
 class FilterBar extends React.Component {
 

src/components/dashboardDesigner/header.jsx

@@ -1,16 +1,12 @@
 import React from 'react';
 import { Input, Icon, Button, Popconfirm, Switch, Form } from 'antd';
 import { connect } from 'dva';
-// import DeleteBox from '../common/deleteBox/deleteBox';
 import './header.less';
-import Loadable from 'react-loadable';
-import SkeletonModal from 'components/common/skeletonModal';
+import Loadable from 'utils/loadable';
 
-const DeleteBox = Loadable({
-    loader: () => import('components/common/deleteBox/deleteBox'),
-    loading: () => <SkeletonModal />
-});
-const FormItem = Form.Item
+const DeleteBox = Loadable(() => import('components/common/deleteBox/deleteBox'), true);
+
+const FormItem = Form.Item;
 
 class Header extends React.Component {
     constructor(props) {

src/components/dataConnect/list.jsx

@@ -1,28 +1,19 @@
-import React from 'react'
-import { Layout, Row, Col, Button, Icon, Card, Select, Menu, Dropdown } from 'antd'
-import { connect } from 'dva'
-// import DeleteBox from '../common/deleteBox/deleteBox'
-import EmptyContent from '../common/emptyContent/index'
-// import DataConnectBox from '../dataSourceDetail/dataConnectBox'
-import ListFilter from '../common/listFilter/index'
-import Loading from '../common/loading/index'
+import React from 'react';
+import { Layout, Row, Col, Button, Icon, Card, Select, Menu, Dropdown } from 'antd';
+import { connect } from 'dva';
+import EmptyContent from '../common/emptyContent/index';
+import ListFilter from '../common/listFilter/index';
+import Loading from '../common/loading/index';
 import './list.less';
 import CusIcon from '../common/cusIcon';
-import Loadable from 'react-loadable';
-import SkeletonModal from 'components/common/skeletonModal';
+import Loadable from 'utils/loadable';
 
-const DeleteBox = Loadable({
-    loader: () => import('components/common/deleteBox/deleteBox'),
-    loading: () => <SkeletonModal />
-});
-const DataConnectBox = Loadable({
-    loader: () => import('../dataSourceDetail/dataConnectBox'),
-    loading: () => <SkeletonModal />
-});
+const DeleteBox = Loadable(() => import('components/common/deleteBox/deleteBox'), true);
+const DataConnectBox = Loadable(() => import('../dataSourceDetail/dataConnectBox'), true);
 
-const CardGrid = Card.Grid
-const { Content } = Layout
-const { Option } = Select
+const CardGrid = Card.Grid;
+const { Content } = Layout;
+const { Option } = Select;
 
 class DataConnect extends React.Component {
     constructor(props) {

src/components/dataSource/list.jsx

@@ -4,27 +4,19 @@ import { connect } from 'dva';
 import { arrayToTree, dateFormat } from '../../utils/baseUtils';
 import GroupManagementBox from '../common/groupManageMentBox/box';
 import GroupSelector from '../common/groupSelector/popover';
-// import TransferBox from '../common/selectUserBox/selectUserBox';
 import CopyBox from './copyBox'
-// import DeleteBox from '../common/deleteBox/deleteBox';
 import DataPreview from '../common/dataPreview/dataPreview';
 import ListFilter from '../common/listFilter/index';
 import EllipsisTooltip from '../common/ellipsisTooltip/index';
 import Loading from '../common/loading/index';
 import CusIcon from '../common/cusIcon';
 import './list.less';
-import Loadable from 'react-loadable';
-import SkeletonModal from 'components/common/skeletonModal';
+import Loadable from 'utils/loadable';
 
-const DeleteBox = Loadable({
-    loader: () => import('components/common/deleteBox/deleteBox'),
-    loading: () => <SkeletonModal />
-});
-const TransferBox = Loadable({
-    loader: () => import('components/common/selectUserBox/selectUserBox'),
-    loading: () => <SkeletonModal />
-});
-const { Content } = Layout
+const DeleteBox = Loadable(() => import('components/common/deleteBox/deleteBox'), true);
+const TransferBox = Loadable(() => import('components/common/selectUserBox/selectUserBox'), true);
+
+const { Content } = Layout;
 
 class DataSource extends React.Component {
     constructor(props) {

src/components/dataSourceDetail/accessConfig.jsx

@@ -1,29 +1,15 @@
-import React from 'react'
-import { connect } from 'dva'
-import { Layout, Card, Row, Col, Table, Input, Checkbox, Button, Icon, Tag } from 'antd'
-// import FilterBox from '../common/filterBox/filterBox'
-// import AccessObjectBox from '../common/accessObjectBox/accessObjectBox'
-// import DeleteBox from '../common/deleteBox/deleteBox'
-import moment from 'moment'
+import React from 'react';
+import { connect } from 'dva';
+import { Layout, Card, Row, Col, Table, Input, Checkbox, Button, Icon, Tag } from 'antd';
+import moment from 'moment';
 import './accessConfig.less';
-import Loadable from 'react-loadable';
-import SkeletonModal from 'components/common/skeletonModal';
+import Loadable from 'utils/loadable';
 
-const FilterBox = Loadable({
-    loader: () => import('components/common/filterBox/filterBox'),
-    loading: () => <SkeletonModal />
-});
-const AccessObjectBox = Loadable({
-    loader: () => import('components/common/accessObjectBox/accessObjectBox'),
-    loading: () => <SkeletonModal />
-});
-const DeleteBox = Loadable({
-    loader: () => import('components/common/deleteBox/deleteBox'),
-    loading: () => <SkeletonModal />
-});
-
-const { Content } = Layout
+const FilterBox = Loadable(() => import('components/common/filterBox/filterBox'), true);
+const AccessObjectBox = Loadable(() => import('components/common/accessObjectBox/accessObjectBox'), true);
+const DeleteBox = Loadable(() => import('components/common/deleteBox/deleteBox'), true);
 
+const { Content } = Layout;
 const Search = Input.Search;
 
 class DataSourceAccessConfig extends React.Component{

src/components/dataSourceDetail/dataConnectConfig.jsx

@@ -4,21 +4,16 @@
 import React from 'react';
 import { Layout, Form, Row, Col, Input, Icon, Menu, Dropdown, Divider, Upload, message, Card } from 'antd';
 import { connect } from 'dva';
-// import DataConnectBox from './dataConnectBox';
 import EmptyContent from '../common/emptyContent/index';
 import './dataConnectConfig.less';
-import Loadable from 'react-loadable';
-import SkeletonModal from 'components/common/skeletonModal';
+import Loadable from 'utils/loadable';
 
-const DataConnectBox = Loadable({
-    loader: () => import('./dataConnectBox'),
-    loading: () => <SkeletonModal />
-});
+const DataConnectBox = Loadable(() => import('./dataConnectBox'), true);
 
-const { Content } = Layout
-const CardGrid = Card.Grid
-const UploadDragger = Upload.Dragger
-const Search = Input.Search
+const { Content } = Layout;
+const CardGrid = Card.Grid;
+const UploadDragger = Upload.Dragger;
+const Search = Input.Search;
 
 class DataConnectConfig extends React.Component {
 

src/components/homePage/toolbar.jsx

@@ -1,16 +1,11 @@
 import React from 'react';
 import { Icon, Modal } from 'antd';
 import { connect } from 'dva';
-// import DashboardDesigner from '../dashboardDesigner/layout';
 import CusIcon from '../common/cusIcon/index';
 import './toolbar.less';
-import Loadable from 'react-loadable';
-import Skeleton from 'components/common/skeleton';
+import Loadable from 'utils/loadable';
 
-const DashboardDesigner = Loadable({
-    loader: () => import('../dashboardDesigner/layout'),
-    loading: () => <Skeleton />
-});
+const DashboardDesigner = Loadable(() => import('../dashboardDesigner/layout'));
 
 class Toolbar extends React.Component {
     constructor(props) {

src/components/homePage/view.jsx

@@ -1,13 +1,8 @@
 import React from 'react';
 import { connect } from 'dva';
-// import DashboardDesigner from '../dashboardDesigner/layout';
-import Loadable from 'react-loadable';
-import Skeleton from 'components/common/skeleton';
+import Loadable from 'utils/loadable';
 
-const DashboardDesigner = Loadable({
-    loader: () => import('../dashboardDesigner/layout'),
-    loading: () => <Skeleton />
-});
+const DashboardDesigner = Loadable(() => import('../dashboardDesigner/layout'));
 
 class DashboardView extends React.Component {
     afterLoad = (data) => {

src/components/workshop/index.jsx

@@ -3,36 +3,15 @@ import { Link } from 'react-router-dom';
 import { Route, Switch, Redirect } from 'dva/router';
 import { Layout, Button } from 'antd';
 import { connect } from 'dva';
-// import DataConnect from '../dataConnect/list';
-// import DataSource from '../dataSource/list';
-// import Dashboard from '../dashboard/layout';
-// import Chart from '../chart/list';
-// import DataSourceDetail from '../dataSourceDetail/layout';
 import CusIcon from '../common/cusIcon/index';
 import './index.less';
-import Loadable from 'react-loadable';
-import Skeleton from 'components/common/skeleton';
+import Loadable from 'utils/loadable';
 
-const DataConnect = Loadable({
-    loader: () => import('components/dataConnect/list'),
-    loading: () => <Skeleton />
-});
-const DataSource = Loadable({
-    loader: () => import('components/dataSource/list'),
-    loading: () => <Skeleton />
-});
-const Dashboard = Loadable({
-    loader: () => import('components/dashboard/layout'),
-    loading: () => <Skeleton />
-});
-const Chart = Loadable({
-    loader: () => import('components/chart/list'),
-    loading: () => <Skeleton />
-});
-const DataSourceDetail = Loadable({
-    loader: () => import('components/dataSourceDetail/layout'),
-    loading: () => <Skeleton />
-});
+const DataConnect = Loadable(() => import('components/dataConnect/list'));
+const DataSource = Loadable(() => import('components/dataSource/list'));
+const Dashboard = Loadable(() => import('components/dashboard/layout'));
+const Chart = Loadable(() => import('components/chart/list'));
+const DataSourceDetail = Loadable(() => import('components/dataSourceDetail/layout'));
 
 const { Sider, Content } = Layout;
 

src/routes/mainLayout.jsx

@@ -2,30 +2,13 @@ import React from 'react';
 import { Layout } from 'antd';
 import { Route, Switch, Redirect } from 'dva/router';
 import Navigator from '../components/common/navigator';
-// import HomePage from '../components/homePage/index';
-// import Workshop from '../components/workshop/index';
-// import Setting from '../components/setting/index';
 import './mainLayout.less';
-// import UserInfo from '../components/user/userInfo';
-import Loadable from 'react-loadable';
-import Skeleton from 'components/common/skeleton';
+import Loadable from 'utils/loadable';
 
-const HomePage = Loadable({
-    loader: () => import('components/homePage/index'),
-    loading: () => <Skeleton />
-});
-const Workshop = Loadable({
-    loader: () => import('components/workshop/index'),
-    loading: () => <Skeleton />
-});
-const Setting = Loadable({
-    loader: () => import('components/setting/index'),
-    loading: () => <Skeleton />
-});
-const UserInfo = Loadable({
-    loader: () => import('components/user/userInfo'),
-    loading: () => <Skeleton />
-});
+const HomePage = Loadable(() => import('components/homePage/index'));
+const Workshop = Loadable(() => import('components/workshop/index'));
+const Setting = Loadable(() => import('components/setting/index'));
+const UserInfo = Loadable(() => import('components/user/userInfo'));
 
 const { Header, Content } = Layout;
 

src/routes/router.js

@@ -2,42 +2,17 @@ import React from 'react';
 import { LocaleProvider } from 'antd';
 import { Router, Route, Switch } from 'dva/router';
 import PrivateRoute from './privateRoute';
-// import Login from '../components/common/login/login';
-// import Register from '../components/common/login/register';
 import MainLayout from './mainLayout';
-// import ChartDesigner from '../components/chartDesigner/layout';
-// import DashboardView from '../components/dashboard/view';
-// import DashboardShareView from '../components/dashboard/shareView';
-// import DashboardShareKeyView from '../components/dashboard/shareKeyView';
 // 由于 antd 组件的默认文案是英文，所以需要修改为中文
 import zhCN from 'antd/lib/locale-provider/zh_CN';
-import Loadable from 'react-loadable';
-import Skeleton from 'components/common/skeleton';
+import Loadable from 'utils/loadable';
 
-const Login = Loadable({
-    loader: () => import('components/common/login/login'),
-    loading: () => <Skeleton />
-});
-const Register = Loadable({
-    loader: () => import('components/common/login/register'),
-    loading: () => <Skeleton />
-});
-const ChartDesigner = Loadable({
-    loader: () => import('components/chartDesigner/layout'),
-    loading: () => <Skeleton />
-});
-const DashboardView = Loadable({
-    loader: () => import('components/dashboard/view'),
-    loading: () => <Skeleton />
-});
-const DashboardShareView = Loadable({
-    loader: () => import('components/dashboard/shareView'),
-    loading: () => <Skeleton />
-});
-const DashboardShareKeyView = Loadable({
-    loader: () => import('components/dashboard/shareKeyView'),
-    loading: () => <Skeleton />
-});
+const Login = Loadable(() => import('components/common/login/login'));
+const Register = Loadable(() => import('components/common/login/register'));
+const ChartDesigner = Loadable(() => import('components/chartDesigner/layout'));
+const DashboardView = Loadable(() => import('components/dashboard/view'));
+const DashboardShareView = Loadable(() => import('components/dashboard/shareView'));
+const DashboardShareKeyView = Loadable(() => import('components/dashboard/shareKeyView'));
 
 function RouterConfig({ history }) {
     return (

src/utils/loadable.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import Loadable from 'react-loadable';
+import Skeleton from 'components/common/skeleton';
+import SkeletonModal from 'components/common/skeletonModal';
+
+export default (loader, inModal) => {
+    return Loadable({
+        loader,
+        loading() {
+            return inModal ? <SkeletonModal /> : <Skeleton />
+        },
+    });
+}