From 859bb18f97c569d90fba732de083f9ad8222301a Mon Sep 17 00:00:00 2001
From: chenos <chenlinxh@gmail.com>
Date: Wed, 30 Dec 2020 22:42:47 +0800
Subject: [PATCH] feat(app): improve loading animation

---
 packages/app/src/components/views/SimpleTable.tsx | 10 +++++++++-
 packages/app/src/components/views/Table.tsx       |  9 +++++++++
 packages/app/src/global.less                      | 12 ++++++++++++
 3 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/packages/app/src/components/views/SimpleTable.tsx b/packages/app/src/components/views/SimpleTable.tsx
index 0522d0ee45..a525e10cf5 100644
--- a/packages/app/src/components/views/SimpleTable.tsx
+++ b/packages/app/src/components/views/SimpleTable.tsx
@@ -5,6 +5,9 @@ import ViewFactory from '@/components/views';
 import { useRequest } from 'umi';
 import api from '@/api-client';
 import { components, fields2columns } from './SortableTable';
+import { LoadingOutlined } from '@ant-design/icons';
+
+export const icon = <LoadingOutlined style={{ fontSize: 36 }} spin />;
 
 export interface SimpleTableProps {
   schema?: any;
@@ -117,7 +120,12 @@ export function SimpleTable(props: SimpleTableProps) {
       <AntdTable
         size={'middle'}
         rowKey={rowKey}
-        loading={loading}
+        loading={{
+          spinning: loading,
+          size: 'large',
+          indicator: icon,
+          // className: 'spinning--absolute',
+        }}
         columns={fields2columns(fields)}
         dataSource={data?.list||(data as any)}
         onChange={(pagination, filters, sorter, extra) => {
diff --git a/packages/app/src/components/views/Table.tsx b/packages/app/src/components/views/Table.tsx
index ffde74709a..50bddfca39 100644
--- a/packages/app/src/components/views/Table.tsx
+++ b/packages/app/src/components/views/Table.tsx
@@ -5,6 +5,9 @@ import { Actions } from '@/components/actions';
 import { request, useRequest } from 'umi';
 import api from '@/api-client';
 import { components, fields2columns } from './SortableTable';
+import { LoadingOutlined } from '@ant-design/icons';
+
+export const icon = <LoadingOutlined style={{ fontSize: 36 }} spin />;
 
 export interface TableProps {
   schema?: any;
@@ -110,6 +113,12 @@ export function Table(props: TableProps) {
       <AntdTable 
         size={'middle'}
         rowKey={rowKey}
+        loading={{
+          spinning: loading,
+          size: 'large',
+          indicator: icon,
+          // className: 'spinning--absolute m32',
+        }}
         columns={fields2columns(fields)}
         dataSource={data?.list||(data as any)}
         onChange={(pagination, filters, sorter, extra) => {
diff --git a/packages/app/src/global.less b/packages/app/src/global.less
index 192fb1d876..982449f522 100644
--- a/packages/app/src/global.less
+++ b/packages/app/src/global.less
@@ -29,4 +29,16 @@
   display: flex;
   justify-content: flex-end;
   width: 100%;
+}
+
+.spinning--absolute {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  max-height: inherit !important;
 }
\ No newline at end of file