mirrors/nocobase
1
0
Fork 0
mirror of https://github.com/nocobase/nocobase synced 2024-11-15 08:47:20 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(app): improve loading animation

Browse Source
This commit is contained in:
chenos 2020-12-30 22:42:47 +08:00
parent ed8b5504ac
commit 859bb18f97
3 changed files with 30 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/app/src/components/views/SimpleTable.tsx
View File

@ -5,6 +5,9 @@ import ViewFactory from '@/components/views';
import { useRequest } from 'umi'; import { useRequest } from 'umi';
import api from '@/api-client'; import api from '@/api-client';
import { components, fields2columns } from './SortableTable'; import { components, fields2columns } from './SortableTable';
import { LoadingOutlined } from '@ant-design/icons';
export const icon = <LoadingOutlined style={{ fontSize: 36 }} spin />;
export interface SimpleTableProps { export interface SimpleTableProps {
schema?: any; schema?: any;
@ -117,7 +120,12 @@ export function SimpleTable(props: SimpleTableProps) {
<AntdTable <AntdTable
size={'middle'} size={'middle'}
rowKey={rowKey} rowKey={rowKey}
loading={loading} loading={{
spinning: loading,
size: 'large',
indicator: icon,
// className: 'spinning--absolute',
}}
columns={fields2columns(fields)} columns={fields2columns(fields)}
dataSource={data?.list||(data as any)} dataSource={data?.list||(data as any)}
onChange={(pagination, filters, sorter, extra) => { onChange={(pagination, filters, sorter, extra) => {

9
packages/app/src/components/views/Table.tsx
View File

@ -5,6 +5,9 @@ import { Actions } from '@/components/actions';
import { request, useRequest } from 'umi'; import { request, useRequest } from 'umi';
import api from '@/api-client'; import api from '@/api-client';
import { components, fields2columns } from './SortableTable'; import { components, fields2columns } from './SortableTable';
import { LoadingOutlined } from '@ant-design/icons';
export const icon = <LoadingOutlined style={{ fontSize: 36 }} spin />;
export interface TableProps { export interface TableProps {
schema?: any; schema?: any;
@ -110,6 +113,12 @@ export function Table(props: TableProps) {
<AntdTable <AntdTable
size={'middle'} size={'middle'}
rowKey={rowKey} rowKey={rowKey}
loading={{
spinning: loading,
size: 'large',
indicator: icon,
// className: 'spinning--absolute m32',
}}
columns={fields2columns(fields)} columns={fields2columns(fields)}
dataSource={data?.list||(data as any)} dataSource={data?.list||(data as any)}
onChange={(pagination, filters, sorter, extra) => { onChange={(pagination, filters, sorter, extra) => {

12
packages/app/src/global.less
View File

@ -29,4 +29,16 @@
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
width: 100%; 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;
} }