mirror of
https://gitee.com/nocobase/nocobase.git
synced 2025-07-01 10:42:19 +08:00
perf: remove all Skeleton animation (#4113)
* perf: remove Skeleton * chore: add lazy render * chore: remove all animation
This commit is contained in:
parent
03cf42db9b
commit
15325101d6
@ -1,9 +1,9 @@
|
|||||||
import { useFieldSchema } from '@formily/react';
|
import { useFieldSchema } from '@formily/react';
|
||||||
import { Skeleton } from 'antd';
|
import { Skeleton } from 'antd';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import { useInView } from 'react-intersection-observer';
|
||||||
import { useSchemaTemplate } from '../../../schema-templates';
|
import { useSchemaTemplate } from '../../../schema-templates';
|
||||||
import { BlockItem } from '../block-item';
|
import { BlockItem } from '../block-item';
|
||||||
import { useInView } from 'react-intersection-observer';
|
|
||||||
import { BlockItemCard } from '../block-item/BlockItemCard';
|
import { BlockItemCard } from '../block-item/BlockItemCard';
|
||||||
import { BlockItemError } from '../block-item/BlockItemError';
|
import { BlockItemError } from '../block-item/BlockItemError';
|
||||||
import useStyles from './style';
|
import useStyles from './style';
|
||||||
@ -33,7 +33,7 @@ export const CardItem = (props: Props) => {
|
|||||||
<BlockItemError>
|
<BlockItemError>
|
||||||
<BlockItem name={name} className={`${componentCls} ${hashId} noco-card-item`}>
|
<BlockItem name={name} className={`${componentCls} ${hashId} noco-card-item`}>
|
||||||
<BlockItemCard ref={ref} {...restProps}>
|
<BlockItemCard ref={ref} {...restProps}>
|
||||||
{inView ? props.children : <Skeleton active paragraph={{ rows: 4 }} />}
|
{inView ? props.children : <Skeleton paragraph={{ rows: 4 }} />}
|
||||||
</BlockItemCard>
|
</BlockItemCard>
|
||||||
</BlockItem>
|
</BlockItem>
|
||||||
</BlockItemError>,
|
</BlockItemError>,
|
||||||
|
@ -508,7 +508,7 @@ export const Table: any = withDynamicSchemaProps(
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<td {...props} ref={ref} className={classNames(props.className, cellClass)}>
|
<td {...props} ref={ref} className={classNames(props.className, cellClass)}>
|
||||||
{inView || isIndex ? props.children : <Skeleton.Button active />}
|
{inView || isIndex ? props.children : <Skeleton.Button />}
|
||||||
</td>
|
</td>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
@ -527,7 +527,7 @@ export const Table: any = withDynamicSchemaProps(
|
|||||||
cell: BodyCellComponent,
|
cell: BodyCellComponent,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
}, [bodyWrapperComponent]);
|
}, [BodyCellComponent, bodyWrapperComponent]);
|
||||||
|
|
||||||
const memoizedRowSelection = useMemo(() => rowSelection, [JSON.stringify(rowSelection)]);
|
const memoizedRowSelection = useMemo(() => rowSelection, [JSON.stringify(rowSelection)]);
|
||||||
|
|
||||||
|
@ -9,7 +9,7 @@ import {
|
|||||||
useProps,
|
useProps,
|
||||||
withDynamicSchemaProps,
|
withDynamicSchemaProps,
|
||||||
} from '@nocobase/client';
|
} from '@nocobase/client';
|
||||||
import { Spin, Tag, Card, Skeleton } from 'antd';
|
import { Card, Skeleton, Spin, Tag } from 'antd';
|
||||||
import React, { useCallback, useContext, useMemo, useRef, useState } from 'react';
|
import React, { useCallback, useContext, useMemo, useRef, useState } from 'react';
|
||||||
import { useInView } from 'react-intersection-observer';
|
import { useInView } from 'react-intersection-observer';
|
||||||
import { Board } from './board';
|
import { Board } from './board';
|
||||||
@ -155,7 +155,7 @@ export const Kanban: any = withDynamicSchemaProps(
|
|||||||
<MemorizedRecursionField name={schemas.card.name} schema={schemas.card} />
|
<MemorizedRecursionField name={schemas.card.name} schema={schemas.card} />
|
||||||
) : (
|
) : (
|
||||||
<Card bordered={false}>
|
<Card bordered={false}>
|
||||||
<Skeleton active paragraph={{ rows: 4 }} />
|
<Skeleton paragraph={{ rows: 4 }} />
|
||||||
</Card>
|
</Card>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user