fixed list loading

src/routes/List/CardList.js

@@ -1,6 +1,6 @@
 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,37 +53,35 @@ 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 }}>
-                  <Button type="dashed" className={styles.newButton}>
-                    <Icon type="plus" /> 新增产品
-                  </Button>
-                </Col>
-                {
-                  list && list.map(item => (
-                    <Col lg={8} md={12} sm={12} xs={24} key={item.id} style={{ marginBottom: 16 }}>
-                      <Card
-                        actions={[<a>操作一</a>, <a>操作二</a>]}
-                      >
-                        <Card.Meta
-                          avatar={<Avatar size="large" src={item.avatar} />}
-                          title={item.title}
-                          description={(
-                            <p className={styles.cardDescription}>
-                              <span>{item.description}</span>
-                            </p>
-                          )}
-                        />
-                      </Card>
-                    </Col>
-                  ))
-                }
-              </Row>
-          }
+          <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>
+            </List.Item>
+            {
+              list && list.map(item => (
+                <List.Item key={item.id}>
+                  <Card
+                    actions={[<a>操作一</a>, <a>操作二</a>]}
+                  >
+                    <Card.Meta
+                      avatar={<Avatar size="large" src={item.avatar} />}
+                      title={item.title}
+                      description={(
+                        <p className={styles.cardDescription}>
+                          <span>{item.description}</span>
+                        </p>
+                      )}
+                    />
+                  </Card>
+                </List.Item>
+              ))
+            }
+          </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;
+  }
 }