From b9ce4c7ddfc3b01db6a7beadc9fb28d7c32e05c7 Mon Sep 17 00:00:00 2001
From: KgTong <kgtong1992@gmail.com>
Date: Tue, 27 Oct 2015 10:34:05 +0800
Subject: [PATCH] replace the table loading with spin

---
 components/spin/index.jsx   |  2 +-
 components/table/index.jsx  | 23 +++++++++++++++++++----
 style/components/table.less | 26 ++++++++++++--------------
 3 files changed, 32 insertions(+), 19 deletions(-)

diff --git a/components/spin/index.jsx b/components/spin/index.jsx
index 2e00e710ed..7b91288280 100644
--- a/components/spin/index.jsx
+++ b/components/spin/index.jsx
@@ -17,7 +17,7 @@ let AntSpin = React.createClass({
 
   render() {
     const props = this.props;
-    
+
     let className = classSet({
       spin: 1,
       [`spin-${props.type}`]: 1,
diff --git a/components/table/index.jsx b/components/table/index.jsx
index 11d2f4bd5d..9a57f39566 100644
--- a/components/table/index.jsx
+++ b/components/table/index.jsx
@@ -5,6 +5,7 @@ import Checkbox from '../checkbox';
 import FilterDropdown from './filterDropdown';
 import Pagination from '../pagination';
 import objectAssign from 'object-assign';
+import Spin from '../spin';
 
 function noop() {
 }
@@ -468,9 +469,6 @@ let AntTable = React.createClass({
     let columns = this.renderRowSelection();
     let classString = '';
     let expandIconAsCell = this.props.expandedRowRender && this.props.expandIconAsCell !== false;
-    if (this.state.loading && !this.isLocalDataSource()) {
-      classString += ' ant-table-loading';
-    }
     if (this.props.size === 'small') {
       classString += ' ant-table-small';
     }
@@ -490,7 +488,23 @@ let AntTable = React.createClass({
       </div>;
       emptyClass = ' ant-table-empty';
     }
-    return <div className={'clearfix' + emptyClass}>
+    // spin holder
+    let spinEl;
+    let spinWrapperClass = '';
+    if (this.state.loading && !this.isLocalDataSource()) {
+      // if there is no pagination or no data, the height of spin should decrease by half of pagination
+      let paginationPatchClass = (this.hasPagination() && data && data.length !== 0)
+              ? 'ant-table-with-pagination'
+              : 'ant-table-without-pagination';
+      let spinClass = `${paginationPatchClass} ant-table-spin-holder`;
+
+      spinEl = <div className={spinClass}>
+          <Spin size="md" type="primary"/>
+        </div>;
+
+      spinWrapperClass = ' ant-table-loading';
+    }
+    return <div className={'clearfix' + emptyClass + spinWrapperClass}>
       <Table
         {...this.props}
         data={data}
@@ -499,6 +513,7 @@ let AntTable = React.createClass({
         expandIconAsCell={expandIconAsCell}
         />
       {emptyText}
+      {spinEl}
       {this.renderPagination()}
     </div>;
   }
diff --git a/style/components/table.less b/style/components/table.less
index 11a31d1681..77b27a0367 100644
--- a/style/components/table.less
+++ b/style/components/table.less
@@ -82,23 +82,21 @@
   &-loading {
     position: relative;
     .@{table-prefix-cls}-body {
-      opacity: 0.42;
+      opacity: 0.6;
     }
-    &:after {
-      position: absolute;
-      display: inline-block;
-      .animation(loadingCircle 1.5s infinite linear);
-      content: "\e610";
-      top: 50%;
-      left: 50%;
-      margin-top: -10px;
-      margin-left: -10px;
-      font-family: anticon;
-      width: 20px;
+    .@{table-prefix-cls}-spin-holder {
       height: 20px;
       line-height: 20px;
-      font-size: 20px;
-      color: @primary-color;
+      left: 50%;
+      top: 50%;
+      margin-left: -30px;
+      position: absolute;
+    }
+    .@{table-prefix-cls}-with-pagination {
+      margin-top: -20px;
+    }
+    .@{table-prefix-cls}-without-pagination {
+      margin-top: 10px;
     }
   }