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 { Skeleton } from 'antd';
import React from 'react';
import { useInView } from 'react-intersection-observer';
import { useSchemaTemplate } from '../../../schema-templates';
import { BlockItem } from '../block-item';
import { useInView } from 'react-intersection-observer';
import { BlockItemCard } from '../block-item/BlockItemCard';
import { BlockItemError } from '../block-item/BlockItemError';
import useStyles from './style';
@ -33,7 +33,7 @@ export const CardItem = (props: Props) => {
<BlockItemError>
<BlockItem name={name} className={`${componentCls} ${hashId} noco-card-item`}>
<BlockItemCard ref={ref} {...restProps}>
{inView ? props.children : <Skeleton active paragraph={{ rows: 4 }} />}
{inView ? props.children : <Skeleton paragraph={{ rows: 4 }} />}
</BlockItemCard>
</BlockItem>
</BlockItemError>,

View File

@ -508,7 +508,7 @@ export const Table: any = withDynamicSchemaProps(
return (
<td {...props} ref={ref} className={classNames(props.className, cellClass)}>
{inView || isIndex ? props.children : <Skeleton.Button active />}
{inView || isIndex ? props.children : <Skeleton.Button />}
</td>
);
},
@ -527,7 +527,7 @@ export const Table: any = withDynamicSchemaProps(
cell: BodyCellComponent,
},
};
}, [bodyWrapperComponent]);
}, [BodyCellComponent, bodyWrapperComponent]);
const memoizedRowSelection = useMemo(() => rowSelection, [JSON.stringify(rowSelection)]);

View File

@ -9,7 +9,7 @@ import {
useProps,
withDynamicSchemaProps,
} 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 { useInView } from 'react-intersection-observer';
import { Board } from './board';
@ -155,7 +155,7 @@ export const Kanban: any = withDynamicSchemaProps(
<MemorizedRecursionField name={schemas.card.name} schema={schemas.card} />
) : (
<Card bordered={false}>
<Skeleton active paragraph={{ rows: 4 }} />
<Skeleton paragraph={{ rows: 4 }} />
</Card>
)}
</div>