feat(app): improve loading animation

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) => {

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) => {

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;
 }