perf: remove all Skeleton animation (#4113)

* perf: remove Skeleton

* chore: add lazy render

* chore: remove all animation
This commit is contained in:
Zeke Zhang 2024-04-22 09:03:20 +08:00 committed by GitHub
parent 03cf42db9b
commit 15325101d6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 6 additions and 6 deletions

View File

@ -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>,

View File

@ -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)]);

View File

@ -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>