Fix table custom spin indicator

Fix #9355

components/table/Table.tsx

@@ -17,6 +17,7 @@ import Column from './Column';
 import ColumnGroup from './ColumnGroup';
 import createBodyRow from './createBodyRow';
 import { flatArray, treeMap, flatFilter, normalizeColumns } from './util';
+import { SpinProps } from '../spin';
 import {
   TableProps,
   TableState,
@@ -915,9 +916,9 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
     }
   }
 
-  renderTable = (contextLocale: TableLocale) => {
+  renderTable = (contextLocale: TableLocale, loading: SpinProps) => {
     const locale = { ...contextLocale, ...this.props.locale };
-    const { style, loading, className, prefixCls, showHeader, ...restProps } = this.props;
+    const { style, className, prefixCls, showHeader, ...restProps } = this.props;
     const data = this.getCurrentPageData();
     const expandIconAsCell = this.props.expandedRowRender && this.props.expandIconAsCell !== false;
 
@@ -953,7 +954,7 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
         className={classString}
         expandIconColumnIndex={expandIconColumnIndex}
         expandIconAsCell={expandIconAsCell}
-        emptyText={!loading && locale.emptyText}
+        emptyText={!loading.spinning && locale.emptyText}
       />
     );
   }
@@ -962,12 +963,19 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
     const { style, className, prefixCls } = this.props;
     const data = this.getCurrentPageData();
 
+    let loading = this.props.loading as SpinProps;
+    if (typeof loading === 'boolean') {
+      loading = {
+        spinning: loading,
+      };
+    }
+
     const table = (
       <LocaleReceiver
         componentName="Table"
         defaultLocale={defaultLocale.Table}
       >
-        {this.renderTable}
+        {(locale) => this.renderTable(locale, loading)}
       </LocaleReceiver>
     );
 
@@ -976,13 +984,6 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
     const paginationPatchClass = (this.hasPagination() && data && data.length !== 0)
       ? `${prefixCls}-with-pagination` : `${prefixCls}-without-pagination`;
 
-    let loading = this.props.loading;
-    if (typeof loading === 'boolean') {
-      loading = {
-        spinning: loading,
-      };
-    }
-
     return (
       <div
         className={classNames(`${prefixCls}-wrapper`, className)}
@@ -990,7 +991,7 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
       >
         <Spin
           {...loading}
-          className={loading ? `${paginationPatchClass} ${prefixCls}-spin-holder` : ''}
+          className={loading.spinning ? `${paginationPatchClass} ${prefixCls}-spin-holder` : ''}
         >
           {table}
           {this.renderPagination()}

components/table/__tests__/Table.test.js

@@ -67,6 +67,7 @@ describe('Table', () => {
     };
     const wrapper = mount(<Table loading={loading} />);
     expect(wrapper.find('.ant-spin')).toHaveLength(0);
+    expect(wrapper.find('.ant-table-placeholder').text()).not.toEqual('');
 
     loading.spinning = true;
     wrapper.setProps({ loading });