8. User dva-loading to handle loading state

package.json

@@ -10,6 +10,7 @@
     "antd": "^2.5.2",
     "babel-runtime": "^6.9.2",
     "dva": "^1.1.0",
+    "dva-loading": "^0.2.0",
     "react": "^15.4.0",
     "react-dom": "^15.4.0"
   },

src/components/Users/Users.js

@@ -4,7 +4,7 @@ import { Table, Pagination, Popconfirm } from 'antd';
 import styles from './Users.css';
 import { PAGE_SIZE } from '../../constants';
 
-function Users({ list: dataSource, total, page: current }) {
+function Users({ list: dataSource, loading, total, page: current }) {
   function deleteHandler(id) {
     console.warn(`TODO: ${id}`);
   }
@@ -46,6 +46,7 @@ function Users({ list: dataSource, total, page: current }) {
         <Table
           columns={columns}
           dataSource={dataSource}
+          loading={loading}
           rowKey={record => record.id}
           pagination={false}
         />
@@ -63,6 +64,7 @@ function Users({ list: dataSource, total, page: current }) {
 function mapStateToProps(state) {
   const { list, total, page } = state.users;
   return {
+    loading: state.loading.models.users,
     list,
     total,
     page,

src/index.js

@@ -1,17 +1,16 @@
 import dva from 'dva';
+import createLoading from 'dva-loading';
 import './index.html';
 import './index.css';
 
 // 1. Initialize
 const app = dva();
 
-app.model(require("./models/users"));
-
 // 2. Plugins
-// app.use({});
+app.use(createLoading());
 
 // 3. Model
-// app.model(require('./models/example'));
+app.model(require('./models/users'));
 
 // 4. Router
 app.router(require('./router'));