fixed list loading

src/routes/List/CardList.js

 import React, { PureComponent } from 'react';
 import { connect } from 'dva';
-import { Row, Col, Card, Avatar, Spin, Button, Icon } from 'antd';
+import { Card, Avatar, Button, Icon, List } from 'antd';
 
 import PageHeaderLayout from '../../layouts/PageHeaderLayout';
 
@@ -53,19 +53,18 @@ export default class CardList extends PureComponent {
         extraContent={extraContent}
       >
         <div className={styles.cardList}>
-          {
-            loading ?
-              <Spin />
-              :
-              <Row gutter={16}>
-                <Col lg={8} md={12} sm={12} xs={24} style={{ marginBottom: 16 }}>
+          <List
+            loading={loading}
+            grid={{ gutter: 16, lg: 3, md: 2, sm: 1, xs: 1 }}
+          >
+            <List.Item>
               <Button type="dashed" className={styles.newButton}>
                 <Icon type="plus" /> 新增产品
               </Button>
-                </Col>
+            </List.Item>
             {
               list && list.map(item => (
-                    <Col lg={8} md={12} sm={12} xs={24} key={item.id} style={{ marginBottom: 16 }}>
+                <List.Item key={item.id}>
                   <Card
                     actions={[<a>操作一</a>, <a>操作二</a>]}
                   >
@@ -79,11 +78,10 @@ export default class CardList extends PureComponent {
                       )}
                     />
                   </Card>
-                    </Col>
+                </List.Item>
               ))
             }
-              </Row>
-          }
+          </List>
         </div>
       </PageHeaderLayout>
     );

src/routes/List/CoverCardList.js

@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
 import moment from 'moment';
 import { connect } from 'dva';
 import { routerRedux } from 'dva/router';
-import { Row, Col, Form, Card, Select, Spin } from 'antd';
+import { Row, Col, Form, Card, Select, List } from 'antd';
 
 import PageHeaderLayout from '../../layouts/PageHeaderLayout';
 import StandardFormRow from '../../components/StandardFormRow';
@@ -72,10 +72,13 @@ export default class CoverCardList extends PureComponent {
     const { getFieldDecorator } = form;
 
     const cardList = list ? (
-      <Row gutter={16} style={{ marginTop: 16 }}>
+      <List
+        loading={loading}
+        grid={{ gutter: 16, lg: 4, md: 3, sm: 2, xs: 1 }}
+      >
         {
           list.map(item => (
-            <Col lg={6} md={8} sm={12} xs={24} style={{ marginBottom: 16 }} key={item.id}>
+            <List.Item key={item.id}>
               <Card
                 cover={<img alt={item.title} src={item.cover} />}
               >
@@ -100,10 +103,10 @@ export default class CoverCardList extends PureComponent {
                   </div>
                 </div>
               </Card>
-            </Col>
+            </List.Item>
           ))
         }
-      </Row>
+      </List>
     ) : null;
 
     const tabList = [
@@ -209,17 +212,9 @@ export default class CoverCardList extends PureComponent {
               </StandardFormRow>
             </Form>
           </Card>
-          {
-            loading && (list.length > 0) && <Spin>
-              {cardList}
-            </Spin>
-          }
-          {
-            loading && (list.length < 1) && <div style={{ marginTop: 16 }}><Spin /></div>
-          }
-          {
-            !loading && cardList
-          }
+          <div className={styles.cardList}>
+            { cardList }
+          </div>
         </div>
       </PageHeaderLayout>
     );

src/routes/List/CoverCardList.less

@@ -21,4 +21,7 @@
       flex: 0 1 auto;
     }
   }
+  .cardList {
+    margin-top: 24px;
+  }
 }